elementui的el-table自定义控制展开事件，实现“展开”“收起”的切换（两种效果）【超级完整式代码】

第一种：多行点击展开其他行不收起
先看效果图

直接上代码
【核心代码添加标注简单易懂】

 
            
            
            
            【展开部分】
            
              
            
            【操作列】
            
              
            
          

data中定义： expands：[]

handleRowClick(row) {
      if (this.expands.includes(row.id)) {
        this.expands = this.expands.filter((val) => val !== row.id)
      } else {
        this.expands.push(row.id)
      }
    },

第二种：多行点击展开其他行自动收起：手风琴效果
【修改】标注就是跟第一种代码不同的地方：两处修改

data中定义： expands：[]

handleRowClick(row) {
      if (this.expands.includes(row.id)) {
        this.expands = this.expands.filter((val) => val !== row.id)
      } else {
        this.expands=[]    【修改】
        this.expands.push(row.id)
      }
    },

隐藏elementUI 展开行 > 图标

::v-deep .el-table__expand-icon{
  visibility: hidden;
}

注意

  row-key="id"   这里是设置了每行的唯一值，所以表格数组对象中是需要有id的，如果没有可以手动添加

代码

 for (let i = 0; i < this.smsLogList.length; i++) {
          this.smsLogList[i].id = i + 1
        }