element-ui table 实现表格展开行每次只能展开一行

 因为工作需要吗 element-ui中展开式表格虽然用着方便 但是 用过的童鞋 可能知道 只有点击展开的时候 下面的 元素我们才能获取到 同时每一行下面展开的 是使用 slot-scope 内容分发 共用的一套 模板 这就很尴尬了 

打个比如 ：我展开下面的是视频 那么所有行展开下面都是视频 我只能获取一次 视频标签 这下就悲催了 点击一下 所有行下面的视频同时 播放 又同时暂停   做过的童鞋可能就知道了  当然 产品经理或者ui让你这么做 你也只能蒙着头去搞吧 祝愿你能搞出来 当然你要是不用ui框架手写 也是可以的 好了闲话到此为止 

<el-table  :data="tableData"  style="width:100%" class="tableBox"

              @expand-change="expandSelect" :row-key='getRowKeys' :expand-row-keys="expands">

</el-table>

加上这个 

  @expand-change="expandSelect" :row-key='getRowKeys' :expand-row-keys="expands">

然后就是在 vue实例的data里面进行数据绑定了  (此处会略去一点代码)

data:{

   expands: [],
                getRowKeys(row) {
                    return row.id
                },

}

   methods:{

          expandSelect:function(row, expandedRows) {

         var that = this

        if (expandedRows.length) {

      that.expands = []

       if (row) {

              that.expands.push(row.id)

         }

       }

     else {

          that.expands = []

    },

说下简单的原理 他就是根据每一行的  数据的  第一列 id参数不同 所展开的行不同 

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

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

}