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); }); } }, 复制代码即可在级联选择器上面显示出三级的数据
好了，级联选择器的数据已经全部展示出来了，之后进行数据绑定就结束了。。。
作者：月__
链接：https://juejin.cn/post/7021077206319398948