Vuetify 数据表在列单击时展开行

Question

我有一个包含可扩展行的 vuetify 数据表。 我与演示的唯一真正区别是我希望item.name列像 V 形图标一样打开/关闭可扩展行。 当我在该列的 v-slot 上放置@click处理程序时，我收到错误Error in v-on handler: "TypeError: expand is not a function" 。 这是我需要自定义的唯一列，因此我不想手动构建整个<tr> v-slot。 下面是一个按比例缩小的代码示例。 谢谢。

<v-data-table
    :headers="headers"
    :items="products"
    item-key="productCode"
    show-expand
    :expanded.sync="expanded"
>

  <template v-slot:item.name="{ item, expand, isExpanded }" >
    <h4 class="my-2" @click="expand(!isExpanded)">{{ item.name }} located in {{ item.depot | camelToWords }}</h4>
  </template>

  <template v-slot:expanded-item="{ headers, item }">
    <ProductDetailExpandedRow :currentProduct="item" :headers="headers"/>
  </template>

</v-data-table>

<script>
export default {
  data() {
    return {
      headers: [
        {
          text: 'Name',
          value: 'name',
        },
        {
          text: 'Product ID',
          value: 'productCode',
        },
        {
          text: 'Stock',
          value: 'stock',
        },
6 more columns continue on here...
      ],
      products: [],
    }
  }
}
</script>

Answer 1

栏目点击

这是通过特定列单击来完成的方法。 在列的槽模板中放置一个@click处理程序。 此处理程序在单击时接收列数据。 在这种情况下，列的名称是name ：

<template v-slot:item.name="slotData">
   <div @click="clickColumn(slotData)">{{ slotData.item.name }}</div>
</template>

展开的行在expanded的数组中被跟踪，因此添加该行的数据。 但如果它已经存在，请将其删除（因为您正在尝试折叠已经展开的列）

clickColumn(slotData) {
  const indexRow = slotData.index;
  const indexExpanded = this.expanded.findIndex(i => i === slotData.item);
  if (indexExpanded > -1) {
    this.expanded.splice(indexExpanded, 1)
  } else {
    this.expanded.push(slotData.item);
  }
}

这是codepen （单击第一列时行展开，在填充内）

行点击

这是您如何通过单击行（即任何列）来完成的。 在模板中，为click:row事件添加一个监听器到<v-data-table> ：

<v-data-table @click:row="clickRow">
...
</v-data-table>

这个事件传递了两个arguments：item，item slot data，包括点击行的索引。 使用此信息修改跟踪所有扩展行的this.expanded数组：

clickRow(item, event) {
  if(event.isExpanded) {
    const index = this.expanded.findIndex(i => i === item);
    this.expanded.splice(index, 1)
  } else {
    this.expanded.push(item);
  }
}

这会将项目添加到expanded数组中，或者通过查找索引并使用splice将其删除。

这是codepen （单击行中的任意位置时行展开）

Answer 2

我在手动展开表中的项目时遇到问题

我不得不像这样在数组中添加id

data() {
    return {
      expanded: [
        {
          id: "cbfa8ad4-4042-4ffa-b909-e8ce49c11aa0",
        },
        {
          id: "6fb8d2b4-0112-4349-afed-e6a6fbdc24fa",
        },
      ],