【Vue3+Element】实现选择器输入框SelectInput,可以过滤筛选项,可以直接输入搜索

您所在的位置:网站首页 vue分类筛选搜索 【Vue3+Element】实现选择器输入框SelectInput,可以过滤筛选项,可以直接输入搜索

【Vue3+Element】实现选择器输入框SelectInput,可以过滤筛选项,可以直接输入搜索

2023-07-15 17:41| 来源: 网络整理| 查看: 265

{{ item.value }}

import { ref } from 'vue';// 接收父组件的传参const props = defineProps({ modelValue: { type: String, }, options: { type: Array }, placeholder: { type: String },});// 触发父组件的方法const emit = defineEmits(['change', 'update:modelValue']);const options = ref(props.options as any);const filterOptions = (val: string) => { console.log("过滤筛选项") options.value = props.options?.filter((item: any) => { return item.value?.indexOf(val) !== -1; });};const onChangeCommand = (val: string) => { console.log("点击菜单项触发的事件回调") emit('update:modelValue', val); emit('change', val); filterOptions(val);};const onInput = (val: string) => { console.log("在 Input 值改变时触发") emit('update:modelValue', val); filterOptions(val);};const onInputChange = (val: string) => { console.log("仅当 modelValue 改变时,当输入框失去焦点或用户按Enter时触发") emit('change', val);};



【本文地址】


今日新闻


推荐新闻


    CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3