vue-table-element表格的全部展开和全部折叠

以下是二级表格的展开折叠,三级同样:
展开折叠

1.给按钮添加展开和折叠事件:

<el-button type="small" icon="el-icon-plus" @click="actionUnfoldFunc(true)">全部展开</el-button>
<el-button type="small" icon="el-icon-minus" @click="actionUnfoldFunc(false)">全部折叠</el-button>

2.在export-methods 下添加方法:

data(){
  return {
    isExpand:true,// 默认为展开状态
  }
}
methods: {
    actionUnfoldFunc(isAss){
      //this.$refs.ctab.handleExpand(isAss)
      this.handleExpand(isAss)
    },
    handleExpand(isAss) {
      // 此判断是否为展开状态或折叠状态--若展开折叠是同一个按钮则无需传参和加此if
      if (this.isExpand == isAss){
        return
      }
      this.isExpand = !this.isExpand
      // this.tableData为返回的二级数据data
      this.$nextTick(() => {
        this.forArr(this.tableData, this.isExpand)
      })
    },
    // 遍历
    forArr(arr, isExpand) {
      arr.forEach(i => {
        // toggleRowExpansion见element文档
        this.$refs.ctab.toggleRowExpansion(i, isExpand)
        if (i.children) {
          this.forArr(i.children, isExpand)
        }
      })
    },
}

3.点击即可实现全部展开和折叠;
完!

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容