Question

我是vuetify的新手，我试图将值放在v-data-table的一列中并将其转换为等效的文本，但是找不到执行方法。

headers: [
    { text: 'Name', value: 'name' },
    { text: 'Type', value: 'typeName(type)' },
  ]

我尝试将typeName作为计算值和方法：

typeName(typId) {
  return ...
},

如何使它工作？

Answer 1

是的，您可以通过添加显式函数来格式化列值

以下是有效的代码笔，它反转了第一列的值：https://codepen.io/chansv/pen/GRRjaqj?editors=1010

如果您具有标头类型，则无需从此处调用该函数，相反，我们需要通过添加模板来从列调用

headers: [
    { text: 'Name', value: 'name' },
    { text: 'Type', value: 'type' },
  ]

在HTML中，将带有槽点的模板添加到正文

<v-data-table
      :headers="headers"
      :items="items"   >
<template v-slot:body="{items}">
      <tbody>
        <tr v-for="item in items" :key="item.name">
        <td>{{item.name}}</td>
        <td>{{typeName(item.type)}}</td>
        </tr>
        </tbody>
    </template>
</v-data-table>

在内部数据属性中添加属性typeName

data() {
  return {
    typeName: (type) => type.substring(2),
  }
}

如何更改v数据表中的值

1 个答案: