headers in data-table（图标和少数 JSON ）

Question

要创建 table，我想使用额外的 JSON - “tdTyp”。在没有 data-table 的情况下，我使用 v-for 创建了一个类似的 table 并且一切正常：

<td>{{ td.status }}</td>
<td>{{ $data.tdTyp[td.typ - 1].bezeichnung }}</td>

“典型值”行：

<v-data-table
  :headers="headers"
  :items="tdData"
  :search="search"
></v-data-table>

export default {
 data () {
    return {
      tdData: resTdData,
      tdTyp: resTdTyp
    }
  },
computed: {
  headers () {
  return [
    { text: 'Status', value: 'status' },
    { text: 'Typ', value: `${this.tdTyp['typ' - 1].bezeichnung}` }, // 'typ' is number. I need for example: { text: 'Typ', value: this.tdTyp[0].bezeichnung } 
  ]}
}
}

resTdTyp JSON:

[{"bezeichnung": "Gesetz", "id": 1}, {"bezeichnung": "Verordnung", "id": 2}]

resTdDataJSON:

[{"status": 1, "text": "text", "typ": 1}, {"status": 0, "text": "text", "typ": 4}]

错误：

Cannot read properties of undefined (reading 'bezeichnung')

它工作正常：

{ text: 'Typ', value: 'typ' } // 1,2,3,4...

我还想添加图标：

{ text: 'Status', value: '(status === 1) ? <img src="#" /> : ""' } //status - 0 or 1

我是 JS 新手。也许这里需要这个 table 的 post-processing 或者 JSON?

的 pre-processing 数组

Answer 1

对于<v-data-table>组件，最好使用item.* slots。

因此，根据您的数据，您需要覆盖 #item.status 和 #item.typ 插槽。

我还使字段 headers 成为静态字段而不是计算字段，并添加了 getTyp 方法来解决您的 Cannot read properties of undefined... 错误。

代码应该类似于：

<v-data-table
  :headers="headers"
  :items="tdData"
>
  <template #item.status="props">
    <td>
      <img v-if="props.item.status === 1"
           src="https://cdn.vuetifyjs.com/docs/images/logos/vuetify-logo-dark.svg"
           height="30"
      />
    </td>
  </template>
  <template #item.typ="props">
    <td>
      {{ getTyp(props.item.typ) }}
    </td>
  </template>
</v-data-table>

...

data() {
  return {
    headers: [
      { text: 'Status', value: 'status' },
      { text: 'Typ', value: 'typ'}
    ],
    tdData: resTdData,
    tdTyp: resTdTyp
  }
},
methods: {
  getTyp(typId) {
    if (this.tdTyp[typId - 1] !== undefined) {
      return this.tdTyp[typId - 1].bezeichnung;
    } else {
      return '-';
    }
  }
}

我创建了 an example with static data at CodePen。

headers in data-table（图标和少数 JSON ）

headers in data-table(icons and few JSON )

javascript

vue.js

nuxt.js

vuetify.js