Element UI级联选择器

前言

接到通知，让我把数据检索页面的领域查询选择器改一下，现在的那个不好看，想改的简单一点，现在的是三个选择框拼起来的，需要改一下，现在的长这样：

OK，我直接拿着Element UI的级联选择器就过来了，然后坐等后端给我接口，我想着后端给的数据格式，应该是和级联选择器的数据格式是一样的吧，应该长成这样吧？？

有一级和二级，直接就分好的，结果。。。。后端直接告诉我说，你不会用三个接口的数据拼起来吗？！ 拼起来吗？！ 拼起来吗？！，瞬间感觉大脑出现了回音。。。，好吧，无话可说，只能自己想办法处理了。。

级联选择器

直接把Element UI的级联选择器复制粘贴过来，至于它自带的数据，就没必要了，毕竟用不到。。。

<el-form-item label="领域">
                  <el-cascader
                    v-model="queryParamse.field.id" //绑定的id
                    :props="props"
                    @change="handleSelect"
                    :show-all-levels="false"
                    :clearable="true"
                  ></el-cascader>
                </el-form-item>

直接就可以显示出来一个选择框，只是没有数据：

引入接口

将后端给的接口进行封装，同时引入到需要用到的接口，一共三个接口，对应三级的选择器

import {
  getfiled, //一级领域接口
  getfileds,//二级领域接口
  getfiledt,//三级领域接口
 
} from "@/api/warning/warning";

同时将绑定的props放到return里面，并添加以下数据

//级联选择器
      props: {
        // expandTrigger:'hover', //hover 触发子菜单，取消后变成click点击
        emitPath: false,
        lazy: true,
        lazyLoad: this.lazyLoad,
        value: "id",
        label: "name",
        leaf: "leaf"
      },

获取数据

 //获取级联选择数据
    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); //赋值到选择下拉框上面
        });
      }
      if (level === 1) {
        var id = "";
        id = node.data.value;
        console.log(id);
        getfileds(id).then((res) => {  //获取第一级选择的id,来查询第二级的数据
          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; //获取第二级选择的id,来查询第三级的数
        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;
             //下面这句代码表示最后一级取消箭头，同时把选择的值赋值到选择器上面
            item.leaf = level >= 2;
          });
          resolve(result);
        });
      }
    },

即可在级联选择器上面显示出三级的数据

好了，级联选择器的数据已经全部展示出来了，之后进行数据绑定就结束了。。。