三、ElementPlus下拉搜索加弹窗组件的封装

        近期产品提出了一个需求，要求一个form的表单里面的一个组件既可以下拉模糊搜索，又可以弹窗搜索，我就为这个封装了一个组件，下面看效果图。

        

 

效果大家看到了，下面就看组件封装和实现方法

 

第一步，组件封装，我取名为C_SerachBtn 组件，其中的C_Select组件也可以用el-select组件来代替，C_Select使我们自己封装的组件。

 

<template><div class="search-box"><C_Selectv-bind="$attrs"v-model="_modelValue"filterableremoteclearablereserve-keywordremote-show-suffix:remote-method="overhaulProjectCodeMethod":options="_options || []":loading="_loading"@focus="focus"@change="handleChangeSearchBtn($event)"/><el-button:icon="Search"color="#f5f7fa"class="search-box-btn"@click="handleBtnClick"/></div>
</template><script lang="ts" setup>
import { isFunction } from '@/utils/d_is'
import { Search } from '@element-plus/icons-vue'interface Props {value: anylabel?: anyoption?: anyoptions?: any[]// query代表的值queryValue: string// 列表label代表的字段labelField?: string// 列表label代表的字段valueField?: stringdisabledField?: string// 下拉数据请求接口api?: (arg?: any) => Promise<any>// 接口参数params?: any//返回的值和赋值的值callBackNames: any[],// 返回列表数据字段resultField?: string// 是否立即请求接口，否则将在第一次获取焦点时触发请求immediate?: boolean// 是否多选multiple?: boolean
}const props = withDefaults(defineProps<Props>(), {labelField: 'label',valueField: 'value',disabledField: 'disabled',resultField: 'records',queryValue:'',callBackNames:[],immediate: true,
})
const emits = defineEmits(['update:value','update:label','update:option','change','visible-change','remove-tag','clear','blur','focus',// 下拉接口重新请求，数据更新后触发'options-change',//按钮点击'btn-click',
])
const _selectRef = ref()
const _modelValue = ref(props.value || '')
const _options = ref(props.options || [])
const _option = ref(props.option || {})
const _loading = ref(false)watch(() => props.options,(newVal) => {if (props.api) return_options.value = newVal},{deep: true,}
)watch(() => props.option,(newVal) => {_option.value = newVal},{deep: true,}
)watch(() => props.value,(newVal) => {if (props.multiple && !Array.isArray(newVal)) {console.error('multiple 为true时，传入的value数据类型必须为array')}_modelValue.value = newVal},{immediate: true,}
)watch(() => _modelValue.value,() => {emits('update:value', _modelValue.value)},{immediate: true,}
)//标准项目编号-搜索开始
const overhaulProjectCodeMethod = async (query: string) => {if (query) {const api = props.apiif (!api || !isFunction(api)) return_options.value = []_loading.value = truelet obj= {pageNum: 1,pageSize: 10,...props.params,}obj[props.queryValue] = querylet res = await api(obj)_loading.value = falselet arr = props.labelField.split(',')_options.value = res.records.map((item) => {let str =''arr.forEach(p=> str += item[p] +' ')return {label: str,value: item[props.valueField],name: item[props.valueField],key: item[props.valueField],...item,}})} else {_options.value = []}
}async function handleChangeSearchBtn(val) {if(!val){props.callBackNames.forEach(p=>{_option.value[p.value]  = ''})return}let obj = _options.value.filter((el) => el.value == val)[0]props.callBackNames.forEach(p=>{_option.value[p.value]  = obj[p.name]})change(val)
}//按钮点击
const handleBtnClick = () => {emits('btn-click', unref(_options))
}// 下拉接口重新请求，数据更新后触发
const emitChange = () => {emits('options-change', unref(_options))
}
// 当 input 获得焦点时触发
const focus = (e) => {emits('focus', e)
}
// 选中值发生变化时触发
const change = (val) => {let data = _options.value?.filter((x) => x.value == val)emits('change', val, data)
}
// 下拉框出现/隐藏时触发
const visibleChange = (val: boolean) => {handleFetch()emits('visible-change', val)
}
// 多选模式下移除tag时触发
const removeTag = (val) => {emits('remove-tag', val)
}
// 可清空的单选模式下用户点击清空按钮时触发
const clear = (e) => {emits('clear', e)
}
// 当 input 失去焦点时触发
const blur = (e) => {emits('blur', e)
}
const getOptions = () => _options.value
defineExpose({ selectMethods: _selectRef, getOptions })
</script><style scoped>
.search-box{display: flex;width: 100%;.search-box-btn{border-top-left-radius: 0px;border-bottom-left-radius: 0px;border-top: 1px solid #dcdfe6;border-right: 1px solid #dcdfe6;border-bottom: 1px solid #dcdfe6;color: #a8abb2;}
}
</style>

第二步，页面使用，在页面中el-table中当做slot使用，我的slot取名为 overhaulProjectCode

  <!-- 标准项目编号 --><template #overhaulProjectCode="{ row, index }"><C_SearchBtnv-model:value="row.overhaulProjectCode":placeholder="'请选择'":api="ListOverhaulProject":option="row":queryValue="'overhaulCode'":params="{deviceCode: 0,status: 3,}":labelField="'overhaulCode,overhaulName'":valueField="'overhaulCode'":options="[]":callBackNames="[{name: 'id',value: 'overhaulProjectId',},{name: 'overhaulCode',value: 'overhaulProjectCode',},{name: 'overhaulName',value: 'overhaulProjectName',},]"@btn-click="handleOverhaulCodeModalVisible(row, index)"@focus="handleFocus(index)"/></template>

第三步，弹窗，和一般的弹窗一样，自行封装。

<!-- 生产设备 --><materialOnetitle="选择生产设备"v-if="materialOneModalVisible":data="curRow"v-model:visible="materialOneModalVisible"@select="handleMaterialOneSelect2"@close="materialOneModalVisible = false"/>

以上就是基本的做的c_SerachBtn的组件的封装，其中的一些例如handleOverhaulCodeModalVisibl  和 handleFocus   方法需要自己定义，根据自己的具体的需求进行修改。