详解elCascader懒加载数据回显示例
短信预约 -IT技能 免费直播动态提醒
正文
- 数据回显时保证
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懒加载数据回显的资料请关注编程网其它相关文章！
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
