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

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

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

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

1. <template>
2.   <div class="search-box">
3.     <C_Select
4.       v-bind="$attrs"
5.       v-model="_modelValue"
6.       filterable
7.       remote
8.       clearable
9.       reserve-keyword
10.       remote-show-suffix
11.       :remote-method="overhaulProjectCodeMethod"
12.       :options="_options || []"
13.       :loading="_loading"
14.       @focus="focus"
15.       @change="handleChangeSearchBtn($event)"
16.     />
17.     <el-button
18.       :icon="Search"
19.       color="#f5f7fa"
20.       class="search-box-btn"
21.       @click="handleBtnClick"
22.     />
23.   </div>
24. </template>
26. <script lang="ts" setup>
27. import { isFunction } from '@/utils/d_is'
28. import { Search } from '@element-plus/icons-vue'
30. interface Props {
31.   value: any
32.   label?: any
33.   option?: any
34.   options?: any[]
35.   // query代表的值
36.   queryValue: string
37.   // 列表label代表的字段
38.   labelField?: string
39.   // 列表label代表的字段
40.   valueField?: string
41.   disabledField?: string
42.   // 下拉数据请求接口
43.   api?: (arg?: any) => Promise<any>
44.   // 接口参数
45.   params?: any
46.   //返回的值和赋值的值
47.   callBackNames: any[],
48.   // 返回列表数据字段
49.   resultField?: string
50.   // 是否立即请求接口，否则将在第一次获取焦点时触发请求
51.   immediate?: boolean
52.   // 是否多选
53.   multiple?: boolean
54. }
56. const props = withDefaults(defineProps<Props>(), {
57.   labelField: 'label',
58.   valueField: 'value',
59.   disabledField: 'disabled',
60.   resultField: 'records',
61.   queryValue:'',
62.   callBackNames:[],
63.   immediate: true,
64. })
65. const emits = defineEmits([
66.   'update:value',
67.   'update:label',
68.   'update:option',
69.   'change',
70.   'visible-change',
71.   'remove-tag',
72.   'clear',
73.   'blur',
74.   'focus',
75.   // 下拉接口重新请求，数据更新后触发
76.   'options-change',
77.   //按钮点击
78.   'btn-click',
79. ])
80. const _selectRef = ref()
81. const _modelValue = ref(props.value || '')
82. const _options = ref(props.options || [])
83. const _option = ref(props.option || {})
84. const _loading = ref(false)
86. watch(
87.   () => props.options,
88.   (newVal) => {
89.     if (props.api) return
90.     _options.value = newVal
91.   },
92.   {
93.     deep: true,
94.   }
95. )
97. watch(
98.   () => props.option,
99.   (newVal) => {
100.     _option.value = newVal
101.   },
102.   {
103.     deep: true,
104.   }
105. )
107. watch(
108.   () => props.value,
109.   (newVal) => {
110.     if (props.multiple && !Array.isArray(newVal)) {
111.       console.error('multiple 为true时，传入的value数据类型必须为array')
112.     }
113.     _modelValue.value = newVal
114.   },
115.   {
116.     immediate: true,
117.   }
118. )
120. watch(
121.   () => _modelValue.value,
122.   () => {
123.     emits('update:value', _modelValue.value)
124.   },
125.   {
126.     immediate: true,
127.   }
128. )
131. //标准项目编号-搜索开始
132. const overhaulProjectCodeMethod = async (query: string) => {
133.   if (query) {
134.     const api = props.api
135.     if (!api || !isFunction(api)) return
136.     _options.value = []
137.     _loading.value = true
138.     let obj= {
139.       pageNum: 1,
140.       pageSize: 10,
141.       ...props.params,
142.     }
143.     obj[props.queryValue] = query
144.     let res = await api(obj)
145.     _loading.value = false
146.     let arr = props.labelField.split(',')
147.     _options.value = res.records.map((item) => {
148.       let str =''
149.       arr.forEach(p=> str += item[p] +' ')
150.       return {
151.         label: str,
152.         value: item[props.valueField],
153.         name: item[props.valueField],
154.         key: item[props.valueField],
155.         ...item,
156.       }
157.     })
158.   } else {
159.     _options.value = []
160.   }
161. }
163. async function handleChangeSearchBtn(val) {
164.   if(!val){
165.     props.callBackNames.forEach(p=>{
166.       _option.value[p.value]  = ''
167.     })
168.     return
169.   }
170.   let obj = _options.value.filter(
171.     (el) => el.value == val
172.   )[0]
173.   props.callBackNames.forEach(p=>{
174.       _option.value[p.value]  = obj[p.name]
175.   })
176.   change(val)
177. }
179. //按钮点击
180. const handleBtnClick = () => {
181.   emits('btn-click', unref(_options))
182. }
184. // 下拉接口重新请求，数据更新后触发
185. const emitChange = () => {
186.   emits('options-change', unref(_options))
187. }
188. // 当 input 获得焦点时触发
189. const focus = (e) => {
190.   emits('focus', e)
191. }
192. // 选中值发生变化时触发
193. const change = (val) => {
194.   let data = _options.value?.filter((x) => x.value == val)
195.   emits('change', val, data)
196. }
197. // 下拉框出现/隐藏时触发
198. const visibleChange = (val: boolean) => {
199.   handleFetch()
200.   emits('visible-change', val)
201. }
202. // 多选模式下移除tag时触发
203. const removeTag = (val) => {
204.   emits('remove-tag', val)
205. }
206. // 可清空的单选模式下用户点击清空按钮时触发
207. const clear = (e) => {
208.   emits('clear', e)
209. }
210. // 当 input 失去焦点时触发
211. const blur = (e) => {
212.   emits('blur', e)
213. }
214. const getOptions = () => _options.value
215. defineExpose({ selectMethods: _selectRef, getOptions })
216. </script>
218. <style scoped>
219. .search-box{
220.   display: flex;
221.   width: 100%;
222.   .search-box-btn{
223.     border-top-left-radius: 0px;
224.     border-bottom-left-radius: 0px;
225.     border-top: 1px solid #dcdfe6;
226.     border-right: 1px solid #dcdfe6;
227.     border-bottom: 1px solid #dcdfe6;
228.     color: #a8abb2;
229.   }
230. }
231. </style>

复制代码

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

1.   <!-- 标准项目编号 -->
2.         <template #overhaulProjectCode="{ row, index }">
3.           <C_SearchBtn
4.             v-model:value="row.overhaulProjectCode"
5.             :placeholder="'请选择'"
6.             :api="ListOverhaulProject"
7.             :option="row"
8.             :queryValue="'overhaulCode'"
9.             :params="{
10.               deviceCode: 0,
11.               status: 3,
12.             }"
13.             :labelField="'overhaulCode,overhaulName'"
14.             :valueField="'overhaulCode'"
15.             :options="[]"
16.             :callBackNames="[
17.               {
18.                 name: 'id',
19.                 value: 'overhaulProjectId',
20.               },
21.               {
22.                 name: 'overhaulCode',
23.                 value: 'overhaulProjectCode',
24.               },
25.               {
26.                 name: 'overhaulName',
27.                 value: 'overhaulProjectName',
28.               },
29.             ]"
30.             @btn-click="handleOverhaulCodeModalVisible(row, index)"
31.             @focus="handleFocus(index)"
32.           />
33.         </template>

复制代码

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

1. <!-- 生产设备 -->
2.     <materialOne
3.       title="选择生产设备"
4.       v-if="materialOneModalVisible"
5.       :data="curRow"
6.       v-model:visible="materialOneModalVisible"
7.       @select="handleMaterialOneSelect2"
8.       @close="materialOneModalVisible = false"
9.     />

复制代码

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

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。