vue---element级联选择懒加载

75 阅读1分钟

image.png

这样的效果,代码开干,目前就这样,没碰到什么bug,先会用,再解决bug,网上碰到change不生效的问题,我之前也碰到过,但是这个却没有不生效

  <el-cascader 
  :props="CascaderProps"
  @change.native="handleCascaderChange"
  v-model="sectionData.selectValue" />
  
  
  //创建对象
  const CascaderProps = ref({});
  
  //页面挂载就赋值
  
  onMounted(() => {
  CascaderProps.value = {
    lazy: true,
    lazyLoad(node, resolve) {
      const { level } = node;
      let nodes = [];
      let sectionData = newVal.sectionChildren ?? [];
      if (level == 0) {
        nodes = 初始数组.map((item) => ({
          value: item.value,
          label: item.name,
          leaf: item.value == "7",
        }));
        resolve(nodes);
      } else {
        sectionApi('参数')
          .then((res) => {
            node.loading = false;
            if (res.code === 200) {
                // 存在下级节点,处理下级节点数据
                nodes = res.data.map((item) => ({
                  value: item.value,
                  label: item.name,
                  leaf: true,
                }));
                resolve(nodes);
              } else {
                resolve([]);
              }
          })
          .catch((error) => {
            node.loading = false;
            resolve([]); // 处理错误时返回空数组或处理错误逻辑
          });
      }
    },
  };
});
  
  //选择叶子节点的逻辑
  const handleCascaderChange = (pathValues) => {
  if (pathValues) {
  }
};