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

概要

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

整体流程

左边表格

右边树

   //树
            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,'移除后表格的数据')
},

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