Element ui 多选下拉数据转换

在Element UI中，如果你需要将多选下拉菜单（Select）的值转换成特定的格式，你可以通过监听其change事件来实现。以下是一个简单的例子，展示了如何在多选下拉菜单值改变时转换数据格式：

<template>
  <el-select
    v-model="selectedValues"
    multiple
    placeholder="请选择"
    @change="handleChange"
  >
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value"
    ></el-option>
  </el-select>
</template>
 
<script>
export default {
  data() {
    return {
      selectedValues: [], // 用于存储选中的值
      options: [ // 下拉列表的选项
        { value: '1', label: '选项1' },
        { value: '2', label: '选项2' },
        { value: '3', label: '选项3' }
      ]
    };
  },
  methods: {
    handleChange(value) {
      // 转换选中的值为特定格式，例如数组中包含对象
      this.selectedValues = value.map(val => ({ id: val, name: this.getOptionName(val) }));
    },
    getOptionName(value) {
      const option = this.options.find(opt => opt.value === value);
      return option ? option.label : '';
    }
  }
};
</script>

在这个例子中，selectedValues 被初始化为一个数组，用于存储转换后的对象格式的值。每当下拉菜单的选中值发生变化时，handleChange 方法会被触发，并将最新的值（还是数组形式，由选项的 value 组成）转换成一个对象数组，其中包含 id 和 name 属性。getOptionName 方法用于获取选项的标签名，以便构建包含名称的对象。