element ui 树形表格每次只展开一行如何实现

业务里有场景需要使用树形表格且展开一行的时候其他展开行需要收起，在网上搜了一下都是展开行类型的表格不是树形表格的展开，自己尝试了一下

都是在 expand-change 事件里触发：当用户对某一行展开或者关闭的时候会触发该事件（展开行时，回调的第二个参数为 expandedRows；树形表格时第二参数为 expanded），第一个参数是当前点击的行

对于展开行类型的表格：

展开行的时候取到 expandedRows 的 key 进行判断，先定义一个 expandRowKeys 数组，如果和当前行一致说明当前行被收起了，就清空 expandRowKeys，关闭所有行，如果不一致，说明当前行是从收起到了展开状态，只保留这一行展开，就设置 expandedRowKeys 为只包含当前行 key 的数组

onExpandChange(row) {
  if (row.task_key === this.expandRowKeys[0]) {
    this.expandRowKeys = [];
  } else {
    this.expandRowKeys = [row.task_key];
  }
}

树形表格
针对树形表格，expand-change 第二个参数为 这次点击行的状态，true为展开，false为收起，使用 toggleRowExpansion 方法设置行的展开和收缩状态

onExpandChange(row, expanded) {
  if (expanded) { // 展开的情况，加入expandRows，其他要收缩
    this.expandRows.forEach(item => {
      this.$refs.table.toggleRowExpansion(item, false);
    })
    this.expandRows.push(row);
  } else { // 收起了，把这行从expandRows里删除
    this.expandRows = this.expandRowKeys.filter(item => item.task_key !== row.task_key);
  }
}