详解el Cascader懒加载数据回显示例
更新时间：2022年11月07日 10:35:10 作者：唐诗
这篇文章主要为大家介绍了详解el Cascader懒加载数据回显示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
正文
- 数据回显时保证
v-model props options绑定的数据是正确的。 - 调用
props.lazyLoad方法中的resolve回掉函数设置数据，示例来自el官网。 - 好多例子中说需要设置
options， 但是异步获取子节点，设置它是没有用的。
<el-cascader :props="props"></el-cascader>
<script>
let id = 0
export default {
data() {
return {
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)
}
}
}
}
}
</script>
- el-Cascader 数据回显时需要一份可以完整显示的数据，比如选择的是a节点下的b那就有如下数据格式。
v-model的值为[a, b] lazyLoad方法初始化会加载一次，可以在此判断v-model绑定的值是否为空来确定是否需要回显数据。- 默认子节点是 children 可以通过
props进行更改。
// 假设是异步获取 处理好的数据
let data = [
{
value: 'a',
label: 'a节点',
leaf: false,
children: [
{
value: 'b',
label: 'a的子节点b',
leaf: true,
children: []
}
]
}
];
- 只要通过
props.lazyLoad方法中的resolve回掉函数设置完整可展示的数据,那么就可以实现回显。如上边例子 通过resolve(data)后即可回显[a, b] - 当然有时候，获取子节点数据时是一个异步请求，那么可以把
resolve当参数进行传递，获取到玩这个数据后再进行调用。
以上就是详解el Cascader懒加载数据回显示例的详细内容，更多关于el Cascader懒加载数据回显的资料请关注脚本之家其它相关文章！
相关文章
浅谈vue项目优化之页面的按需加载(vue+webpack)
本篇文章主要介绍了vue项目优化之页面的按需加载(vue+webpack)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-12-12
懒加载就是延时加载,即当需要用到的时候再去加载,本文主要介绍了Vue图片懒加载之Vue-Lazyload的使用,具有一定的参考价值,感兴趣的可以了解一下2024-05-05
这篇文章主要介绍了vue中router-link标签所必备了解的属性，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-04-04
这篇文章主要介绍了vue + elementUI实现省市县三级联动的方法示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-10-10
这篇文章主要介绍了Vue中的混入的使用(vue mixins)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-06-06
本篇文章主要介绍了Vue 开发模式下跨域问题，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-06-06
这篇文章主要为大家介绍了buildAdmin开源项目引入四种图标方式详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-02-02
这篇文章主要介绍了Vue中导入excel文件的两种方式,大概有两种导入文件的方法：form表单和el-upload，本文结合示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-12-12
这篇文章主要介绍了浅谈VUE防抖与节流的最佳解决方案，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-05-05
Vue Canvas是一个基于Vue.js的轻量级画板组件,旨在提供一个简易的画布功能,用户可以在网页上进行自由绘图,文中通过代码介绍的非常详细,需要的朋友可以参考下2024-09-09
最新评论