如何解决Vuetify 数据表在列上展开行单击 列点击行点击
我有一个包含可扩展行的 vuetify 数据表。我与 the demo 唯一真正的区别是我希望 item.name
列像 V 形图标一样打开/关闭可展开行。当我在该列的 v 槽上放置一个 @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>
解决方法
列点击
这是通过单击特定列来实现的方法。在列的槽模板中放置一个 @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(在填充中点击第一列时行会展开)
行点击
这里是如何通过行点击(即任何列)来完成的。在模板中,为 <v-data-table>
事件的 click:row
添加一个侦听器:
<v-data-table @click:row="clickRow">
...
</v-data-table>
此事件传递两个参数:项目和项目槽数据,包括单击行的索引。使用此信息修改跟踪所有展开行的 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(点击行中任意位置时行会展开)
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。