时间戳

首页 > 解决方案 > 如何更改 v-data-table 中的值

vuetify.js - 如何更改 v-data-table 中的值

问题描述

我是 vuetify 的新手，我正在尝试获取 v-data-table 列中的值并将其转换为等效的文本，但不知道该怎么做。

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

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

typeName(typId) {
  return ...
},

我怎样才能让它工作？

标签： vuetify.js

解决方案

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

这是反转第一列值的工作代码笔：https ://codepen.io/chansv/pen/GRRjaqj?editors=1010

如果你有 headers 类型，不需要从这里调用函数，而是我们需要通过添加模板从列调用

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

在 HTML 中，将带有插槽点的模板添加到 body

<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>

在 data 属性里面添加一个属性 typeName

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

推荐阅读