ElementUI Select_elementui select change

解决方案简述

在使用ElementUI的Select组件时，我们经常会遇到需要监听其值变化的情况。介绍如何通过change事件来实现对Select选择变化的监听，并给出多种思路以满足不同的业务需求。

一、基础使用

最直接的方法是在绑定v-model的为el-select添加@change事件监听器。
```html

export default {
data() {
return {
options: [{
value: '选项1',
label: '黄金糕'
}, {
value: '选项2',
label: '双皮奶'
}],
value: ''
};
},
methods: {
handleChange(value) {
console.log(value);
// 在这里可以执行其他操作，比如发送网络请求等
}
}
};

</p>

<h2>二、结合过滤功能</h2>

<p>有时候我们希望用户输入时能够自动过滤选项，同时也能监听选择变化。
```html

  <div>
    
      
      
    
  </div>
</p>


export default {
  data() {
    return {
      options: [],
      value: '',
      list: [],
      loading: false,
      states: ['Alabama', 'Alaska', 'Arizona']
    };
  },
  mounted() {
    this.list = this.states.map(item => {
      return { value: `value:${item}`, label: `label:${item}` };
    });
  },
  methods: {
    remoteMethod(query) {
      if (query !== '') {
        this.loading = true;
        setTimeout(() => {
          this.loading = false;
          this.options = this.list.filter(item => item.label.toLowerCase()
            .indexOf(query.toLowerCase()) > -1);
        }, 200);
      } else {
        this.options = [];
      }
    },
    handleChange(value){
      console.log(value);
    }
  }
};


<p>

三、多选情况下的处理

当el-select设置为多选模式时，change事件传入的参数是一个数组。
```html

export default {
data() {
return {
options: [{
value: '选项1',
label: '黄金糕'
}, {
value: '选项2',
label: '双皮奶'
}],
value: []
};
},
methods: {
handleChange(value) {
console.log(value); // 这里是数组
// 可以根据数组做进一步操作
}
}
};