element ui select 如何在额外带值

Element UI 的 select 组件是一个下拉选择框，可以在选项中选择一个值作为当前选择的值。如果我们需要在选中某个选项时，同时也需要传递额外的一些值，可以通过设置 options 数组中的 value 属性来实现。

例如，我们需要选择一个年份，同时也需要传递这个年份的值到后台处理，可以这样做：

<el-select v-model="selectedYear" placeholder="请选择年份">
  <el-option v-for="year in years" :key="year.value" :label="year.label" :value="year.value">
    <span>{{year.label}}</span>
    <span>（{{year.value}}年）</span>
  </el-option>
</el-select>

这里的 years 数组包含了一系列可选的年份，每个年份对象包含了 label 和 value 两个属性。我们在 el-option 组件中使用 :label 属性来显示年份文本 label ，并在 value 属性中设置要传递的值。

在选择某个年份时，我们可以通过 selectedYear 变量来获取选中的值，同时也可以获取到其对应的 value 值，例如：

export default {
  data() {
    return {
      years: [
        { label: '2020', value：2020 },
        { label: '2021', value：2021 },
        { label: '2022', value：2022 },
        // ... 其它年份
      ],
      selectedYear: null
    }
  },
  methods: {
    handleYearSelected() {
      console.log('您选择了', this.selectedYear, '年')
      // 在这里处理传递的额外值
    }
  }
}

通过使用 select 组件的 value 属性，我们可以在选择某个选项时，同时传递额外的一些值，便于后续处理。