vue:vue无限极分类\连级选择器动态加载

这是官网的示例

<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>

 这可能对于刚使用vue的人来说不是太友好，因为他们不知道怎么调用后台接口

可以这样调用后台接口

 sprops: {
          lazy: true,
          lazyLoad(node, resolve) {
            const { value } = node
            getCategoryList({ one_p: value || null }).then((res) => {
              console.log(value)
              const nodes = res.data.map((x) => ({
                value: x.id,
                label: x.category_name,
                leaf: x.leaf,
              }))
              resolve(nodes)
            })
          },

 getCategoryList---是我定义的一个获取分类的接口

import request from '@/utils/request'
//获取测试数据---文章分类
export function getCategoryList(params) {
  return request({
    url: '/system/article/index',
    method: 'get',
    params,
  })
}