Как сделать так, чтобы добавить гиперссылку на ряд предметов в Quasar? - PullRequest
Новая
       61

Как сделать так, чтобы добавить гиперссылку на ряд предметов в Quasar?

0 голосов
/ 22 января 2020

У меня есть таблица Квазар, где есть 5 столбцов. Из пяти столбцов я хочу, чтобы в первом столбце была гиперссылка на значение, которое я получаю от API.

Это мой блейд. 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' },
      ],

Имя должно быть обернуто такой гиперссылкой, как это - Имя

Могу ли я узнать, что можно сделать для достижения этой цели?

1 Ответ

0 голосов
/ 22 января 2020

Вы также можете настроить только один конкретный столбец. Синтаксис этого слота: 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>
...