(vue)el-cascader级联选择器按勾选的顺序传值,摆脱层级约束
-
需求：按勾选的顺序给后端传值
-
难点：在 Element UI 的 el-cascader 组件中，默认的行为是根据数据的层级结构来显示选项，用户的选择也会基于这种层级结构，el-cascader 本身并不直接支持自定义的显示顺序。
效果：
实现：
// html
<el-cascaderv-model="selectedOptions":options="options":props="props"clearable>
</el-cascader>// js
export default {data(){return {selectedOptions:[],// 绑定的数组sortSelectedOptions:[],// 排好序的数组// props: { multiple: true },// 原始获取到的value是数字，不方便对比props: { multiple: true, value: 'label', label: 'label' },// 指定value值取labeloptions: [{value: 1,label: '东南',children: [{value: 2,label: '上海',children: [{ value: 3, label: '普陀' },{ value: 4, label: '黄埔' },{ value: 5, label: '徐汇' }]}, {value: 7,label: '江苏',children: [{ value: 8, label: '南京' },{ value: 9, label: '苏州' },{ value: 10, label: '无锡' }]}, {value: 12,label: '浙江',children: [{ value: 13, label: '杭州' },{ value: 14, label: '宁波' },{ value: 15, label: '嘉兴' }]}]}, {value: 17,label: '西北',children: [{value: 18,label: '陕西',children: [{ value: 19, label: '西安' },{ value: 20, label: '延安' }]}, {value: 21,label: '新疆维吾尔族自治区',children: [{ value: 22, label: '乌鲁木齐' },{ value: 23, label: '克拉玛依' }]}]}]}}
},
// 监听绑定数组
watch:{selectedOptions: {handler(newVal, oldValue) {if (newVal.length > oldValue.length) {// 找到新增的项const newItems = this.findNewItems(oldValue, newVal)// 添加到排序数组中this.sortSelectedOptions.push(...newItems)}if (newVal.length < oldValue.length) {// 找到删除的项const newItems = this.findNewItems(newVal, oldValue)// 从排序数组中过滤掉被删除的项this.sortSelectedOptions = this.sortSelectedOptions.filter(item => {return !newItems.map(e => JSON.stringify(e)).includes(JSON.stringify(item))})}console.log('this.sortSelectedOptions', this.sortSelectedOptions)},deep: true}
},methods:{findNewItems(oldList, newList) {// 创建一个映射表来快速检查旧列表中的项const oldItemsMap = new Map()for (const item of oldList) {// 使用JSON.stringify作为唯一标识符（注意：如果子数组顺序重要且可能不同，这种方法可能不适用）oldItemsMap.set(JSON.stringify(item), true)}// 遍历新列表，检查哪些项不在旧列表中const newItems = []for (const item of newList) {if (!oldItemsMap.has(JSON.stringify(item))) {newItems.push(item)}}return newItems},
}
