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