Vue element表格关闭展开指定行

刚才给客户调需求 使用了element 表格的展开功能  但是需要加按钮和单击展开，翻了一下官网琢磨了一下搞了出来 分享给大家

用表格的这个方法切换展开状态  toggleRowExpansion ：

先写方法

handleEdit(index, row) {
  this.$refs.refTable.toggleRowExpansion(row) //只需要这一句就好了
  this.show =true
  console.log(index, row);
},

 

然后因为我们用了refTable的toggleRowExpansion方法  所以要在表格上 ref="refTable"

最后在页面的按钮上调用 就实现了

同理

单击某一行  这里我们不用row_click 我们用cell_click 然后判断cllIndex不是[0]的下标，这样好处是他自带的那个三角箭头不会失效  以及判断按钮那一列

写上方法 在表格标签上调用就好了

    cellClick(row, column, event) {
        if(event.cellIndex != 0 && event.cellIndex != 4){
          this.$refs.refTable.toggleRowExpansion(row)
        }
      }