正文
- 数据回显时保证
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
当参数进行传递,获取到玩这个数据后再进行调用。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。