级联选择器懒加载+值回显

最新推荐文章于 2024-03-11 23:45:00 发布

青沐-

最新推荐文章于 2024-03-11 23:45:00 发布

阅读量483

点赞数 9

文章标签： vue.js 前端 elementui

本文链接：https://blog.csdn.net/weixin_48295815/article/details/135701674

版权

效果如下图在这里插入图片描述
页面代码如图：

<el-cascader
   v-model="cascaderValue"
   :props="props"
   style="width: 400px"
 ></el-cascader>
 data(){
   return{
     props: {
        lazy: true,
        lazyLoad: this.getBackup,
      },
   }
 },
 methods:{
   // 获取级联选择器的数据
    getBackup(node, resolve) {
      let _self = this;
      const { level, value } = node;
      switch (level) {
        case 0:
        // 第一级数据
          historicalBackup().then((res) => {
            let nodeArr = res.data.chinese.map((item) => ({
              label: item,
              value: res.data[item],
            }));
            _self.backupList = nodeArr;
            resolve(nodeArr);
          });
          break;
        case 1:
         // 第二级数据
          historicalBackupTable(value).then((res) => {
            let nodeArr = res.data.map((item) => ({
              label: item,
              value: item,
              leaf: true,//最后一级返回true
            }));
            resolve(nodeArr);
          });
          break;
        default:
          resolve([]);
          break;
      }
      // 值回显
      this.cascaderValue = JSON.parse(sessionStorage.getItem("cascaderValue"));
    }
 }