elementUI的el-select传递item对象或其他参数的3种方法

在使用elementUI的el-select组件时，我们经常需要在选项变化时获取到相关的数据。以下是三种常见的方法：

1. 使用v-model进行双向绑定

这是最简单的方法，直接将v-model绑定到一个变量上，当选择项改变时，这个变量的值也会改变。

<template>
  <el-select v-model="selected" placeholder="请选择">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item">
    </el-option>
  </el-select>
</template>
 
<script>
export default {
  data() {
    return {
      selected: {},
      options: [{label: '选项1', value: '1'}, {label: '选项2', value: '2'}]
    }
  }
}
</script>

2. 使用@change事件

每次选项变化时，都会触发change事件，我们可以在事件处理函数中获取到选中的值。

<template>
  <el-select @change="handleChange" placeholder="请选择">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
</template>
 
<script>
export default {
  methods: {
    handleChange(value) {
      const selected = this.options.find(item => item.value === value);
      console.log(selected);
    }
  },
  data() {
    return {
      options: [{label: '选项1', value: '1'}, {label: '选项2', value: '2'}]
    }
  }
}
</script>

3. 使用el-option的@click事件

我们也可以在el-option上添加点击事件，然后在事件处理函数中获取到相关的数据。

<template>
  <el-select placeholder="请选择">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value"
      @click.native="handleOptionClick(item)">
    </el-option>
  </el-select>
</template>
 
<script>
export default {
  methods: {
    handleOptionClick(item) {
      console.log(item);
    }
  },
  data() {
    return {
      options: [{label: '选项1', value: '1'}, {label: '选项2', value: '2'}]
    }
  }
}
</script>

以上就是在el-select中传递item对象或其他参数的三种方法。