element ui级连选择,lazyLoad选择地区-Toy模板网

这篇具有很好参考价值的文章主要介绍了element ui级连选择,lazyLoad选择地区。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

ui文档上直接给了一函数

先试试看效果是什么，加上let id=0;不然会报错

      props: {
          lazy: true,
          lazyLoad (node, resolve) {
            let id = 0;
            const { level } = node;
            setTimeout(() => {
              const nodes = Array.from({ length: level + 1 })//创建一个新数组，数组长度level + 1
                .map(item => ({//然后链式调用 map 为这个新数组每一项填充内容
                  value: ++id,
                  label: `选项${id}`,
                  leaf: level >= 2
                }));
              // 通过调用resolve将子节点数据返回，通知组件数据加载完成
              resolve(nodes);
            }, 1000);
          }
        }

setTimeout模拟的大概是从后端拿到数据的时间
Array.from的作用可以先去搜一下，它返回了一个新的数组
链式调用的map对从后端拿到的数组做了处理，如果你试过普通的级联选择器，就造label和value是ui组件必须的，label是下拉框展示的标签，value就是对应的值。还有一个leaf是boolean，判断是不是级联选择器的最后一截，示例是用>=2判断的。没有leaf:true,级联选择器可以一直选下去。
最后将处理好的数组放在resolve()里面

node

要传的参数怎么拿？看node参数。现在程序不会报错，并且你已经理解了一大半的代码，可以打印node看看是什么，就是点击的这一级的参数。

最后我完成了级联调用的效果文章来源地址https://www.toymoban.com/news/detail-792946.html

lazyLoad(node, resolve) {
          const { level, data } = node //ui组件返回的选中的当前节点
          let parentCode
          if (data) {
            parentCode = data.code
          }
          /**
           * @description: 获取可选地区
           * @param {*} level //0-省 ，1-市，2-区
           * @param {*} parentCode 是取的上一级的code
           * @return {*}
           */
          getLocation({ level, parentCode }) //后端接口
            .then((res) => {
              const result = res.result.map((item) => {
                const { level, name, code } = item // 提取属性
                return {
                  label: name, // 修改属性名
                  value: name, // 修改属性名
                  code,
                  level,
                  leaf: level == 2
                }
              })
              resolve(result)
            })
            .catch((err) => {
              console.warn(err)
            })
        }

到了这里，关于element ui级连选择,lazyLoad选择地区的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！