如何为 Quasar 中的一行项目添加超链接?
How to make add hyperlink to a row of items in Quasar?
我有一个 Quasar table,其中有 5 列。在五列中,我希望第一列有一个指向我从 api.
获得的值的超链接
这是我的 blade.php 代码 -
colModel:[
{name:'name',index:'name', align:'center', sortable:false, formatter: 'showlink', width:211, cellattr: function (rowId, tv, rawObject, cm, rdata) { return 'style="white-space: normal;"' }, searchoptions:{sopt:["cn","eq","nc","bw"]}},
{name:'in',index:'in', align:'center', sorttype:'date', datefmt:'Y-m-d H:i:s', searchoptions:{sopt:["cn","eq","nc","bw"]}},
{name:'out',index:'out', align:'center', sortable:true, searchoptions:{sopt:["cn","eq","nc","bw"]}},
{name:'in_comments',index:'in_comments', align:'center', sorttype:'text', width:211, cellattr: function (rowId, tv, rawObject, cm, rdata) { return 'style="white-space: normal;"' }, searchoptions:{sopt:["cn","eq","nc","bw"]}},
{name:'out_comments',index:'out_comments', align:'center', sorttype:'text', width:211, cellattr: function (rowId, tv, rawObject, cm, rdata) { return 'style="white-space: normal;"' }, searchoptions:{sopt:["cn","eq","nc","bw"]}}
]
这是我的 Vue 代码 -
visibleColumns: ['name', 'in', 'out', 'in_comments', 'out_comments'],
columns: [
{ name: 'name', align: 'center', label: 'Name', field: 'name', sortable: true },
{ name: 'in', label: 'In', field: 'in', sortable: true },
{ name: 'out', label: 'Out', field: 'out', sortable: true },
{ name: 'in_comments', label: 'in comments', field: 'in_comments' },
{ name: 'out_comments', label: 'out comments', field: 'out_comments' },
],
名称应该用这样的超链接包裹 -
姓名
我可以知道可以做些什么来实现这个目标吗?
您也可以只自定义一个特定的列。此插槽的语法为 body-cell-[name]
,其中 [name]
应替换为用作行键的每一行的 属性。
示例 -
<template v-slot:body-cell-name="props">
<q-td :props="props">
<div>
<a href="https://quasar.dev/vue-components/table#QTable-API" />
</div>
</q-td>
</template>
我有一个 Quasar table,其中有 5 列。在五列中,我希望第一列有一个指向我从 api.
获得的值的超链接这是我的 blade.php 代码 -
colModel:[
{name:'name',index:'name', align:'center', sortable:false, formatter: 'showlink', width:211, cellattr: function (rowId, tv, rawObject, cm, rdata) { return 'style="white-space: normal;"' }, searchoptions:{sopt:["cn","eq","nc","bw"]}},
{name:'in',index:'in', align:'center', sorttype:'date', datefmt:'Y-m-d H:i:s', searchoptions:{sopt:["cn","eq","nc","bw"]}},
{name:'out',index:'out', align:'center', sortable:true, searchoptions:{sopt:["cn","eq","nc","bw"]}},
{name:'in_comments',index:'in_comments', align:'center', sorttype:'text', width:211, cellattr: function (rowId, tv, rawObject, cm, rdata) { return 'style="white-space: normal;"' }, searchoptions:{sopt:["cn","eq","nc","bw"]}},
{name:'out_comments',index:'out_comments', align:'center', sorttype:'text', width:211, cellattr: function (rowId, tv, rawObject, cm, rdata) { return 'style="white-space: normal;"' }, searchoptions:{sopt:["cn","eq","nc","bw"]}}
]
这是我的 Vue 代码 -
visibleColumns: ['name', 'in', 'out', 'in_comments', 'out_comments'],
columns: [
{ name: 'name', align: 'center', label: 'Name', field: 'name', sortable: true },
{ name: 'in', label: 'In', field: 'in', sortable: true },
{ name: 'out', label: 'Out', field: 'out', sortable: true },
{ name: 'in_comments', label: 'in comments', field: 'in_comments' },
{ name: 'out_comments', label: 'out comments', field: 'out_comments' },
],
名称应该用这样的超链接包裹 - 姓名
我可以知道可以做些什么来实现这个目标吗?
您也可以只自定义一个特定的列。此插槽的语法为 body-cell-[name]
,其中 [name]
应替换为用作行键的每一行的 属性。
示例 -
<template v-slot:body-cell-name="props">
<q-td :props="props">
<div>
<a href="https://quasar.dev/vue-components/table#QTable-API" />
</div>
</q-td>
</template>