element-ui中的懒加载级联选择

最新推荐文章于 2024-03-28 18:47:16 发布

_chang.

最新推荐文章于 2024-03-28 18:47:16 发布

阅读量953

点赞数

文章标签： ui vue.js elementui

本文链接：https://blog.csdn.net/m0_66226018/article/details/131469982

版权

<el-cascader
     ref="cascader"
     :options="options"//数据
     //lazy懒加载，lazyLoad是懒加载的方法，checkStrictly单选的按钮
     :props="{lazy:true,lazyLoad:loadOptions, checkStrictly: true }"
     size="small"
     v-model="cascadrValue"
     @change="handleChange"//单选按钮的选择事件
/>

<script>
  export default {
    data() {
      return {
         options:[],
         cascadrValue:"",
         treeIndex:"",
      };
    },
    methods:{
       loadOptions (node, resolve) {
        if (node.level === 0) {
          return resolve(数据列表);
        }
        if (node.level > 9999) return resolve([]);//可以选择到第几层
        // 判断isLoading变量值，避免重复请求和无效请求
        if (!this.isLoading && node.data.id) {
          this.isLoading = true;
          setTimeout(() => {
            const params = {
             //参数
            };
            this.nodeId = node.data.id;
            getTreeDataList(params)
              .then((data) => {
                if (data.result === true) {
                  const items = [];
                  接口的数据.forEach(function (obj) {
                    items.push({
                      label: obj.name,
                      id: obj.id,
                      value: obj.name,
                    });
                  });
                  resolve(items);
                  //调用渲染数据的方法，重新在这块调用
                  this.isLoading = false;
                }
                else {
                  this.$message({
                    type: `warning`,
                    message: `获取信息出错`,
                  });
                }
              })
              .catch(() => {
                this.isLoading = false;
              });
          }, 500);
        }
        else {
          resolve([]);
        }
      },
      handleChange () {
        let nodeObj = [];
        this.$nextTick(() => {
          nodeObj = this.$refs[`cascader`].getCheckedNodes(true);
          console.log(nodeObj,"nodeObj");
          const p = this.treeIndex = nodeObj.map((param) => {
            this.nodeId = 拿id;
            return 这块return也是放id;
          }).join(`,`);
        })
        在这块重新调用那个数据列表渲染的方法
      },
    }
  };
</script>