问答

antd的cascader动态加载需要点击两下才会加载子级数据,而且加载

作者:admin 2021-08-03 我要评论

// 第二级 const [guardParams, setGuardarams] = useState([]); const { data: selectSecondData, loading: selectSecondLoading, run: selectSecondRun, error...

在说正事之前,我要推荐一个福利:你还在原价购买阿里云、腾讯云、华为云服务器吗?那太亏啦!来这里,新购、升级、续费都打折,能够为您省60%的钱呢!2核4G企业级云服务器低至69元/年,点击进去看看吧>>>)
  // 第二级
  const [guardParams, setGuardarams] = useState([]);
  const { data: selectSecondData, loading: selectSecondLoading, run: selectSecondRun, error: selectSecondError } = useRequest(selectSecond, {
    manual: true,
    onSuccess: res => {
      setGuardarams(res.data.list);
    },
  });
  if (selectSecondError) {
    message.error(selectSecondError);
  }
  // 第三级
  const [modelParams, setModelarams] = useState([]);
  const { data: selectThirdData, loading: selectThirdLoading, run: selectThirdRun, error: selectThirddError } = useRequest(selectThird, {
    manual: true,
    onSuccess: res => {
      setModelarams(res.data.list);
    },
  });
  if (selectThirddError) {
    message.error(selectThirddError);
  }
  const secondData = selectSecondData?.data.list
  const thirdData = selectThirdData?.data.list
const loadData = (selectedOptions: any) => {
    const targetOption = selectedOptions[selectedOptions.length - 1];
    const id = targetOption.value;
    if(selectedOptions.length === 1) {
      selectSecondRun(id);
      if( secondData !== undefined) {
        targetOption.children = [];
        secondData.forEach((element: any) => {
          targetOption.children.push({
            "value": element.id,
            "label": element.name,
            "isLeaf": false,
          })
        });
        setAppParams(targetOption)
      }else{
        console.log("hahahha")
      }
    } else if(selectedOptions.length === 2) {
      selectThirdRun(id)
      targetOption.children = [];
      if(thirdData !== undefined) {
        thirdData.forEach((element: any) => {
          targetOption.children.push({
            "value": element.id,
            "label": element.name,
            "isLeaf": true,
          })
        });
        setAppParams(targetOption)
      }

    }
  };
###

可以在onChange的function里面进行children的数据新增,在loadData的function做loading效果的处理即可。
下面是部分代码:

options为一级数据。

const [options, setOptions] = useState();
<Cascader
  options={options}
  loadData={loadDataFunc}
  onChange={setVisionsFunc}
  changeOnSelect
/>
const loadDataFunc = selectedOptions => {
    const targetOption = selectedOptions[selectedOptions.length - 1];
    targetOption.loading = true;
    setTimeout(() => {
      targetOption.loading = false;
      setOptions(options);
    }, 100);
  };

const setVisionsFunc = async selectedOptions => {
    if (selectedOptions.length === 1) {
       const options_temp = [...options];
       const res = await 二级数据接口(selectedOptions[0]);
       const children: Array<object> = [];
       res.map(pro => {
          children.push({ label: pro.name, value: pro.code, isLeaf: false });
          return true;
       });
       options_temp.find(_ => _.value === selectedOptions[0])['children'] = children;
       setOptions(options_temp);
    } else if (selectedOptions.length === 2) {
       const apps = await 三级数据接口(selectedOptions[1]);
       const options_temp = [...options];
       const apps = await getDirectoryApp(selectedOptions[1]);
       const children: Array<object> = [];
       apps.map(pro => {
         children.push({ label: pro.name, value: pro.code, isLeaf: true });
         return true;
       });
       const product = options_temp.find(_ => _.value === selectedOptions[0]);
       product.children.find(_ => _.value === selectedOptions[1])['children'] = children;
       setOptions(options_temp);
    }
  };

版权声明:本文转载自网络,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。本站转载出于传播更多优秀技术知识之目的,如有侵权请联系QQ/微信:153890879删除

相关文章
  • antd的cascader动态加载需要点击两下才

    antd的cascader动态加载需要点击两下才

  • “从输入url到页面展现发生了什么?”

    “从输入url到页面展现发生了什么?”

  • git 分支合并错误并且已经多次push操作

    git 分支合并错误并且已经多次push操作

  • 两个不同系统拉取数据如何最大限度提高

    两个不同系统拉取数据如何最大限度提高

腾讯云代理商
海外云服务器