elementui table type="expand" 实现点击行展开行

<el-table fit border size="small"  :data="deviceList" ref="dataTreeList"  @expand-change="handleExpandChange">
  <el-table-column type="expand">
    // 如果表头需要统一管理按钮 可加入以下代码
      <template slot="header" slot-scope="scope">
         <el-button type="text" size="mini" @click="toggleRowExpansion">{{ isExpansion ? "关闭" : "展开" }</el-button>
        </template>
       <template slot-scope="scope">加入需要折叠的代码</template>
  </el-table-column>
</el-table>
  /** 表格展开与关闭 */
    toggleRowExpansion(){
      if(this.deviceList.length){
        this.isExpansion = !this.isExpansion;
        this.toggleRowExpansionAll(this.deviceList, this.isExpansion);
      }
    },
    toggleRowExpansionAll(data, isExpansion) {
      data.forEach((item) => {
        this.$refs.dataTreeList.toggleRowExpansion(item, isExpansion);
        if (item.children !== undefined && item.children !== null) {
          this.toggleRowExpansionAll(item.children, isExpansion);
        }
      });
    },
  // 判断是否所有行都展开或者关闭
  handleExpandChange(row,rows){
    if(this.deviceList.length == rows.length){
         this.isExpansion = true
   }else{
        this.isExpansion = false
     }
}

来源:https://www.jianshu.com/p/47064ff15219

posted @ 2022-10-24 09:39  凉面好好吃  阅读(1620)  评论(0编辑  收藏  举报