记录一次vue+element 级联动态加载、编辑回显
之前写过的,忽然就想不起来了,这次写了记录一下,省的再忘了。elementCascader 级联选择器 具体属性可以查看官网https://element.eleme.cn/#/zh-CN/component/cascader,我只说一下options 和 props。options 在非动态渲染的时候可以把级联的所有数据放进去就好,贴一段老大写的递归方法:@Overridepublic JSON
之前写过的,忽然就想不起来了,这次写了记录一下,省的再忘了。
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<SysMenu> 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(",")
级联选择器是这样的:
<el-cascader
:options="options"
:props="props"
v-model="enterpriseForm.cascade_address"
ref="casAddress"
@change="handleChange"></el-cascader>
打印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,就这样了。希望你也弄的顺利。
更多推荐
所有评论(0)