省级联动处理回显问题

曾经终败给现在 2024-03-26 10:34 73阅读 0赞

**问题： 省市区 三级联动， 只有俩级联动，页面刷新，数据回显失效**

解决方案： 源码，可以发现只需要传入Object数据即可，如：this.$refs.xxx.panel.lazyLoad(val)。

![249c80c6b45ade1d29985a5870deeb2f.png][]

// 省市区三级联动
          addressProps: {
            label: 'dictName',
            value: 'dictName',
            lazy: true,
            lazyLoad(node, resolve) {
              const {
                level
              } = node
              // 3级节点不再继续加载，直接作为叶子
              if (level == 3) {
                node.leaf = 'leaf'
                resolve()
              }
              // 0级代表初始化
              if (level == 0) {
                self.searchAddress({
                  code: '1001'
                }).then((res) => {
                  resolve(res)
                })
              } else {
                self.searchAddress({
                  pid: node.data.id
                }).then((res) => {
                  // 如果1级节点或2级节点查询后无查询后无数据，证明是叶子节点
                  if (!res) {
                    node.leaf = 'leaf'
                    resolve()
                    // 如果是2级节点，子节点是叶子节点
                  } else if (level == 2) {
                    res.forEach((item) => {
                      item.leaf = 'leaf'
                    })
                  }
                  resolve(res)
                }).finally(() => {
                  self.$refs.cascader.computePresentText();
                  self.$refs.cascader1.computePresentText();
                  self.$refs.cascader2.computePresentText();
                  const $el = document.querySelectorAll('.el-cascader-panel .el-cascader-node[aria-owns]'); 
                  Array.from($el).map(item => item.removeAttribute("aria-owns"));
                })
              }
            }
          },

**或者**

<template>
      <div id="app">
        <el-cascader v-model="current":props="props"ref="cascader"></el-cascader>
      </div>
    </template>
     
    <script>
    let id = 0;
    let list = [
      {
        value: '0',
      }, {
        value: '1',
      }, {
        value: '2',
      }, {
        value: '3',
      },
    ]
    export default{
      name: 'App',
      data() {
        return{
          current: [],
          props: {
            lazy: true,
            lazyLoad(node, resolve) {
              const {level} = node;
     
              functionf() {
                list = list.map((item, i) => ({
                  label: level ? `${node.value}-${i}` : item.value,
                  value: level ? `${node.value}-${i}` : item.value,
                  leaf: item.value === '2'&& level === 0 ? true: `${node.value}-${i}` === '3-2'? true: level >= 2
                }))
                resolve(list)
              }
     
              if(level > 0) {
                setTimeout(() => {
                  f()
                  node.func && node.func(node)
                }, 1000)
                return
              }
              f()
            }
          }
        };
      },
      mounted() {
        this.current = ['1', '1-3', '1-3-0']
        // this.current = ['3', '3-2']
        // this.current = ['2']
        // this.current = ['0', '0-2', '0-2-3']
        for(let item of this.$refs.cascader.panel.menus[0]) {
          if(item.value === this.current[0]) {
            this.loadItem(item)
            return
          }
        }
      },
      methods: {
        handleItem(val) {
          if(val && val instanceofObject) {
            this.loadItem(val)
          }
        },
     
        loadItem(val) {
          val.func = this.waitItemExecution
          this.$refs.cascader.panel.lazyLoad(val)
        },
     
        waitItemExecution(val) {
          for(let item of val.children) {
            if(this.current[val.level] === item.value) {
              this.handleItem(item)
              break
            }
          }
          this.$refs.cascader.panel.handleExpand(val)
          this.$refs.cascader.computePresentText()
        },
      }
    }
    </script>

[249c80c6b45ade1d29985a5870deeb2f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/a7e06b0470224696b7289e0b7f76c76f.png