点击v-data-table展开箭头时如何获取对应行的item数据

展开箭头的点击事件被v-data-table内部阻止了冒泡，所以不会触发@click:row事件，用以下两种方案都可以实现需求：

方案1：使用内置的展开事件（适用于Vuetify 2.x） #

Vuetify 2.x的v-data-table内置了item-expand事件，点击展开/收起箭头时会触发，直接返回当前操作的行数据。

修改模板代码 #

给你的v-data-table组件添加@item-expand事件绑定：

<v-data-table
    :expanded.sync="expanded"
    :headers="tableHeaders"
    :items="myData"
    :single-expand="true"
    show-expand
    @item-expand="handleExpandRow"
 >

编写事件处理方法 #

methods: {
  handleExpandRow(item, isExpanded) {
    // item为当前点击箭头对应的行数据
    // isExpanded为true表示当前是展开操作，false表示收起操作
    // 此处写入你的业务逻辑即可
    console.log('当前行数据', item)
  }
}

方案2：监听展开值变化（兼容Vuetify 2.x/3.x） #

因为你用了sync（Vuetify3对应v-model:expanded）绑定了expanded变量，开启single-expand后expanded数组最多只会存在一个元素，就是当前展开的行数据，直接监听该数组变化即可：

示例代码（Vuetify 3.x写法） #

<v-data-table
    v-model:expanded="expanded"
    :headers="tableHeaders"
    :items="myData"
    :single-expand="true"
    show-expand
    @update:expanded="handleExpandChange"
 >

// 组合式API写法
const handleExpandChange = (expandedList) => {
  if (expandedList.length) {
    const currentItem = expandedList[0]
    // 拿到当前展开的行数据执行业务逻辑
    console.log('当前展开行数据', currentItem)
  }
}

内容的提问来源于stack exchange，提问作者Zemorah