vue如何实现级联选择器功能
作者：清音啊
这篇文章主要介绍了vue如何实现级联选择器功能问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
vue实现级联选择器功能
vue开发中，通过使用 Element UI 的 el-cascader 组件来实现级联选择器功能
下面是一个示例代码：
演示如何使用 el-cascader 组件初始化级联选择器，并设置默认值为单位 测试1 和部门 测试11
<template>
<div>
<el-cascader
v-model="selectedValues"
:options="options"
:props="props"
@change="handleChange"
placeholder="请选择"
></el-cascader>
</div>
</template><script>
export default {
data() {
return {
// 初始化级联选择器的选中值
selectedValues: [],
// 级联选择器的数据源
options: [
{
value: '1',
label: '测试1',
children: [
{ value: '2', label: '测试11' },
{ value: '3', label: '测试12' }
]
}
],
// 自定义配置，用于指定数据结构中的属性名
props: {
value: 'value',
label: 'label',
children: 'children'
}
};
},
methods: {
// 监听级联选择器值变化事件
handleChange(selectedValues) {
console.log('选中的值：', selectedValues);
}
},
created() {
// 设置初始化选中值为单位 '测试1' 和部门 '测试12'
this.selectedValues = ['1', '3'];
}
};
</script>在这个示例中：
options 数组包含了级联选择器的数据源，其中每个对象表示一个选项，包括 value、label 和 children 属性。
props 对象用于指定数据结构中的属性名，以便 el-cascader 组件正确地解析数据。
通过在 selectedValues 中设置初始选中值为单位 测试1 和部门 测试12，并将其绑定到 el-cascader 组件的 v-model 上，可以在初始化时选中指定的值。
vue级联选择器只传最后一级
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)
},
/*
* 当级联选择器变化时候会触发该事件
* 向父级传递change事件来返回选中的节点id
* 向父级传递realChange事件来返回选中的节点及其所有父节点和选中的所有label的值
* arrayTreeFilter 第三方库用于筛查出选中的节点及其父节点
* */
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"
/>
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。