avue 选择器（Select）因数据量大导致渲染慢、页面卡顿的问题

首次接触avue , 感触就是 : 哇文档一系列简陋风 .(吐血ing)

原状况

已知 : avue-curd内置按钮and内置弹窗 弹窗中有3个下拉框 单个数据量一万+ 点击新增按钮 ➩ 弹窗4-5s后弹出 ➩ 页面卡顿 ➩ 勾选数据 => 页面崩溃- _ - || over~

经排查 : 执行顺序是 : 初始化数据 ➩ 全部赋值给下拉框后 ➩ 执行弹出操作 数据量过大 , 渲染慢导致页面卡顿 . 甚至页面崩溃

解决思路

思路 A

• 由于文档过于简单,计划使用插槽更改下拉框执行顺序
• 初始化数据 ➩ 实现点击下拉框 ➩ 选项数据赋值 结果
• 通过配置 , 实现更改了执行顺序
• 但仍未能解决页面卡顿 , 渲染过慢的问题

思路 B

• 选择器使用懒加载
• 点击下拉框 ➩ 请求并渲染父级 ➩ 点击父级 ➩ 请求并渲染子集 ( 以下雷同 )

结果

• 效果显著 , 弹窗秒出 , 渲染速度快 , 页面不卡顿 , 勾选正常

此处上码🤭

 {
    label: "所属区域",
    prop: "areaName",
    multiple: true,
    type: "tree",
    loading:true,
    dicData: [],
    checkStrictly: true,
    props: {
      label: "name",
      value: "id",
      children: "children",
    },
    lazy: true,
    treeLoad: function (node, resolve) {
    // 父级 parentId = 0
      const parentId = node.level === 0 ? 0 : node.data.id;
      //请求接口
      getSysRegionTree(parentId).then((res) => {
        resolve(
          res.data.data.map((item) => {
            return {
              ...item,
              leaf: !item.hasChildren,
            };
          })
        );
      });
    },
    rules: [
      {
        required: true,
        message: "请选择所属区域",
        trigger: "click",
      },
    ],
 },