el-table的手风琴展开：row-key后端返回id相同的bug修改

    <el-table
          v-loading="loading"
          :data="productList"
          lazy
          ref="dataTreeList"
          :row-key="getRowkey"
          :load="load"
          :expand-row-keys="expands"
          :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
          @selection-change="handleSelectionChange"
          :cell-class-name="addClass2"
          @expand-change="toggleRowExpansion"
        >
          <el-table-column type="selection" width="55" align="center" />
          <el-table-column
            label="产品名称"
            type=""
            align="center"
            prop="productName"
          />
        <el-table-column type="expand">
        <template slot-scope="props">
          <el-table :data="props.row.children" style="width: 97%;margin:auto">
            <el-table-column
              prop="productName"
              label="产品名称"
              align="center"
            ></el-table-column>
            <el-table-column
              prop="typeName"
              width="110px"
              align="center"
              label="命令类型"
            ></el-table-column>
            <el-table-column
              label="类型编码"
              align="center"
              prop="typeCode"
              width="110px"
            />
             <el-table-column
          label="是否必填"
          align="center"
          prop="vStatus"
          width="100px"
        >
          <template slot-scope="scope">
            <span v-if="scope.row.vStatus == 0">必填</span>
            <span v-if="scope.row.vStatus == 1">不必填</span>
          </template>
        </el-table-column>
          、
          // 这里的row表示当前行,list表示当前展开行的数组
        toggleRowExpansion(row, list) {
          console.log("row", row);
          console.log("list", list);
          // if (list.length > 1) {
          //   this.expands = [];
          //   this.expands.push(row.id);
          // }
          this.productList.map(item => {
            if (row.id != item.id) {
              this.$refs.dataTreeList.toggleRowExpansion(item, false);
            }
          });
          this.$refs.table.toggleRowExpansion(row);
        },

为什么会使用到这个方法（toggleRowExpansion）的原因呢？

由于 我们一般会点击箭头，通过 toggleRowExpansion 方法展开合闭 expand。
（我之前写法是,list表示当前展开行的数组，会导致你点击箭头展开 然后点击下一个展开 上面一个会自动收起来，但是会有bug 点到第三个或是几个 就页面卡死了）



重点来了， toggleRowExpansion 方法也支持手风琴效果，点击展开子级的同时关闭原先除子级之外的已打开的展开项，实现手风琴，修改 查看详情方法：

handleDetail(row){
   this.tableData5.map((item)=>{
      if(row.id != item.id){
        this.$refs.table.toggleRowExpansion(item, false);
      }
   })
   this.$refs.table.toggleRowExpansion(row);
}

table 的 toggleRowExpansion 方法可以传两个参数，第一个参数传 row, 第二个参数传 false,意思是合闭 expand。我们把每行的 expand关闭一次，
再把对应的行打开，这样就实现了手风琴效果了。

点击展开内容时，遍历外层数组，找到除了当前点击的展开项之外的行，关闭除子级之外的已展开项，然后展开或者关闭当前点击的行。

\

上面的:row-key="getRowkey" 后端返回的id都是一样的 \

所以再循环的时候会报错：必须加row-key 表格中的数据存在相同的id值,使key值不唯一,导致报错

解决方法：

        this.productList.forEach(r => {
          r.key = r.id;
        });
        增加一个新字段

然后

             getRowkey(row) {
                  if (row.key) {
                    return row.key;
                  } else {
                    return row.id + "only";
                  }
                },