前端地区树形控件-实现懒加载及回显按需加载

javascript 复制代码
const ProvinceCascader = (props) => {
  const dispatch = useDispatch();
  const type = props?.type || 'area';
  const areaList = useSelector((state) => state.utils.areaList);

  const [options, setOptions] = useState();
  const [echoValue, setEchoValue] = useState();
  const [statusUse, setStatusUse] = useState('echo');

  useEffect(async () => {
    if (Array.isArray(props.value) && statusUse == 'echo') {
      // 数据回显
      if (props.id && props.id.split('_')[0] !== 'serviceSites') {
        //服务超市错误数据
        dispatch({
          type: 'utils/clearAreaList', //清空仓库缓存
        });
        await echoLoadData(props.value);
        setEchoValue(props.value);
      }
    } else if (!props.value) {
      // 新增时下拉
      dispatch({
        type: 'utils/clearAreaList', //清空仓库缓存
      });
      if (type == 'area' && !props.value) {
        //默认成都市开始选择
        loadData(531531);
      } else if (type == 'nationwide' && !props.value) {
        //全国开始选择
        loadData(0);
      }
    }
  }, [props.value]);

  useEffect(() => {
    if (areaList) {
      setOptions(areaList);
    }
  }, [areaList]);

  const onChange = (e) => {
    if (e == undefined) {
      setEchoValue(undefined);
    }
    setStatusUse('onChange');
    setEchoValue(e);
    loadData(e[e.length - 1]); //选中区域id
    props.onChange(e);
  };

  const loadData = async (areaId) => {
    await dispatch({
      type: 'utils/getAreaList',
      payload: {
        parentId: areaId,
      },
    });
    return true;
  };

  const echoLoadData = async (areaIds) => {
    await dispatch({
      type: 'utils/getEchoAreaList',
      payload: areaIds,
    });
    return true;
  };

  return (
    <Cascader
      fieldNames={{
        label: 'name',
        value: 'id',
        children: 'children',
      }}
      value={echoValue}
      options={options}
      onChange={onChange}
      changeOnSelect
      disabled={props.disabled}
      allowClear
    />
  );
};

export default ProvinceCascader;
相关推荐
爱吃土豆的马铃薯ㅤㅤㅤㅤㅤㅤㅤㅤㅤ3 分钟前
如何使用Java WebSocket API实现客户端和服务器端的通信?
java·开发语言·websocket
Shartin8 分钟前
Can201-Introduction to Networking: Application Layer应用层
服务器·开发语言·php
彤银浦37 分钟前
Web学习笔记3
前端·笔记·学习·html5
江城开朗的豌豆42 分钟前
退出登录后头像还在?这个缓存问题坑过多少前端!
前端·javascript·vue.js
江城开朗的豌豆1 小时前
Vue的'读心术':它怎么知道数据偷偷变了?
前端·javascript·vue.js
共享家95271 小时前
linux_线程概念
linux·开发语言·jvm
江城开朗的豌豆1 小时前
手把手教你造一个自己的v-model:原来双向绑定这么简单!
前端·javascript·vue.js
apihz1 小时前
VM虚拟机全版本网盘+免费本地网络穿透端口映射实时同步动态家庭IP教程
android·服务器·开发语言·网络·数据库·网络协议·tcp/ip
我在北京coding1 小时前
el-tree 懒加载 loadNode
前端·vue.js·elementui
江城开朗的豌豆1 小时前
v-for中key值的作用:为什么我总被要求加这个'没用的'属性?
前端·javascript·vue.js