Sample code for implementing multiple selection based on nested Table in ElementUI

Preface:

I wrote this because I helped my friend fix a bug in his project.
This is the first time I write this function. If there are any mistakes, I hope you can correct me. If you find it helpful, please give me a thumbs up!
The key in the code is the core of the path search of Tree in js. If you don’t understand it, you can search Baidu by yourself. If you need it, you can send me a private message to ask for the code and see how I implemented it.

Ideas:

Looking at this requirement from the beginning, we need to know where to write things.

1. Table
2. Multiple selection & select all
3. Nested data (drop-down operation)

Just in time, we can find the official documentation of ElementUI

Found the API we need

• When nesting data, you need to use tree-props
• Use toggleRowSelection when selecting data

Basically, you can start using the above.

accomplish:

Based on the above, we can write the HTML structure

<template>
 <div>
  <el-table
   ref="multipleTable"
   :data="tableData"
   style="width: 100%; margin-bottom: 20px"
   row-key="id"
   border
   default-expand-all
   :select-on-indeterminate="true"
   :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
   @select="rowSelect"
   @select-all="selectAll"
  >
   <el-table-column type="selection" width="55"> </el-table-column>
   <el-table-column prop="date" label="Date" width="180"> </el-table-column>
   <el-table-column prop="name" label="姓名" width="180"> </el-table-column>
   <el-table-column prop="address" label="Address"></el-table-column>
  </el-table>
 </div>
</template>

The multiple selection of the form can be divided into 2 items, 1 is positive selection, which means when checkout is true, 2 is reverse cancellation, which means when checkout is false, then I will analyze how to implement this positive selection and reverse cancellation

1. Positive selection

Suppose I have data like the following:
When clicking a child node, we need to select both the parent node and the root node of the child node at the same time.
Root node-parent node-child node
Figure 2 is the data declared in my data, which includes whether isChecked is selected and whether children has child nodes

Now that we have a clear idea of ​​what to choose, how do we implement it?

When I click on a child node, I need to record the parent node of the child node all the way to the root node, so we use the concept of Tree

The following code uses the idea of ​​tree backtracking. The path search uses pre-order traversal because you are not sure which subtree the child node you clicked is on.
Please search Baidu for the specific idea of ​​Tree method;

treeFindPath(tree, func, path = []) {
   if (!tree) return [];
   for (const data of tree) {
    path.push(data);
    if (func(data)) return path;
    if (data.children) {
     const findChildren = this.treeFindPath(data.children, func, path);
     if (findChildren.length) return findChildren;
    }
    path.pop();
   }
   return [];
  },

When we call the above code, passing the node ID will return an array containing the objects on its path. In this way, we can loop through the array and use the toggleRowSelection method to change the page status style.

2. Reverse Cancellation

Reverse cancellation is just the opposite of selection. When clicking on a child node to cancel, we need to determine whether all nodes at the same level have been canceled. If all nodes have been canceled, we need to change the parent node of this node to the canceled state, and then check whether all nodes at the same level of its parent node are in the canceled state. If there is still a canceled state, continue to search its parent node in the same way as before until the condition is not met and exit the loop.

A simple schematic diagram

When clicking on node 4, it will check whether the same-level nodes 5 and 6 are in the canceled state. If they are both in the canceled state, check their parent node 2, change 2 to false, and then check whether 2's same-level 3 is canceled. If it is canceled, check 1
If the same level is selected, it will directly jump out of the loop without taking the next step

Below is the uncheck code

Still using the Tree code, reverse() the obtained array. The first loop starts from clicking the node and searches online. Here, a for loop is used. If it is not satisfied, the subsequent loop is terminated directly.

3. Select All

I feel like I'm writing a bit too much here.
When selecting all, I will first recursively determine whether there is any unchecked data through isChecked in the data. If there is any unchecked data, I will recursively change isChecked in all data to true. If all are selected, I will recursively change it to false.

Below is all the selected codes

  /**
   * @describe select all*/
  selectAll(selection) {
   console.log(selection);
   let isAllCheck = this.selectAllRecursion(this.tableData);
   // Whether aa is false represents whether it is checked or not this.checkoutAll(this.tableData, !isAllCheck);
  },
  /**
   * @describe recursively checks whether isChecked is true, false means it is not checked*/
  selectAllRecursion(arr) {
   let isCheck = true;
   function isRecursion(arr) {
    arr.forEach((item) => {
     if (!item.isChecked) {
      isCheck = false;
      if (item.children) {
       isRecursion(item.children);
      }
     }
    });
   }
   isRecursion(arr);
   return isCheck;
  },
  /**
   * @describe Change all values ​​to true or false
   */
  checkoutAll(arr, boole) {
   var _this = this;
   function allCheck(arr, boole) {
    arr.forEach((item) => {
     item.isChecked = boole;
     _this.$refs.multipleTable.toggleRowSelection(item, boole);
     if (item.children) {
      allCheck(item.children, boole);
     }
    });
   }
   allCheck(arr, boole);
  },

END:

The basic code is as above, excluding the table paging function

This concludes this article about the sample code for implementing multiple selections based on nested Tables in ElementUI. For more information about nested multiple selections in ElementUI Tables, please search previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!