elementui实现级联

一、要实现的交互有两种，分别需要两种方法实现（PS: 感觉应该还有别的实现方法，欢迎大佬们给出建议）

1、三级级联单选

思考：此时可以采用级联获取接口方式实现（每点一个节点，再调用下一级节点数据接口展示）官方需要以下格式，则在级联调用接口时拼成以下格式即可。

代码：

<el-cascaderref="tree":value="optionsValue":options="options":props="{ checkStrictly: true }"placeholder="区域 / 楼栋 / 设备号"@visible-change="visibleChange"@change="handleSearch"@expand-change="expandChange"collapse-tagsclearable>
</el-cascader>

let isHaveCityLs = false //是否有城市数据
let historyArrBuildingLs = [] //楼栋数据
let isHaveBuildingLs = false //是否有楼栋数据
let historyArrDeviceLs = [] //设备数据
let isHaveDeviceLs = false //是否有设备数据
export default {data () {return {optionsValue: '',options: []}},methods: {//第一级级联下拉点击事件visibleChange(e) {let _this = this;   if(e===true){if(!isHaveCityLs){let param = {}   //获取接口_this.api.getCityLs(param).then(res => {// console.log('res:', res)if(res){res.map((item, index)=>{_this.options.push({value: item.id,label: item.name,children: []})})}console.log('_this.options1:', _this.options)isHaveCityLs = true; //防止重复push城市数据})}}else{// elDialogBuildingLs = false// _this.options = []// // 清空选中的节点// _this.$refs.tree.$refs.panel.clearCheckedNodes(); // // 设置为空可以让节点不高亮显示// _this.$refs.tree.$refs.panel.activePath = []; }},//点节点事件expandChange(e) {let _this = this;console.log(e)//获取楼栋列表if(e.length === 1 ){for(let item in historyArrBuildingLs){if(historyArrBuildingLs[item] === e[0]){console.log('有')isHaveBuildingLs = true; //已经添加过该节点break;}else{isHaveBuildingLs = false;}}if(!isHaveBuildingLs){historyArrBuildingLs.push(e[0]);}console.log('historyArrBuildingLs:',historyArrBuildingLs)if(!isHaveBuildingLs){let param = {city_list: [e[0]]}_this.api.getBuildingLs(param).then(res => {if(res){res.map((item, index)=>{_this.options.map((itema, indexa)=>{if(itema.value === e[0]){itema.children.push({value: item.id,label: item.name,children: []})}})})}})}}//获取设备列表if(e.length === 2 ){ for(let item in historyArrDeviceLs){if(historyArrDeviceLs[item] === e[1]){console.log('有')isHaveDeviceLs = true; //已经添加过该节点break;}else{isHaveDeviceLs = false;}}if(!isHaveDeviceLs){historyArrDeviceLs.push(e[1]);}if(!isHaveDeviceLs){let param2 = {building_list: [e[1]]}_this.api.getDeviceLs(param2).then(res => {console.log('res:', res)if(res && res.results){res.results.map((item,index)=>{_this.options.map((itema, indexa)=>{if(itema.value === e[0]){itema.children.map((itemb, indexb)=>{if(itemb.value === e[1]){console.log('itemb:', itemb)itemb.children.push({value: item.id,label: item.name})}})}})})}})}}console.log('_this.options2:', _this.options)},}
}

2、三级级联多选

思考：!!!经过试验，在采用如上单选的每级调接口再展示数据拼接(三级联动)，会使options数据结构发生改变，从而使已选项发生错乱。!!!
解决方案就是，options直接赋值三级所有数据
PS: 这里不懂是不是只能直接用后端传来或自己拼成完整的数据结构才行了

代码：

<el-cascaderref="tree":value="optionsValue":options="options":props="props"placeholder="区域 / 楼栋 / 设备号"@change="handleSearch"collapse-tagsclearable>
</el-cascader>

//获取后端接口直接是以上options所用格式，直接赋值options即可
methods: {getAreaInit() {let _this = this;let param = {}_this.api.getTierData(param).then(res => {console.log('getTierData:', res)if(res){_this.options = res;}})}
}

二、总结

1、使用elemenui实现多级联动单选，可采用前端调每级接口再展示数据进行拼接（多级联调），但若想实现多级联动多选，则只能一开始就拼全所用数据。因为当你多选时，再次触发会使options构造发生改变，从而影响已选项。

elementui实现级联相关推荐

elementUI中级联选择器的使用
项目中经常有遇到级联选择的问题,于是总结一下使用方法这边可以看到当选择完之后会以一个数组的形式保存在form中,但是,其实我们只需要数组的最后一位. 发现可以正常显示,注意此处classifyId的 ...
element-ui cascader 级联选择器存最后一级id及回显
:props="{emitPath:false}" 加上这行就可以,只存最后一级id,且以最后一级id完整回显. <el-cascader expand-trigger=&q ...
Element-UI中Cascader 级联选择器使用
Element-UI的级联组件官方文档 <el-cascaderv-model="value":options="options":props=" ...
解决在IView的对话框中使用ElementUI的多选级联组件el-cascader出现的问题
解决在IView的对话框中使用ElementUI的多选级联组件el-cascader出现的问题由于IView的级联组件不支持多选,所以需要采用ElementUI的级联组件问题:下拉选项随机性消失, ...
python使用json实现树结构_js怎样将获取json转换为树形结构
最近elementUI的级联选择器要用到根据国内外方案做了一个我需要的! https://jsfiddle.net/stywell/... var list = [ { "ID" ...
jupyter 服务器显示不完全,Jupyter中显示DataFrame的行显示不完全
vue + element-ui 的级联选择器 el-cascader 样式不显示 vue + element-ui 的级联选择器 el-cascader 样式不显示使用 vue + element ...
vue电商后台管理系统--订单管理篇
渲染订单table表格 <el-table :data="orderList" border stripe><el-ta ...
vue 城市选择器（省市区）的使用 element-china-area-data
一.Element UI 中国省市区级联数据本文参考:Element UI 中国省市区级联数据本文参考:根据此文做的整理 1. 安装 npm install element-china-area- ...
Bootstrap5使用bootstrapValidator完成表单验证（包括解决样式、图标不显示及其他组件表单验证出问题解决方案）
以下都为个人实践. CND引入bootstrap5及bootstrapValidator文件 bootstrap5 <link href="https://cdn.jsdelivr.n ...

elementui实现级联

elementui实现级联相关推荐

最新文章

热门文章