亲宝软件园·资讯

展开

详解el Cascader懒加载数据回显示例

唐诗 人气:0

正文

<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>
// 假设是异步获取 处理好的数据
let data = [
  {
    value: 'a',
    label: 'a节点',
    leaf: false,
    children: [
      {
        value: 'b',
        label: 'a的子节点b',
        leaf: true,
        children: []
      }
    ]
  }
];

加载全部内容

相关教程
猜你喜欢
用户评论