Element UI 使用el-cascader级联选择器懒加载数据回显解决方案
Element UI 使用el-cascader级联选择器懒加载数据回显解决方案
·
Element UI 使用el-cascader级联选择器懒加载数据回显解决方案
问题分析
1.通过获取后台已选中省市区id数组['id1','id2','id3']数据,把已选中id省市区名称回显示到级联选择器,不能回显出来
解决方案
通过给el-cascader设置key属性,通过key值变化重新渲染el-cascader
[**网上大多都是这种方案**](https://blog.csdn.net/weixin_46857582/article/details/107125222)
<el-cascader
ref="cascader"
:props="props"
:key="key"// 设key属性让组件重新渲染,重新赋值values实现回显
v-model="values"
></el-cascader>
<script>
let id = 0;
export default {
data() {
return {
keys: 0,
props: {
lazy: true,
lazyLoad (node, resolve) {
const { level } = node;
setTimeout(() => {
const nodes = Array.from({ length: level + 1 })
.map(item => ({
value: ++id,
label: `选项${id}`,
leaf: level >= 2
}));
// 通过调用resolve将子节点数据返回,通知组件数据加载完成
resolve(nodes);
}, 1000);
}
}
};
}
},
method() {
handle() {
// 方案
this.keys++
}
}
</script>
更多推荐
已为社区贡献1条内容
所有评论(0)