当前位置：首页 > news >正文

班级网站模板wordpress商务套餐

news 2025/11/16 20:59:06

班级网站模板,wordpress商务套餐,网页游戏排行榜2022前十名最新排名图片,wordpress分页404近日工作中，遇到一个需求，就是select的有一个前置切换条件，有些条件需要时输入，有些条件需要时下拉选择，但是在切换的时候，后面的这个输入或者选择组件不能闪烁，于是也就只能采用select去实现&a…

近日工作中，遇到一个需求，就是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均相同的一个对象，作为默认值回填表单(当然他重新搜索肯定就会搜不到，这就是特殊情况)。