＜el-tree＞ 树形控件与表格的联动应用（树应用了懒加载）

概要

今天用到一个需要懒加载的树，第一层需要需要调用接口拼上，第二，三层懒加载并且需要默认展示，树中选中的节点，会添加到表格中，表格中数据移除树中节点也会取消选中

整体流程

左边表格

     <el-table
             :data="tableDataThree"
               border
               row-key="sort"
               ref="tableDataThree"
               v-loading="loading"
       >
           <el-table-column width="60"  type="index" label="序号" align="left" ></el-table-column>
           <el-table-column prop="" label="名称" >
               <template slot-scope="scope">
                   {{ scope.row.orgName}}
               </template>
           </el-table-column>

           <el-table-column prop="" label="拖动排序" width="100">
               <template slot-scope="scope">
                   <i class="iconfont icon-tuozhuaishunxutubiao"></i>
               </template>
           </el-table-column>
           <el-table-column label="操作" width="100"  fixed="right">
               <template slot-scope="scope">
                   <span class="hrefText" @click="removeThree(scope.row)" style="padding-left: 12px;">移除</span>
               </template>
           </el-table-column>
         </el-table>

右边树

   <el-col :span="11">
        <el-input
                style="padding-top: 3px"
                placeholder="输入关键字进行过滤"
                v-model="filterText">
        </el-input>
        <el-tree
                :data="dataTree"
                show-checkbox
                default-expand-all
                node-key="id"
                :default-expanded-keys="[30000000,30000006,30000007]"
                ref="tree"
                :props="defaultProps"
                :load="loadNode"
                lazy
                highlight-current
                :default-expand-all="false"
                @check="handleNodeClick"
                :check-strictly="true"
                :filter-node-method="filterNode"
        >
        </el-tree>
    </el-col>

   //树
            filterText: '',//搜索单位树
            dataTree: [],
            dataOne:[],
            defaultProps: {
                children: 'children',
                label: 'label',
                isLeaf: 'leaf',
            },
            tableDataThree:[],
            dataTreeSelectId:[],
            checkMax:'',
            node_had:'',// 保存根节点
            resolve_had:'',

树的节点获取展示

在这个例子里，树的第一层是从接口调出的

 //获取树第一层
        treeChangeAll(){
            let params = {
                url: '/parentId',
                body: {
                    parentId:30000000,
                    level:-1
                },
            }
            this.$api.postRestTree(params).then(res => {
                this.dataTree = res.data
            }).catch(err => {
                console.log(err, '---')
            })
        },

   //获取第二层数据传参（传一个空值）
        async getSecondChildrenTree(){
            let params = {
                url: `/tree`,
                body: {},
            };
            return this.$api.postRestTree(params);
        },
        //获取多于第二层数据传参（传选中的id作为parentId传）
        async getChildrenTreeThird(parentID){
            let params = {
                url: `/tree`,
                body: {
                    parentId:parentID
                },
            };
            return  this.$api.postRestTree(params)
        },

懒加载反显获得的树的数据

  /**
         * @node[node]: 要加载的子节点的节点数据
         * @resolve: 用于resolve数据
         */
        //懒加载
        async loadNode(node, resolve) {    // 加载 树数据
        if (node.level == 0){
            this.node_had = node // 保存根节点
            this.resolve_had = resolve
            resolve(this.dataTree)
        }else if (node.level == 1){
            this.getSecondChildrenTree().then(res=>{
                resolve(res.data||[])
            })
        }else {
            this.getChildrenTreeThird(node.data.id).then(res=>{
                resolve(res.data||[])
            })
        }
        },

搜索树

watch: {
    filterText(val) {
        this.$refs.tree.filter(val);
    }
},

    filterNode(value, data){
    if (!value) return true;
    return data.label.indexOf(value) !== -1;
},

在表格中反显树中选中的数据

//反显树中选中的数据
handleNodeClick() {
    let resChick = this.$refs.tree.getCheckedNodes()
    let dataTreeSelect = []
    resChick.forEach((item,index) => {
        dataTreeSelect.push(
           {orgId: item.id,
            orgName: item.label,
            sort:index
           })
    })
    this.tableDataThree = dataTreeSelect
    console.log(this.tableDataThree,'this.tableDataThree选中反显')
},

在表格移除数据，同时树中取消选中状态

removeThree(row){
    this.tableDataThree.forEach((item,index) =>{
        console.log(item.orgId,row.orgId)
        if (item.orgId == row.orgId){
            this.tableDataThree.splice(index,1)
        }
    })
    let tableDataThreeChange =[]
    this.tableDataThree.forEach(item=>{
        tableDataThreeChange.push(item.orgId)
    })
    this.$refs.tree.setCheckedKeys(tableDataThreeChange)

    this.$message.success('移除成功！')
    console.log(this.tableDataThree,'移除后表格的数据')
},

整体就算完成啦！！！！（里边包括一个表格排序，单独分出来啦~）