Vue3+TS Element Plus 中Table同时只能展开一行且能关闭

el-table 有展开行功能，但是展开多行并不好看，所以需要设置 expand只展开一行，用expand-change可以实现。

@expand-change=""//展开或是关闭时执行的函数

:expand-row-keys="" //设置当前展开行，要求值为数组(白话就是 存放在这个数组的ID会在页面中展开,没有就不会展开)

:row-key="" //设置行的唯一标识，用于配合expand-row-keys使用，(行的唯一标识 expand-row-keys存放的值就是行的唯一标识)

二、在外层的table设置关键属性

const expands = ref([]);
let expandColumn = (row:any, expandedRows:any) => {
//row 被点击当前行的数据
//expandedRows 存放页面中被展开行的数据 对应的数组就是 expand-row-keys

//通过expandedRows长度来判断用户点击是展开还是折叠
  if (expandedRows.length) { 
    //展开
    expands.value = []; //先干掉之前展开的行
    if (row) {
      expands.value.push(row.id); //push新的行 (原理有点类似防抖)
    }
  } else {
    expands.value = []; //折叠 就清空expand-row-keys对应的数组
  }
};

 它就是根据每一行的  数据的  第一列 id参数不同 所展开的行不同 

如果 你后台过来的数据 id全一样的话  就会出现   你点击第一行的展开 会让所有的行全部展开 

所以 这种方法也只适合于  后台回来的id参数不同的情况