详解el Cascader懒加载数据回显示例
作者：唐诗
这篇文章主要为大家介绍了详解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懒加载数据回显的资料请关注脚本之家其它相关文章！