10行代码，实现 el-table 表格行的展开与收缩

在el-table中有一种可以让数据收缩的展示方式，这样可以方便进行大量的数据归类，但是官方文档语焉不详，既没有示例函数，也没有样例，让人无从下手。

找了很多网上的文章，总不是我要的效果，于是摸索了一会，终于找到了我想要的效果，直接上效果

页面打开前：

点击文字后，不是点击前面官方的箭头，而是箭头后面的文字，再次点击后关闭

这个效果让我比较满意，但实现方法并不是很完美，但是很简单，我记录一下

1、在el-table绑定变量expand-row-keys

这个变量是一个列表，里面保存的是展开的 id值 如expand-row-keys = ['1','2','3'] 这样的值，定义方法是

const expandRows = ref<string[]>([]);

2、在需要点击的文字上设定点击效果，定义了函数@click="toggleAllRows(scope.row)"，代码如下

const toggleAllRows = (row: Company_certificate) => {
  const idNow = row.id;
  if (typeof idNow === 'string') {
    const index = expandRows.value.indexOf(idNow);
    if (index > -1) {
      // 如果存在，则删除
      expandRows.value.splice(index, 1);
    } else {
      // 如果不存在，则添加
      expandRows.value.push(idNow);
    }
    console.log(expandRows.value);
    tableKey.value++;
    console.log(tableKey.value);
  }
};

实际上就是点击的时候讲当前数据的id值以字符的形式写入列表中

注：要实现折叠效果，数据要绑定key值，row-key="id"  这是收缩，展开数据的基础，数据结构我就不说了

3、这时候我神奇的发现，文字可以点击了，也可以展开下面的行了，但是再次点击却无法关闭，我觉得这是el-table的一个bug，其实本可以这么简单就实现点击的，但是官方文档却给了几个语焉不详的变量，实在不知道是为什么

4、这时我在想如果能实现展开，就证明路没问题了，但没法关闭，是因为表格没有再次渲染，想实现表格的再次渲染其实很简单，只要表格内的数据变化就行了，于是创造了一个变量const tableKey = ref(0)，每次点击后都实现+1 的效果，tableKey.value++; 这样表格就刷新了，哈哈曲线救国成功，别忘了将这个变量绑定在 el-table上

上全部代码

前端html代码：

<el-table :data="tableData_company_certificate" style="width: 100%" size="small" row-key="id" :expand-row-keys="expandRows" :key="tableKey">
    <el-table-column label="证书名称" show-overflow-tooltip>
        <template #default="scope">
            <div v-if="scope.row.children" style="display: inline;">
                <el-button style="font-size:12px;font-weight:bold" type="info" link  @click="toggleAllRows(scope.row)">{{ scope.row.cert_name }}</el-button>
            </div>
只有这个和点击有关，就只放这一点吧，方便大家拆解
1、绑定 :row-key="id
2、绑定 :expand-row-keys="expandRows"
3、绑定 :key="tableKey"
4、点击效果放在文字上，因为有的组件不接受 @click，于是用了button 组件，正好这个组件有个 link 的模式，不能说很像，只能说完全一样 @click="toggleAllRows(scope.row)"，这里要带行数据，添加id用

前端 TS 代码：
用的是vue的 setup语法

const tableKey = ref(0)
const expandRows = ref<string[]>([]);

const toggleAllRows = (row: Company_certificate) => {
  const idNow = row.id;
  if (typeof idNow === 'string') {
    const index = expandRows.value.indexOf(idNow);
    if (index > -1) {
      // 如果存在，则删除
      expandRows.value.splice(index, 1);
    } else {
      // 如果不存在，则添加
      expandRows.value.push(idNow);
    }
    console.log(expandRows.value);
    tableKey.value++;
    console.log(tableKey.value);
  }
};

实现了点击展开数据的效果。

重新渲染表格的延迟会比系统提供的折叠慢一些，有卡顿的感觉，但是系统提供的API又没有明确写，有搞懂的朋友可以给我留言，感谢。