el-select 监听代码

对于 Vue.js 中的 el-select 组件，有多种方式可以监听它的值变化。

1. 使用 v-model 指令

可以使用 v-model 指令来绑定 el-select 的值，同时监听它的变化：

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

<script>
export default {
  data() {
    return {
      selectedValue: '',
      options: [
        {
          label: 'Option 1',
          value: 'option1'
        },
        {
          label: 'Option 2',
          value: 'option2'
        },
        {
          label: 'Option 3',
          value: 'option3'
        }
      ]
    }
  },
  methods: {
    handleSelectChange(value) {
      console.log('Selected value:', value)
    }
  }
}
</script>

在上面的代码中，我们使用 v-model 指令将 el-select 的值绑定到 selectedValue 属性上，并在 @change 事件中监听它的变化。

2. 使用 watch 监听器

另一种方法是使用 watch 监听器来监听 el-select 的值变化：

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

<script>
export default {
  data() {
    return {
      selectedValue: '',
      options: [
        {
          label: 'Option 1',
          value: 'option1'
        },
        {
          label: 'Option 2',
          value: 'option2'
        },
        {
          label: 'Option 3',
          value: 'option3'
        }
      ]
    }
  },
  watch: {
    selectedValue(newValue, oldValue) {
      console.log('Selected value changed from', oldValue, 'to', newValue)
    }
  }
}
</script>

在这个例子中，我们使用 watch 监听器来监听 selectedValue 属性的变化，当 el-select 的值发生变化时，watch 监听器中的回调函数将被调用。

无论使用哪种方法，你都可以在 el-select 的值发生变化时进行适当的处理。