elementUI树状多选表格

树状多选表格 需回显已选择的 可控制展开收起

 

<el-button v-if="!fold" @click="foldShow">
   <i color="pink" class="el-icon-circle-plus"></i>全部展开
</el-button>
<el-button v-if="fold" @click="foldNone">
  <i color="pink" class="el-icon-remove"></i>全部收起
</el-button>
<el-table v-loading="loading" :data="deptList" row-key="id" default-expand-all :tree-props="{children: 'children', hasChildren: 'hasChildren'}" ref="checkTable" @select="select" @select-all="selectAll" @selection-change="selChange">
   <el-table-column type="selection" width="55"></el-table-column>
   <el-table-column prop="roadName" label="路线编号" ></el-table-column>
   <el-table-column prop="name" label="路线编号及所属公司"></el-table-column>
</el-table> 

 fold:true,

// 遮罩层

ZDSJloading:true,

// 表格树数据

 deptList: [],

forArr(arr, isExpand) {
    arr.forEach(i => {
      this.$refs.checkTable.toggleRowExpansion(i, isExpand)
      if (i.children) {
        this.forArr(i.children, isExpand)
      }
    })
},
foldShow(){
  this.fold=!this.fold
  this.forArr(this.deptList, true)
},
foldNone(){
  this.fold=!this.fold
  this.forArr(this.deptList, false)
},
select (selection, row) {
   // console.log(selection, row,'999090');
   if (selection.some(el => { return row.id === el.id })) {
     if (row.children) {
       row.children.map(j => {
         this.toggleSelection(j, true)
       })
     }
   } else {
     if (row.children) {
       row.children.map(j => {
         this.toggleSelection(j, false)
       })
     }
   }
},
selectAll(selection) {
  // tabledata第一层只要有在selection里面就是全选
  const isSelect = selection.some(el => {
  const tableDataIds = this.deptList.map(j => j.id)
  return tableDataIds.includes(el.id)
 })
  // tableDate第一层只要有不在selection里面就是全不选
  const isCancel = !this.deptList.every(el => {
  const selectIds = selection.map(j => j.id)
  return selectIds.includes(el.id)
 })
  if (isSelect) {
    selection.map(el => {
      if (el.children) {
        el.children.map(j => {
          this.toggleSelection(j, true)
        })
      }
    })
  }
  if (isCancel) {
    this.deptList.map(el => {
       if (el.children) {
         el.children.map(j => {
         this.toggleSelection(j, false)
       })
      }
    })
   }
 },
    selChange(v){
    this.selectArr=[]
    v.map(i=>{
      this.selectArr.push(i.roadName)
    })
    console.log(this.selectArr,'selectArr')
    },
    toggleSelection (row, select) {
      if (row) {
        this.$nextTick(() => {
          this.$refs.checkTable && this.$refs.checkTable.toggleRowSelection(row, select)
        })
      }
    },
// 列表发布按钮
    publish(e){
      this.pub=true;
      this.form = e;
      this.id1s=e.id
      this.getTableData();
      this.fbl=e.deviceResolution
      console.log(e,'1234567890');
      this.ZDSJloading = true;
      pubZDSJ(e.FInt_ID).then(res=>{
        // this.formSub.displayCont=res.data.content
        this.$set(this.formSub, 'displayCont', res.data.content)
         res.data.all.result.map(i=>{
           i.children.map(j=>{
               if(j.id==z){
                this.$nextTick(()=>{
                    this.toggleSelection(j, true)
                })
              }
            })
           })
        })
         this.deptList=res.data.all.result
        console.log(this.deptList,'this.deptListthis.deptListthis.deptList');
        this.ZDSJloading = false;
      })
    },

 select select-all方法为网上查找所得

小tip：

// this.formSub.displayCont=res.data.content

this.$set(this.formSub, 'displayCont', res.data.content)

直接赋值的话 有问题 不能修改 所以用$set方法就可以了

因为甲方需求问题 太长浏览不方便，该版本替换掉了，最终并未采用