<template>
  <a-select v-model:value="yncf.cfDoctor" show-search :filter-option="changeOption" style="width: 150px" @change="handleChange">
    <a-select-option v-for="item in doctors" :key="item.pym" :value="item.id"> {{ item.employname }}</a-select-option>
  </a-select>
</template>
<script>
export default {
  data() {
    return {
      yncf: {
        cfDoctor: null
      },
      doctors: [
        { id: 1, employname: 'Doctor 1' },
        { id: 2, employname: 'Doctor 2' },
        { id: 3, employname: 'Doctor 3' }
      ]
    };
  },
  methods: {
    handleChange(value) {
      console.log('Selected doctor:', value);
    },
    changeOption(input, option) {
      return option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0;
    }
  }
};
</script>
<p>在上述示例中,<code>@change</code> 事件绑定了 <code>handleChange</code> 方法,当下拉框的值发生变化时,会触发该方法,并将选中的值作为参数传递给方法。你可以根据需要在 <code>handleChange</code> 方法中进行相应的处理。</p>
Vue 3 中 a-select 下拉框 onchange 事件监听示例

原文地址: https://www.cveoy.top/t/topic/qwKg 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录