记录一次vue+element 级联动态加载、编辑回显

    之前写过的，忽然就想不起来了，这次写了记录一下，省的再忘了。

    element Cascader 级联选择器 具体属性可以查看官网https://element.eleme.cn/#/zh-CN/component/cascader，我只说一下options 和 props。options 在非动态渲染的时候可以把级联的所有数据放进去就好，贴一段老大写的递归方法：

@Override
public JSONArray buildTree() {
    var menus = this.queryMenuList();
    var tree = new JSONArray();
    var roots = menus.stream().filter(m -> m.getLayer() == 0)
        .collect(Collectors.toList());
    // 处理第一层
    for (var root : roots) {
        var r = buildNode(root);
        buildBranch(menus, r);
        tree.add(r);
    }
    return tree;
}

private void buildBranch(List menus, JSONObject r) {
    var parentId = r.getLong("id");
    // 分支数据
    var branchs = menus.stream().filter(b -> parentId.equals(b.getPid()))
        .collect(Collectors.toList());
    var children = new JSONArray();
    for (var branch : branchs) {
        var b = buildNode(branch);
        buildBranch(menus, b);
        children.add(b);
    }
    if (children.size() > 0) {
        r.put("children", children);
    }
}

buildNode方法只是节点数据的重新赋值

props 这个属性可以对options 中的数据做些变化，而不需要你对查出的原始数据做修改，例如：

options: [{ 
  code: 'zhinan',
  name: '指南',
  children: [{
    code: 'shejiyuanze', 
    name: '设计原则'
  }] 
}],

props: {
  value: 'code',  // code 是options中的code
  label: 'name', // name 是options中的name
  children: 'children', // children是options中的children
  // expandTrigger: 'hover', // 触发方式 默认是click
  lazy: true, // 懒加载
  lazyLoad: this.lazyLoad
},

下面说下动态加载，动态加载主要就是这两个：

lazy: true,  lazyLoad: this.lazyLoad

props 是在data() 中，this.lazyLoad方法在methods中

methods: {
  lazyLoad (node, resolve) {
    const { value, level } = node;
    setTimeout(() => {
      this.get("/api/zxrs/t/bas-ch-region/query-list", {q: {'pcode': value ? value : 0}, page: 1, limit: 50}).then(d => {
        for (let i in d.data) {
          d.data[i].children = []
          d.data[i].leaf = level >= 3
        }
        const nodes = d.data
        // 通过调用resolve将子节点数据返回，通知组件数据加载完成
        resolve(nodes);
      })
    }, 100);
  }
}

动态加载其实是不需要options的，所有数据都是lazyLoad方法查询出来的，这样回显也方便。

保存时可以这样转成String：

this.enterpriseForm.cascade_address = new Array(this.enterpriseForm.cascade_address).toString()

编辑时将查询的数据再变成数组：

this.enterpriseForm.cascade_address = this.enterpriseForm.cascade_address.split(",")

级联选择器是这样的：

打印cascade_address是类似这样的：

(4) ["530000000000", "530100000000", "530103000000", "530103004000", __ob__: Observer]

只要返回的数组和你保存时的一致，就可以回显了。

定义ref="casAddress"是为了保存数据是获取label存名称的：

let checkedNodes = this.$refs['casAddress'].getCheckedNodes()
if (checkedNodes) {
  this.enterpriseForm.province = checkedNodes[0].pathLabels[0]
  this.enterpriseForm.city = checkedNodes[0].pathLabels[1]
  this.enterpriseForm.county = checkedNodes[0].pathLabels[2]
  this.enterpriseForm.town = checkedNodes[0].pathLabels[3]
}

OK，就这样了。希望你也弄的顺利。