Detailed explanation of element El cascade selector

1. General

Cascade selectors are used for a wide range of purposes. For example, you can select the company to which a person belongs in cascade from head office branch department sub department.

If you implement a cascade selector yourself, it is actually more difficult. Element provides a cascade selector with perfect functions. This article will introduce it in detail.

2. Data binding

2.1 default data binding

The cascade selector will bind an array by default. The displayed text and value of the node correspond to the label and value attributes respectively, and the descendants of the node correspond to the children attribute. The example code is as follows:

 Default data binding,Selected value{{value}}
    <el-cascader v-model="value" :options="defaultOptions"></el-cascader>
export default {
  data() {
    return {
      value: [],
      defaultOptions: [{
        value: '1',
        label: 'Shandong',
        children: [{
          value: '2',
          label: 'Jinan',
        },
        {
          value: '3',
          label: 'Taian',
        }],
      }],
    }
  }
}

The corresponding effect is as follows. Note that the bound value is an array, which records the value of each node of the selected path.

2.2 specify binding data format

If the back-end interface has been developed and the data format returned by the back-end is fixed, you can also specify the format of binding data through props parameter. The code is as follows. Change the binding attributes of node text and node value to id and name.

  Specify binding properties
    <el-cascader v-model="value" :options="myOptions" :props="{label:'name',value:'id',children:'son' }"></el-cascader>
  myOptions: [{
        id: '1',
        name: 'Shandong',
        son: [{
          id: '2',
          name: 'Jinan',
        },
        {
          id: '3',
          name: 'Taian',
        }],
      }],

3. Common functions

3.1 modify trigger mode

By default, you need to click the option of the previous level to expand the next level. Hover and expand can be achieved by modifying the expandTrigger parameter.

 Modify the trigger method. The default is click Click trigger,Can be modified to hover Hover trigger
    <el-cascader v-model="value" :options="defaultOptions" :props="{ expandTrigger: 'hover' }"></el-cascader>

3.2 add empty button

By setting clear, add an empty button. Click this button to empty the selected item.

 Add empty button
    <el-cascader v-model="value" :options="defaultOptions" clearable></el-cascader>

The effects are as follows:

3.3 searchable

You can easily enable the search function by setting the filterable property for El cascade.

Searchable
    <el-cascader v-model="value" :options="defaultOptions" filterable></el-cascader>

The effects are as follows:

3.4 the selected item displays only the last level

When there are many levels, the display of all levels will be very messy. We can set: show all levels = "false" to control El cascade to display only the last level.

    Only the last level is displayed
    <el-cascader v-model="value" :options="defaultOptions" :show-all-levels="false"></el-cascader>

The effects are as follows:

3.5 any level can be selected

Sometimes, we want to select nodes that are not the last level, which can be implemented through the checkstrict parameter.

Any level 1 can be selected
    <el-cascader v-model="value" :options="defaultOptions" :props="{ checkStrictly: 'true' }"></el-cascader>

The effects are as follows:

3.6 panel style

The default is the style of the drop-down box, or it can be completely displayed as a panel. You can use the l-cascader-panel label.

    Panel style:
    <el-cascader-panel v-model="value" :options="defaultOptions"></el-cascader-panel>

The effects are as follows:

3.7 user defined node content

You can customize the content of the node through the slot, add icons, modify fonts and modify colors for the node.

 Custom node content
    <el-cascader v-model="value" :options="defaultOptions">
      <template slot-scope="{ data }">
        <span style="color:red;">{{ data.label }}</span>
      </template>
    </el-cascader>

The middle part of the template can be customized arbitrarily. The running effect of the above code is as follows:

4. Dynamically load subordinate

Sometimes there are many nodes, and the one-time loading speed will be very slow. At this time, you can choose to dynamically load the next level.

 Dynamically load subordinate
    <el-cascader :props="myProps"></el-cascader>
      myProps: {
        lazy: true,
        lazyLoad(node, resolve) {
          console.log(node);
          // Call resolve to return the child node data and notify the component that the data loading is complete
          let nodes = [];
          if (node.level == 0) {
            nodes.push({
              label: 'Shandong',
              value: 1
            });
          } else if (node.level == 1) {
            nodes.push({
              label: 'Jinan',
              value: 2
            });
          }
          resolve(nodes);
        }
      }

Explain the above code. Enable dynamic loading through lazy:true. Each time you click the parent node, you will start the lazyLoad method and pass in the node data node.
According to node Level determines the current level. If it is level 0, it returns the array containing Shandong. If it is level 1, it returns the array containing Jinan.
The last resolve function is the key, which resolves the elements of the array to the children of the current parent node.

Note that in the actual project development, we can according to node Data to obtain the data information bound by the node, so as to query the back-end for the child node array of the current node.

5. Summary

El cascader provides flexible functions and quick implementation, which is very easy to use in cascade selection.

Compared with using multiple drop-down boxes, cascading selectors save screen space and can support any number of levels, which is undoubtedly a better choice.

Project source code, series of tutorials and more, please visit Panda programming network

Tags: element

Posted by karikamiya on Fri, 17 Dec 2021 18:39:43 +1030