preface

Received a notice, let me change the field query selector of the data retrieval page, the current one is not beautiful, want to change a little simpler, now is the three selection boxes together, need to change, now look like this:

OK, I just took the Element UI cascade selector and sat back and waited for the interface to be sent to me. I thought the data type given by the back end would be the same as the data type of the cascade selector, would it look like this?

There’s a level one and a level two, straight away, and it turns out… The back end just said to me, can’t you put together data from three interfaces? ! Put it together? ! Put it together? ! I felt my brain echoing… Well, nothing to say, can only find their own way to deal with.

Cascade selector

Copy and paste the Element UI’s cascading selector directly, so you don’t need its built-in data.

<el-form-item label="Area">
                  <el-cascader
                    v-model="queryParamse.field.id"/ / bindingid
                    :props="props"
                    @change="handleSelect"
                    :show-all-levels="false"
                    :clearable="true"
                  ></el-cascader>
                </el-form-item>
Copy the code

A selection box can be displayed directly, but without data:

The introduction of the interface

Encapsulate the interface from the back end and introduce the interface to be used at the same time. There are three interfaces in total, corresponding to the three-level selector

import {
  getfiled, // Level 1 domain interface
  getfileds,// Secondary domain interface
  getfiledt,// Level 3 domain interface
 
} from "@/api/warning/warning";
Copy the code

Also, put the bound props inside the return and add the following data

// Cascade selector
      props: {
        // expandTrigger:'hover', //hover trigger submenu, cancel to click click
        emitPath: false.lazy: true.lazyLoad: this.lazyLoad,
        value: "id".label: "name".leaf: "leaf"
      },
Copy the code

To get the data

 // Get the cascade selection data
    lazyLoad(node, resolve) {
      this.getData(node, resolve);
    },
    getData(node, resolve) {
      const level = node.level;
      if (level === 0) {
        getfiled().then((res) = > {
          var result;
          console.log(556677888);
          console.log(res);
          result = res.data;
          result.forEach((item) = > {
            item.value = item.id;
            item.label = item.name;
          });
          resolve(result); // Assign to the selection drop-down box
        });
      }
      if (level === 1) {
        var id = "";
        id = node.data.value;
        console.log(id);
        getfileds(id).then((res) = > {  // Get the id selected at the first level to query the data at the second level
          console.log(res);
          var result;
          result = res.data.subs;
          result.forEach((item) = > {
            item.value = item.id;
            item.label = item.name;
          });
          resolve(result);
        });
      }
      if (level === 2) {
        var id = "";
        id = node.data.value; // Get the id of the second level to query the number of the third level
        console.log(id);
        getfiledt(id).then((res) = > {
          console.log(res);
          var result;
          result = res.data.subs;
          result.forEach((item) = > {
            item.value = item.id;
            item.label = item.name;
             // The following code represents the last level of the cancel arrow, and assigns the selected value to the selector
            item.leaf = level >= 2; }); resolve(result); }); }},Copy the code

Three levels of data can be displayed above the cascade selector

Ok, the data for the cascade selector is all displayed, and then the data binding is done…