element ui 选择器 change的用法 举例说明

Element UI 的选择器组件是一个常用的表单组件，它可以让用户从预定义的选项中选择一个值，并且在用户选择一个新值时触发 change 事件。

下面是一个简单的例子，演示如何使用 Element UI 的选择器组件：

<template>
  <el-select v-model="selectedValue" @change="handleChange">
    <el-option v-for="option in options" :key="option.value" :label="option.label" :value="option.value"></el-option>
  </el-select>
</template>

<script>
export default {
  data() {
    return {
      selectedValue: '',
      options: [
        { label: '选项一', value: 'value1' },
        { label: '选项二', value: 'value2' },
        { label: '选项三', value: 'value3' }
      ]
    };
  },
  methods: {
    handleChange(value) {
      console.log('选择了', value);
    }
  }
};
</script>

在这个例子中，我们使用了 `el-select` 组件来展示一个下拉列表，`v-model` 指令绑定了当前选中的值，`@change` 事件监听器会在用户选择一个新值时被触发，执行 `handleChange` 方法。

`el-option` 组件用来定义下拉列表中的每个选项，其中 `v-for` 指令用来遍历选项列表，`:label` 属性和 `:value` 属性分别用来指定选项的展示文本和对应的值。

在 `handleChange` 方法中，我们输出了用户选择的值，可以根据实际需求进行相应的处理。