解决vue3+element-plus 使用table 展开行时,更新展开行中的数据,展开行自动合闭的问题

117 阅读1分钟

使用row-key绑定每一行的id为唯一值。 使用expand-row-keys绑定一个数组,存放行id

   <el-table
      :data="salaryList"
      style="width: 100%"
      :span-method="spanMethod"
      :expand-row-keys="expandRowList"
      :row-key="(row:any) => row.id"
      @expand-change="expandChange">
      
   </el-table>

更新expandRowList,expandChange事件第二个参数是当前展开的数组,直接赋值给expandRowList,则解决自动合闭的问题

  <script lang="ts">
   const expandRowList = ref<any[]>([]);
   //展开/合并时,更新展开数组
   const expandChange = (row: any, expandedRows: any[]) => {
     expandRowList.value = expandedRows.map((item: any) => {
       return item.id;
     });
   };
  </script>