el-Cascader懒加载数据回显

3,629 阅读1分钟
  • 数据回显时保证 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当参数进行传递,获取到玩这个数据后再进行调用。