当地区数据比较多时,全部获取数据速度太慢,体验不太好,改为懒加载,一级一级选择地区就能很好避免速度慢的问题。首次加载第一级数据,给出所需要的参数,因为首次加载 node.value 没有值,据此判断是不是第一级数据。当点击最后一级的时候 label 后面不会转圈圈,并把相关值赋值到选择器上。编辑弹窗展示的时候,有时候并不能正确回显,取消展示或者改变 key 值。依次类推,拿到全部层级的 code 和 name 传给后端接收使用。获取倒数第二级的数据的 name。获取倒数第三级的数据的 name。
上代码
<el-cascader
v-if="showCascader"
class="form-item-cascader"
:key="resetCascader"
ref="myCascader"
v-model="ruleForm.area"
placeholder="请选择地区"
:props="optionProps"
clearable
@change="handleChange"
></el-cascader>
optionProps: {
value: 'code',
label: 'name',
children: 'areaList',
emitPath: true,
lazy: true,
lazyLoad: (node, resolve)=> {
const { level, value } = node; // 获取当前node对象中的level, value属性
this.getArea(level, value, resolve)
}
},
resetCascader: 0,
// 编辑弹窗回显数据
addAndEdit(row) {
// 改变 key 值,组件重新渲染,实现数据回显
this.resetCascader++
// 组件隐藏,重新渲染,实现数据回显
// this.showCascader = false
// setTimeout(() => {
// this.showCascader = true
// }, 1);
if(row) {
this.dialogForm = row
this.dialogForm.area = []
this.dialogForm.area.push(row.cityCode, row.areaCode, row.streetCode, row.villageCode)
}
},
getArea(level, value, resolve) {
let vm = this;
let url = "/area/v2/find-parent-list";
const data = {}
data.parentId = value ? value : 410000000000
vm.common.getdata(vm, url, data, function(res) {
const nodes = res.data
// level == 3 我这里是四级联动,在最后一级不需要下一级,层级从 0 开始
if (level == 3) {
nodes.forEach(item => {
// 当点击最后一级的时候 label 后面不会转圈圈 并把相关值赋值到选择器上
item.leaf = level >= 1
})
}
resolve(nodes)
})
},
handleChange(value) {
if (value && value[0] && value[1] && value[2] && value[3]) {
this.ruleForm.cityCode = value[0]
this.ruleForm.areaCode = value[1]
this.ruleForm.streetCode = value[2]
this.ruleForm.villageCode = value[3]
const Nodes = this.$refs.myCascader.getCheckedNodes()[0]
this.ruleForm.cityName = Nodes.parent.parent.parent.label
this.ruleForm.areaName = Nodes.parent.parent.label
this.ruleForm.streetName = Nodes.parent.label
this.ruleForm.villageName = Nodes.label
}
},
注意点
1、showCascader 和 resetCascader 都是做编辑回显用的。
编辑弹窗展示的时候,有时候并不能正确回显,取消展示或者改变 key 值重新渲染级联选择器的⽅法都是有效的。
2、optionProps lazy 及 lazyLoad 是设置懒加载的。
当地区数据比较多时,全部获取数据速度太慢,体验不太好,改为懒加载,一级一级选择地区就能很好避免速度慢的问题。
3、data.parentId = value ? value : 410000000000
首次加载第一级数据,给出所需要的参数,因为首次加载 node.value 没有值,据此判断是不是第一级数据。
4、item.leaf = level >= 1
当点击最后一级的时候 label 后面不会转圈圈,并把相关值赋值到选择器上。
5、@change="handleChange"
change 事件获取选中值,但是只能获取到 code 并不能拿到 name 值
this.$refs.myCascader.getCheckedNodes()[0].label
parent.label
parent.parent.label
依次类推,拿到全部层级的 code 和 name 传给后端接收使用。