elementui怎么获取下拉框的值_element 下拉框

在使用 Element UI 框架开发前端应用时，获取下拉框（el-select）的值是一个常见的需求。本文将介绍几种方法来实现这一功能，并提供详细的代码示例。

简述解决方案

Element UI 的 el-select 组件提供了多种方式来获取选中的值。最常见的方式是通过 v-model 绑定一个变量，该变量会自动更新为选中的值。此外，还可以通过监听 change 事件来获取选中的值。本文将详细介绍这两种方法，并提供相应的代码示例。

使用 `v-model` 获取下拉框的值

基本用法

v-model 是 Vue.js 中用于双向数据绑定的指令。在 el-select 组件中，可以通过 v-model 绑定一个变量，该变量会自动更新为用户选择的值。

html

  <div>
    
      
      
    
    <p>选中的值: {{ selectedValue }}</p>
  </div>
</p>


export default {
  data() {
    return {
      selectedValue: '',
      options: [
        { value: '选项1', label: '黄金糕' },
        { value: '选项2', label: '双皮奶' },
        { value: '选项3', label: '蚵仔煎' },
        { value: '选项4', label: '龙须面' },
        { value: '选项5', label: '北京烤鸭' }
      ]
    };
  }
};


<p>

解释

v-model="selectedValue"：将 selectedValue 变量与 el-select 组件绑定，当用户选择一个选项时，selectedValue 会自动更新。
options：定义了下拉框的选项列表。
<p>选中的值: {{ selectedValue }}</p>：显示当前选中的值。

使用 `change` 事件获取下拉框的值

基本用法

除了使用 v-model，还可以通过监听 change 事件来获取选中的值。change 事件在用户选择一个选项时触发，可以在这个事件的处理函数中获取选中的值。

html

  <div>
    
      
      
    
    <p>选中的值: {{ selectedValue }}</p>
  </div>
</p>


export default {
  data() {
    return {
      selectedValue: '',
      options: [
        { value: '选项1', label: '黄金糕' },
        { value: '选项2', label: '双皮奶' },
        { value: '选项3', label: '蚵仔煎' },
        { value: '选项4', label: '龙须面' },
        { value: '选项5', label: '北京烤鸭' }
      ]
    };
  },
  methods: {
    handleChange(value) {
      this.selectedValue = value;
    }
  }
};


<p>

解释

@change="handleChange"：监听 change 事件，当用户选择一个选项时，调用 handleChange 方法。
handleChange(value)：在 handleChange 方法中，value 参数包含了用户选中的值，将其赋值给 selectedValue。