vue加element实现table手风琴展开收起

简单记录一下，最近在做项目的时候，有一个需求，要点展开的时候table显示子项，并且展开的字样变成收起。再次点击收起变成展开，然后关闭子项。并且点击别的行，展开的行就会关闭，显示点击的行，字也跟着变。如下图：

代码如下：

html部分：

  <el-table-column label="更多" align="right">
        <template slot-scope="scope">
          <el-button
            type="text"
            @click="toogleExpand(scope.row, $event)"
            style="font-size:12px"
          >{{scope.row.expend}}</el-button> //这里主要是在获取的后端数据里面加了一个字段默认为展开，试过一些方法，发现这个最好用
        </template>
      </el-table-column>

js部分：

画红圈的部分就是在获取到后端的table数据之后，在数据里面加一个"展开"的字段expend。
下面是

 toogleExpand(row, evt) {
      let temp = row.expend;
      console.log("点击当前行的状态----", row.expend);
      this.tableData5.forEach(item => {
        item.expend = "展开";//遍历table数据取出展开字段
      });
      if (temp == "收起") {
      //判断展开收起
        row.expend = "展开";
      } else {
        row.expend = row.expend == "展开" ? "收起" : "展开";
      }

      let $table = this.$refs.table;
      this.tableData5.map(item => {
        if (row.id != item.id) {
          $table.toggleRowExpansion(item, false);//合闭expand，这里可以看上面贴的参考手风琴链接
        } else {
        }
      });
      $table.toggleRowExpansion(row);
    },