elementUI的级联选择器的v-modle
接受的参数是一个数组,数组中的值是对应树形数组的节点值,但是在真实开发中后端可能只给返回了某一处单一节点,对el-cascader
进行2次封装实现三级联动
import arrayTreeFilter from 'array-tree-filter'
const findPatentValue = (array, value, valueName = 'value', childrenName = 'children') => {
if (!value || !Array.isArray(array)) return []
const result = []
let valid = false
const seek = (array, value) => {
let parentValue = ''
const up = (array, value, lastValue) => {
array.forEach(v => {
const val = v[valueName]
const child = v[childrenName]
if (val === value) {
valid = true
parentValue = lastValue
return
}
if (child && child.length) up(child, value, val)
})
}
up(array, value)
if (parentValue) {
result.unshift(parentValue)
seek(array, parentValue)
}
}
seek(array, value)
return valid ? [...result, value] : []
}
export default {
model: {
prop: 'value',
event: 'change'
},
props: {
value: {
type: String,
default: ''
},
options: {
type: Array,
default() {
return []
}
},
config: {
type: Object,
default() {
return {
value: 'value',
label: 'label',
children: 'children'
}
}
}
},
data() {
return {
result: []
}
},
watch: {
value() {
this.setResult()
},
options() {
this.setResult()
}
},
mounted() {
this.setResult()
},
methods: {
setResult() {
const {config, options, value} = this
const {value: valueName, children: childrenName} = config
this.result = findPatentValue(options, value, valueName, childrenName)
console.log(this.result)
},
areaChange(v = []) {
this.result = v
const value = v[v.length - 1] || ''
this.$emit('change', value)
const {options, config} = this
const {value: valueName, label: labelName} = config
const areas = arrayTreeFilter(options, (item, level) => item[valueName] === v[level])
.map(o => o[labelName])
this.$emit('realChange', v, areas)
},
},
render(createElement) {
const {areaChange, config, result} = this
const {value, label} = config
return createElement('el-cascader', {
props: {
options: this.options,
value: result,
size: 'small',
clearable: true,
placeholder: '请选择',
props: {
value,
label,
checkStrictly: true
}
},
on: {
change: areaChange
}
})
}
}
<ChoiceArea v-model="memberForm.regionCode" :options="areaOptions"
:config="{value: 'code', label: 'name', children: 'children'}"
@realChange="choiceAreaChange"
/>