目录1. 分析问题2. 解决问题1. 分析问题 【问题描述】 使用 ElementUI 的 Cascader 级联选择器组件,如果使用了懒加载和动态加载数据会导致,在v-model中
【问题描述】 使用 ElementUI 的 Cascader 级联选择器组件,如果使用了懒加载和动态加载数据会导致,在v-model
中的数据据重新放到 Cascader 级联组建后,会出现数据不回显的问题。 【原因分析】 在级联组件中虽然在v-model
中重新传入选中的数据,但采用了懒加载+远程数据的方式构建选项数据,此时级联组件的结构数据并未生成,此时仅有选中后的数据而没有选项数据,因此导致了级联选择器没有数据可供显示,也就导致了数据不回显的问题。 【解决方案】 ① 前端渲染完整的选项数据,此方案需要前端渲染的数据量极大,可能导致页面崩溃,不建议采用此方式处理; ② 仅渲染选中后的数据,即仅构建选中后的选项结构,后端返回的数据结构进行处理后依然可以配合懒加载+远程数据的方式(需要对渲染生成的数据进行去重,避免和远程访问的数据重复)
借助Cascader 级联选择器组件的options
属性,构建选项结构配合v-model
即可实现数据回显,如果想配合懒加载+远程数据,需要指定级联组件的属性信息。
{
"label": "浙江省",
"value": 12321
"children": [{
"label": "杭州市",
"value": 4565
}]
}
【实现方式】
<el-cascader
v-model='data'
:props='cascadeProps'
:options='cascadeOptions'
filterable
></el-cascader>
cascadeProps: {
multiple: true,
checkStrictly: true,
// 启用懒加载
lazy: true,
// 远程数据访问
lazyLoad: async (node, resolve) => {
const { data, level} = node
const parentCode = level === 0 ? '000' : data.nodeCode
const nodes = await this.getRemoteData(parentCode, level)
// 去除重复节点
let nodeFilter = nodes.filter(n => {
if (!this.optionList.includes(n.value)) {
return n
}
})
resolve(nodeFilter)
},
},
getRemoteData(parentCode, level) {
return new Promise((resolve, reject) => {
getDistrictData({ parentCode }).then((res) => {
resolve(this.fORMatData(res.data, level))
})
})
},
formatData(data, level) {
let districtType = ''
switch (level) {
case 0:
districtType = 'province'
break
case 1:
districtType = 'city'
break
case 2:
districtType = 'district'
break
default:
break
}
return data.map((item) => {
return {
districtType,
nodeCode: item.nodeCode,
value: item.districtId,
label: item.name,
leaf: level >= 2,
}
})
},
到此这篇关于ElementUI级联选择器回显问题解决的文章就介绍到这了,更多相关ElementUI选择器内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!
--结束END--
本文标题: vue ElementUI级联选择器回显问题解决
本文链接: https://www.lsjlt.com/news/167561.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0