- 数据回显时保证
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(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
当参数进行传递,获取到玩这个数据后再进行调用。