Writing in the front

(Everything involved in this article is very simple) Our company needs to check the options and submit the selected options to the background when saving the configuration. We need the search function, because there is too much data, so we need to load lazily. The project was developed by Vue + Element, so el-Tree was chosen.

1. The el – tree lazy loading

Click the level-1 node to lazily load the corresponding level-2 node (only two levels)

<el-tree
    v-if="pzShow"
    show-checkbox
    node-key="code"
    :props="pzProps"
    @check-change="pzCheckedChange"              
    v-loading="pzMapIsLoading"
    element-loading-text="Loading..."
    :default-checked-keys="pzCheckedCode"
    ref="tree"
    lazy
    :load="pzLoadNode"(Lazy loading)accordion
    check-strictly
></el-tree>
Copy the code

Data structure:

pzProps: {
  label: "name".children: "children".isLeaf: "leaf"
}
Copy the code

Node-key is bound to code, so the second-level node is obtained according to the first-level node’s code (available in the first parameter of the pzLoadNode method).

pzLoadNode(node, resolve) {
  this.pzMapIsLoading = true;
  // Get the level-1 node
  if (node.level === 0) {                 
    getPzMapOpts().then(res= > {
      this.pzMapIsLoading = false;
      this.pzMap = res.data.data.pzMap;
      return resolve(this.pzMap);
    });
  }
  if (node.level > 1) return resolve([]);
  // Get the secondary node
  if (node.level === 1) {
    this.pzMapIsLoading = false;
    getPzMapTree(node.data.code).then(res= > {
      this.pzChildrenList = res.data.data;
      if (this.pzChildrenList.length == 0) {
        this.$message.error("Data pull failed, please refresh and try again!");
        return;
      }
      resolve(this.pzChildrenList); }); }}Copy the code

2. Search

I made two trees, a lazy load tree and a search tree. At that time, I wanted to do it in a tree, but the search tree needs the first level node to expand by default, while the lazy load tree needs to click the first level node to expand, which conflicts. Failed to bind events to load(lazy loading or not) and defaule-expansion-all (default expansion or not). Finally choose to make two trees: initial display lazy load tree, lazy load tree hidden during search, search tree pzShow: true.

Search tree:

  <el-tree
    v-if=! "" pzShow"
    :data="pzList"
    show-checkbox
    node-key="code"
    @check-change="pzCheckedChange"
    v-loading="pzSearchMapIsLoading"
    element-loading-text="Loading..."
    :default-checked-keys="pzCheckedCode"
    ref="tree"
    default-expand-all
    check-strictly
  ></el-tree>
Copy the code

3. Select a node

The initial check event retrieves information about the current node and an array of selected nodes.






pzCheckedChange(node,checked,leaf) {
  if(checked === true) {
    this.pzCheckedCode.push(node.code);
  } else {
    this.pzCheckedCode = _.difference(this.pzCheckedCode,[node.code]); }}Copy the code

This is the first function that I developed independently when I entered the company as an intern. At that time, it was a mess (my own technology was really bad), and then there were bugs, which caused a lot of trouble to my colleagues. It worked out in the end. After finishing it, I found that it was very simple, there was no very complicated method involved, why did it take so long… defeat

This is my first time to write something. I hope you can criticize and correct me if I am not clear in some places or use it incorrectly. If there is a need for my help I will seriously answer! Thank you very much!