The use of el-tree requires that you can click on each administrative area to find out the area inside.

< el-tree

        :data="dataTree"
        show-checkbox
        node-key="districtId"
        :default-expanded-keys="["-1"]"
        :default-checked-keys="["2540102"]"
        :props="defaultProps"
        @node-click="handleNodeClick"
        >

< / el-tree >

clipboard.png

clipboard.png

clipboard.png

I can only achieve that when I load the first level, what I get is equal to dataTree, and then I click to get dataTree, but I will not insert the newly found data into the corresponding node in the data queried for the first time
how should I use this el-tree? query the expansion node, this data is not all found at once, but the point node is queried

.
Feb.16,2022

answer angrily. I did this last month.

< H2 > be sure to distinguish whether it is the first query and whether it is a leaf node. < / H2 >

it took a long time to figure out the problem at that time.

            <el-tree
            :props="treeProps"
            :load="loadNode"
            node-key="id"
            ref="tree"
            :expand-on-click-node="false"
            highlight-current
            :render-content="renderContent"
            default-expand-all
            @node-click="handleNodeClick"
            lazy>
            </el-tree>
getManageList(node,resolve,initFirst) {
    let params = {};
    if (node && node.data) {
        params.unitId = node.data.id;
    }
    this.$http.get('/v1/workunit/list/managed/straight',{params: params})
        .then((res) => {
            if (res.data.code === 0) {
                let temp = [];
                if (initFirst) {
                    temp.push({
                        name: res.data.data.parent.unitName,
                        id: res.data.data.parent.id,
                        isLeaf: res.data.data.children.length < 1
                    });
                    resolve(temp);
                } else {
                    let children = [];
                    res.data.data.children.map(item => {
                        children.push({
                            name: item.unitName,
                            id: item.id,
                            isLeaf: !item.hasChildren
                        });
                    });
                    resolve(children);
                }
            }
        });
},
        
        loadNode(node, resolve) {
            if (node.level === 0) {
                this.getManageList(node,resolve,true);
            } else if (node.level >= 1) {
                this.getManageList(node,resolve);
            }
        },

this.options.forEach((val, key) => {
  if (!val.children) {
    this.$set(val, 'children', [])
  }
})

first you need to have an array of children, and then when you click, you can get index, and push in the corresponding children

.

the correct answer on the first floor can be loaded lazily

Menu