电子商务网站建设与管理课程的目的深圳百度seo整站
近日工作中，遇到一个需求，就是select的有一个前置切换条件，有些条件需要时输入，有些条件需要时下拉选择，但是在切换的时候，后面的这个输入或者选择组件不能闪烁，于是也就只能采用select去实现，而不能用select和input通过v-if切换，或者v-show动画实现。
先看下效果
效果一：前置切换为可输入类型，可接受输入
效果二：前置条件切换为下拉选择状态，可接受下拉选择
效果三、可动态新增和删除
效果四、数据回显
下面我们讲一下这个功能的实现过程。
一、组件配置
首先我们根据官方ant-design-vue 4的select组件，我们看到有一个searchValue，value这两个属性配置，在我们开启showSearch属性后，searchValue就是我们获取输入内容的配置项，value(v-model)则是我们通过控制select下拉框选择option后的值。这个是核心配置。
value(v-model)是双向绑定的，你可以不考虑其获取值的问题，以及数据回填时展示的问题。官方文档虽然没说searchValue是双向绑定，其实在开启showSearch时，你可以利用onSearch事件给绑定的变量赋值。这时事件回调中你可以拿到输入的值。
接着就是通过open属性去控制这个下拉框的展示。
说到这里那么我们利用几个核心的属性就可以控制基本的需求了。
1. 为select模式时可实现根据输入筛选
当然这是一个常见场景了，即在你开启open时，利用输入值可对下拉框的内容进行过滤。这时就是我们增加filterOption配置即可。
2. 当前前置条件切换时，我们需要清空select的值
因为前置切换，可以会切换到需要输入的选项也可能切换到其他select选项但是字典值不同，所以切换后需要清空原来的值，当然为了能够实现清空后显示pladeholder需要置将searchValue和value绑定的变量为undefined。
二、细节需求
这个细节需求，就是searchValue和value配置耦合的情况，即在select为选择option的模式时，又能够输入并搜索。
所以这个时候我们即能够拿到seachValue的值，也可以拿到value值，当他通过搜索拿到某一项值时，我们需要再change事件回调中，把searchValue清空掉。同时我们又需要把open同时关掉。
这里就有一个细节问题：
1. 单选
如果此时select在option展开的情况下，如果支持单选，则需要关掉option下拉，因为这些行为目前都依赖我们的open属性控制。
2. 多选
但是如果是多选，我们则不需要收起option下拉，依赖其组件内部的控制(失去焦点时关闭)。
3. 奇葩需求处理
现实的需求是，单选模式下，选中一个值后，输入框内回显了刚才选中的option对象的label,单此时并没有失去焦点(因为开启了showSearch)，再次点击该文本框要能唤起option下拉，原本的组件自身逻辑，是失去焦点后，再次点击获取焦点就会再此展开option下拉，因为这里这个奇葩需求，我开始让选择一个option值后，强制失去焦点，这样他再点击，则可以唤起option下拉。被迫通过加ref,动态部分则通过函数收集ref，然后通过ref在dom操作下失去焦点。
selectRef.value && selectRef.value.blur();三、代码
<Select:ref="(dom: HTMLElement) => setDynamicSelectRef(index, dom)"v-model:value="item.formData.keyWords":class="{ keywords: true, large: props.size === 'large' }":defaultOpen="false":labelInValue="true"@focus="selectFocus(index)"@blur="selectBlur(index)"@search="(value: string) => onSearch(value, index)"@select="(value: ObjectAny) => onSelect(value, index)"@change="(value: ObjectAny) => selectChange(value, index)":open="selectOpen(item.formData.keyCategory, index)":searchValue="item.formData.searchValue":showSearch="true":allowClear="activeCategory(item.formData.keyCategory).dicName ? true : false":showArrow="activeCategory(item.formData.keyCategory).dicName ? true : false":filterOption="filterOption":status="item.formRules.keyWords.status":placeholder="activeCategory(item.formData.keyCategory).placeholder":options="dynamicOptions(activeCategory(item.formData.keyCategory)?.dicName)"></Select>这里面就是整体配置：
activeCategory这个函数(我用computed包装了下)，就是根据当前选中的前置条件判断是否为需要展示select的option的判断boolea值。
大概过程就是这样。
1. 处理特殊情况
这里的特殊情况是，我们在一些特殊情况下，需要在对应的条件下，回显一条无法匹配到option的数据，支持特殊场景的搜索(label, value一致，后端需要的其实是一个label)。这时候我们就将需要回填的数据做成一个对象，key,label,value均相同的一个对象，作为默认值回填表单(当然他重新搜索肯定就会搜不到，这就是特殊情况)。
2. 就是清空逻辑实现
showClear,目前我们的处理逻辑是只有是select为option的情况下，我们支持显示清空操作。如果是输入模式，我们不支持清空处理。这是因为select组件的清空操作，其实是触发的change事件，当我们模式是select的输入框，不显示option下拉时，清空并不会触发change事件。
目前暂时没有处理，后期我们实现的话，我会更新。