如何在Vuetify 1.5版本中编程实现v-data-table所有行自动展开

Vuetify 1.5 版本的 v-data-table 自带的行展开能力，核心是通过支持 .sync 修饰符的 expand 属性管控状态。该属性接收一个唯一标识数组，数组内包含的标识和行数据匹配时，对应行就会保持展开状态：

• 如果表格配置了item-key属性（通常配置为每行数据的唯一字段，比如id），数组内存放的就是对应行的key字段值
• 如果没有配置item-key，数组内存放的就是对应行在表格数据数组中的下标索引

要实现加载完成全展开，本质就是在表格数据就绪后，把所有行的唯一标识值存入这个响应式数组即可。

基础绑定 #

首先在表格组件上正确绑定展开状态的双向同步变量，模板部分参考代码：

<v-data-table
  :headers="tableHeaders"
  :items="tableItems"
  item-key="id" <!-- 替换为业务里每行数据的唯一标识字段 -->
  expand
  :expand.sync="expandedRows"
>
  <!-- 原有每行的常规展示内容插槽 -->
  <template slot="items" slot-scope="props">
    <!-- 原有行展示逻辑 -->
  </template>
  <!-- 展开状态下展示的附加信息插槽 -->
  <template slot="expand" slot-scope="props">
    <!-- 行附加信息展示内容 -->
  </template>
</v-data-table>

在data中初始化对应的响应式变量：

data() {
  return {
    tableHeaders: [/* 自定义表头配置 */],
    tableItems: [/* 自定义行数据 */],
    expandedRows: [] // 绑定到 expand.sync 的展开状态数组，初始为空
  }
}

分场景实现全展开 #

根据表格数据的加载方式不同，选择对应的赋值时机：

场景1：表格为本地静态数据 #

直接在组件挂载完成的钩子中，生成全量行的标识数组即可：

mounted() {
  // 配置了item-key时，提取所有行对应的key字段值
  this.expandedRows = this.tableItems.map(item => item.id)
  // 未配置item-key时，提取所有行的下标索引
  // this.expandedRows = this.tableItems.map((_, index) => index)
}

场景2：表格为异步接口加载数据 #

需要等待接口返回、数据赋值给表格的items数组后，再在下次DOM更新周期中生成全量标识数组，避免数据未就绪时数组长度为0导致展开失效：

async mounted() {
  // 替换为实际的表格数据请求逻辑
  const tableRes = await requestTableList()
  this.tableItems = tableRes.list
  // 等DOM渲染完成后赋值展开数组
  this.$nextTick(() => {
    // 根据item-key配置提取对应的值
    this.expandedRows = this.tableItems.map(item => item.id)
  })
}

常见踩坑提示 #

• 不要直接给expand属性传固定布尔值尝试触发全展开，Vuetify 1.5中该属性只接收唯一标识数组作为展开状态值，不提供全展开的快捷开关能力
• 注意expand.sync绑定数组的内容格式要和item-key配置匹配：配置了item-key时必须存对应字段的值，不要存索引，否则会出现匹配不上、行不展开的问题
• 不要在表格数据完成赋值前生成索引数组，否则会因为数组长度和实际行数不匹配，导致没有行被成功展开
• 如果后续存在动态新增、删除表格行的操作，需要同步更新expandedRows数组的内容：新增行时把新行的唯一标识加入数组，删除行时把被删行的唯一标识从数组中移除，否则会出现展开状态和实际行错位的问题

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