(vue)el-cascader级联选择器按勾选的顺序传值,摆脱层级约束

(vue)el-cascader级联选择器按勾选的顺序传值,摆脱层级约束

---

• 需求：按勾选的顺序给后端传值

• 难点：在 Element UI 的 el-cascader 组件中，默认的行为是根据数据的层级结构来显示选项，用户的选择也会基于这种层级结构，el-cascader 本身并不直接支持自定义的显示顺序。

---

效果：

---

实现：

// html
<el-cascader
	v-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值取label
	        options: [{
	          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
    },
}