如何使用单槽修改数据表中的任何列

Posted 2023-02-23

【中文标题】如何使用单槽修改数据表中的任何列

【英文标题】：how to use single slot to modify any columns in data tables

【发布时间】：2021-05-15 04:55:41

【问题描述】：

我使用 vuetify 创建了一个可重用的数据表。一切正常。我已经通过 headers 和 items 作为在不同组件中使用数据表的道具。

我正在使用插槽，但使用了一些不同的方法，即带有 if/else 条件的基于列的解决方案。但是，我需要单槽，所以它不能以组件为中心。

这是我的示例数据表代码

<v-data-table
:headers="headers"
:items="items"
:items-per-page="8"
:hide-default-footer="true"
hide-actions
item-key="name"
class="elevation-1"
>
<template slot="items" slot-scope="props">
  <td v-for="(header, index) in headers" :key="index">
      <template v-if="(header.type === 'aId')">
             props.item[header.value] 
      </template>
      <template v-else-if="(header.type === 'aName')">
             props.item[header.value] 
      </template >
      <template v-else>
             props.item[header.value] 
      </template>
  </td>
 </template>
 </v-data-table>

这里我在表头字段中传递了一个“模板”属性，并且根据条件我可以更改相应的列，但这听起来是特定于组件的。有没有更好的方法来做到这一点？

【问题讨论】：

***.com/questions/64636803/…

【参考方案1】：

CustomDataTable.vue

<template>
  <v-data-table ...>
    <template v-for="(_, slot) of $scopedSlots" v-slot:[slot]="scope">
      <slot :name="slot" v-bind="scope"/>
    </template>
  </v-data-table>
</template>

【讨论】：

感谢您的回复。你能详细说明一下吗？