Background:

Using elementUI under vue

File:

http://element-cn.eleme.io/#/zh-CN/component/tree#tree-shu-xing-kong-jian

Demand:

Only the data selected in the secondary node is saved; the data selected in the primary node is not saved.

Effect:

Data source:

The background provides two interfaces for fetching the data of the first level node and the second level node respectively;

Train of thought:

When clicking the label list, trigger selectLabelList to get the data of the first level node, trigger lodeNode to fill in and expand the first level node; click the drop-down arrow of any first level node to get the second level node through the node.level==1 of loadNode to fill in. Each selection will trigger handleCheckChange to get the selected or delete the deselected content; finally, all the secondary data selected by the user will be saved to the labelcheckendlist array.

Note:

 The three attributes node key, ref and lazy must have
 The value passed from the primary node to the secondary node is the ID in node.data, i.e. node.data.id, rather than the node.id in the official website case

• 1
• 2

Actual combat:

html:

<el-button  @click="selectLabelList">Tag list</el-button>
<el-tree
    node-key="id"
    ref="tree"
    highlight-current
    :props="props"
    :load="loadNode"
    lazy=""
    show-checkbox
    @check-change="handleCheckChange">
</el-tree>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11

js: This is part of the core code, not all. Some fields have not been defined yet.

data() {
    return {
      labelCheckedList:[],
      props: {
          label: 'name',
          children: 'zones',
        }}
// Labelchecked list receives the checked data
handleCheckChange(data){
      this.currTreeId=data.id
        setTimeout(() => {
          let currtData = this.$refs.tree.getCheckedNodes(true)
          this.labelCheckedList = currtData;
        }, 100);
    },
//Triggered on lazy load
loadNode(node, resolve) {
      if (node.level === 0) {
        return resolve(this.categorylist);
      }
      if (node.level > 1) return resolve([]);
      if(node.level === 1) { // Two level node
        this.getChildrenNode(node,resolve)
      }
    },
// Two level node
getChildrenNode(node,resolve) {
      let categoryId = node.data.id;
      this.$http.post('/api/getLabelListByCategoryId', {
          categoryId:categoryId
        },
        {
            emulateJSON: true,
            emulateHTTP: true
        }).then(res => {
          this.childrenList = res.body;
          if(this.childrenList.length==0){
            this.$message.error('Data pull failed, please refresh and try again!');
            return;
          }
          resolve(this.childrenList);
        });
    },
// Put away and show the tree
selectLabelList() {
      if(!this.isShowTree){
          this.getCategorylist();
      }else{
        this.$refs.tree.$data.store.lazy = false
        this.isShowTree=false;
      }

    },
//Get primary node
getCategorylist(){
      this.$http.post('/api/categorylist', {
            searchInfo: this.searchLabelInfo,
          }).then(res => {
            let data = res.body.data.list;
            if(data.length > 0){
              data.forEach(item => {
                item.disabled= true;
              })
            }
            this.categorylist = data;
            this.isShowTree=true;
          })
    },