vue3使用 antdesign的下拉框后,默认赋个值,并触发change事件,脚本用typescrpit实现
时间: 2024-09-08 16:03:47 浏览: 98
在 Vue3 中,如果你想要使用 Ant Design 的下拉框(`<Select>` 组件),并设置默认值同时监听 `change` 事件,可以按照以下步骤和脚本实现:
首先,在组件模板中引入 Select 组件,并给它一个初始值:
```html
<template>
<a-select v-model="selectedValue" @change="handleChange">
<!-- 你的选项数据 -->
<a-option v-for="(item, index) in options" :key="index" :value="item.value">{{ item.label }}</a-option>
</a-select>
</template>
```
然后,在 script 部分定义组件的数据(options 和 selectedValue)以及 change 事件处理函数:
```javascript
<script setup>
import { ref } from 'vue';
import { Select, Option } from '@ant-design-vue/components/select';
const options = // 你的选项数组,例如 [{ value: 'option1', label: 'Option 1' }, ...]
const selectedValue = ref(options[0].value); // 设置默认值
function handleChange(value) {
console.log('选中的值:', value);
// 这里可以根据需要更新状态或做其他操作
}
</script>
```
在这个例子中,`v-model` 指令绑定到 `selectedValue`,当选择项改变时,`handleChange` 函数会被调用,打印出新的选择值。
阅读全文