Development is 50% ahead of schedule. Wow, that smells good.

Now, look at the picture and talk

Table Tree data Cascader cascade selector

Function realization + detailed code

Cascader cascade selector

The options property specifies the array of options to render a cascade selector, so the data structure returned by the back-end interface should be consistent, which makes processing a lot easier.

The data format required for Options on Element’s official website:

options: [{
          value: 'zhinan'.label: 'guide'.children: [{
            value: 'shejiyuanze'.label: 'Design Principles'}}]]Copy the code

The format of the data returned by the back-end interface:

We need to do some processing on the data returned from the back end to satisfyoptionsThe required standard format for:

	handleAdd() {
      this.$api.rechargeclass.list().then(res= > {
        this.$set((this.optionclass = this.getTreeData(res)))
    getTreeData(data) {
      for (var i = 0; i < data.length; i++) {
        data[i].label = data[i].class   
        data[i].value = data[i].id
        if (data[i].children.length < 1) {
          data[i].children = undefined     // Avoid children being empty when the next level is blank
        } else {
      return data
Copy the code

Note:data[i].children = undefinedThe judgment here must be needed, or you’ll fall into a pit

Implementing cascader components:

<template v-slot:pid="{ form, formItemKey }">
            :props="{ checkStrictly: true }"
Copy the code
handleChange(value) {
Copy the code

Note: For business purposes, slot slots are used, which can be optionally ignored

This is where the cascade selector is done.

Table Tree data

When I was preparing to write the Table, I was shocked to find the magic scene, as shown in the opening picture, the tree structure was automatically generated…

Open the document now:Good fellow, you taste, you fine taste, children’s greatness lies in thisHere, think of the child field passed to children as agreed with the backend brother, which is really useful.

It’s really important to look at the documentation API!