需求描述【省市区三级联动】
组件:Cascader 级联选择器
后端需要所选中的地区的名字,如:['北京市', '北京市', '东城区']
获取后端省市区具体列表的接口返回数据:
// 省 - 参数1[{value: 1,label: '北京市'},...]// 市 - 参数2[{value: 1,label: '北京市'},...]// 区 - 参数3[{value: 1,label: '东城区'},...]
因 element-ui 级联选择器 Cascader 有可以直接获取指定字段的属性,所以直接使用
{value: this.label}
一般情况下都没有问题,偶然发现当省市区有名字一样时出现没有值选中的情况,如:['北京市', '北京市', '东城区']
发现接口也有点问题
组件的回调级别 level 在相同内容的情况下,返回的一直是最上层的节点,猜想可能是 level 的判断的问题,于是只能找源码了
经常不断打断点终于找到的原因所在
问题原因:查找节点的方法,不管当前找到了几个节点,都会只返回第一个节点,然后第一个节点肯定是在最前面的所以级别最高 level 是1,这个应该是一个问题,还得想下怎么才能解决自己的问题// cascader-panel/src/store.jsgetNodeByValue(value) {if (value) {const nodes = this.getFlattedNodes(false, !this.config.lazy).filter(node => (valueEquals(node.path, value) || node.value === value));return nodes && nodes.length ? nodes[0] : null;}return null;}
既然组件是必须唯一找到才能正常,那我只能设置一个唯一的值了,把层级【级别】也加到里面去,这样就能显示唯一的,最后返回出来时再把层级【级别】去掉就好了
> 本来是想用 computed 做转换的,结果发现转换有问题,只能用 watch 了,感觉 watch 性能可能会不大好,自己一般情况下能用 computed 解决的绝不用 watch 的 组件实现代码:
> 显示的值还是 label
> 比对的值是 value, 确定唯一的值
> 返回到父组件的值要做对应的去格式化处理
<template><div class="the-city-cascader"><el-cascader class="city-cascader" :separator="separator" v-on="$listeners" v-bind="$attrs" v-model="innerValue" :options="cityOptions" :props="cascaderProps" @change="changeHandle"></el-cascader></div></template><script>export default {name: 'the-city-cascader',props: {value: {type: [Array, String],default: () => []},expandTrigger: {type: String,default: 'click'},/*** value 传出的字段组*/valueKey: {type: String,default: 'value',},separator: {type: String,default: ' / ',},},data() {return {cityOptions: [],innerValue: [],isLazy: true,};},computed: {cascaderProps() {return {expandTrigger: this.expandTrigger,value: this.valueKey,lazy: true,lazyLoad: async (node, resolve) => {const { data, level } = nodelet nodes = []const findLevel = level + 1if (level === 0) {nodes = await this.initCityList(findLevel)} else {nodes = await this.initCityList(findLevel, data.code)}nodes.forEach(item => {if (findLevel < 3) {item.leaf = false} else {item.leaf = true}})// 通过调用resolve将子节点数据返回,通知组件数据加载完成resolve(nodes)}}},},created() {this.innerValue = this.value.map((item, itemI) => `${itemI + 1}-${item}`)},methods: {/*** 省1市2区3*/async initCityList(flag, areaId = 0) {const params = { flag, areaId }let result = []try {const { data, status } = await this.axios.get(this.$API.cascaderCity, { params })if (status === 200) {result = (data.result || []).map(item => ({// 显示的值label: item.label,// 值的idvalue: `${flag}-${item.label}`,// 接口参数的值code: item.value,}))}} catch (error) {console.error(error)}return result},changeHandle(val) {const list = val.map(item => {const splitList = item.split('-')if (splitList.length > 0) {return splitList[1]} else {return splitList[0]}})this.$emit('input', list)}}}</script><style lang="scss" scoped="">.the-city-cascader {width: 100%;.city-cascader {width: 100%;}}</style>