vue cascader级联选择器多选获取选中的所有值，并给数组添加相应属性

可以通过监听 Cascader 组件的 change 事件，获取选中的所有值，然后将其添加到数组中，并为每个选中的值添加一个相应的属性。以下是一个简单的示例代码：

<template>
  <div>
    <el-cascader
      v-model="selectedOptions"
      :options="options"
      @change="handleCascaderChange"
      clearable
      multiple
      collapse-tags
    ></el-cascader>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedOptions: [], // 选中的值
      options: [
        {
          value: 'beijing',
          label: '北京',
          children: [
            {
              value: 'dongcheng',
              label: '东城区',
            },
            {
              value: 'xicheng',
              label: '西城区',
            },
          ],
        },
        {
          value: 'shanghai',
          label: '上海',
          children: [
            {
              value: 'pudong',
              label: '浦东新区',
            },
            {
              value: 'minhang',
              label: '闵行区',
            },
          ],
        },
      ],
    };
  },
  methods: {
    handleCascaderChange(value) {
      const selectedValues = value[value.length - 1]; // 获取最后一级选中的值
      selectedValues.forEach((selectedValue) => {
        this.selectedOptions.push({
          value: selectedValue,
          label: this.getLabelByValue(selectedValue), // 根据选中的值获取对应的 label
          customProperty: 'custom', // 自定义属性
        });
      });
    },
    getLabelByValue(value) {
      const option = this.options.find((option) => option.value === value);
      return option ? option.label : '';
    },
  },
};
</script>

在上面的示例中，我们通过监听 Cascader 组件的 change 事件，获取最后一级选中的值，然后将其添加到 selectedOptions 数组中，并为每个选中的值添加了一个名为 customProperty 的自定义属性。注意，我们还需要根据选中的值获取对应的 label，以便在数组中显示完整的选项文本。