Vuetify可展开行数据表格输入时自动折叠问题求助

这个问题我之前也碰到过，核心原因是：当你在展开行的输入字段中输入内容时，双向绑定（v-model）会更新对应的数据项，触发Vuetify数据表格的重新渲染。而默认情况下，表格的展开状态是内部维护的，重渲染后就会丢失，导致行自动折叠。

下面是具体的解决步骤，帮你持久化展开状态：

1. 手动维护展开状态数组 #

在组件的data中添加一个数组，用来存储当前展开的行的唯一标识（比如行的id）：

data() {
  return {
    // 你的其他数据（比如items、headers等）
    expandedRows: [] // 用来追踪展开的行
  }
}

2. 绑定表格的展开状态到数组 #

修改你的v-data-table组件，把expanded属性绑定到刚才创建的数组，同时监听update:expanded事件来更新数组：

<v-data-table
  :items="items"
  :headers="headers"
  :expanded="expandedRows"
  @update:expanded="expandedRows = $event"
  :item-key="item => item.id" <!-- 确保这里是行的唯一标识，比如id -->
  expand-icon="mdi-chevron-down"
>

注意：item-key必须设置为行数据的唯一属性（比如id），这样表格能准确识别每一行，避免展开状态混乱。

3. 保持输入字段的双向绑定 #

展开行的输入字段可以正常使用v-model绑定行数据的属性，现在因为展开状态由我们手动维护，数据更新不会再导致行折叠：

<template v-slot:item.expand="{ item }">
  <v-card>
    <v-card-text>
      <v-text-field
        v-model="item.note" <!-- 绑定到行数据的属性 -->
        label="添加备注"
        full-width
      ></v-text-field>
    </v-card-text>
  </v-card>
</template>

这样修改后，你在输入字段中输入内容时，表格虽然会因为数据更新重渲染，但展开状态会通过expandedRows数组保持下来，不会自动折叠了。

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