网站集约化建设的优势,无锡哪里有做网站,做移动端网站软件开发,北京网站搭建开发(vue)el-cascader级联选择器按勾选的顺序传值,摆脱层级约束 需求#xff1a;按勾选的顺序给后端传值 难点#xff1a;在 Element UI 的 el-cascader 组件中#xff0c;默认的行为是根据数据的层级结构来显示选项#xff0c;用户的选择也会基于这种层级结构#xff0c;el-…(vue)el-cascader级联选择器按勾选的顺序传值,摆脱层级约束 需求按勾选的顺序给后端传值 难点在 Element UI 的 el-cascader 组件中默认的行为是根据数据的层级结构来显示选项用户的选择也会基于这种层级结构el-cascader 本身并不直接支持自定义的显示顺序。 效果 实现
// html
el-cascaderv-modelselectedOptions:optionsoptions:propspropsclearable
/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},
}
