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