前端-远程多选搜索框不能反显的问题解决

一、远程搜索框反显不了问题

问题原因:

由于远程搜索框不能一次性返回所有的选项

所以当搜索到当前返回框之外的选项,并且保存后,修改时再次打开,由于选项中没有可以匹配的数据 导致无法反显

当选项框为多选时 该问题很难解决

解决方案:

1.当新增的时候 进行一次为空的模糊查询 保证每次新增的时候点击下拉框都是有同样的选项

2.在数据库存放一个修改的 编号-名称的值 每次修改的时候 对改字段进行拆分和格式处理作为该下拉框的写死的选项
如图为数据库新增的字段

存放的代码:

对存放数据处理的逻辑:

1.获取已经存放的选项数据 防止漏选

2.绑定多选框选中数据 添加新增的且改存放数组中没有的数据 防止漏选

3.过滤出当前基金v-model=fundCodeList双向绑定的ID选项 防止多选

绑定选项变化的方法

把该字段处理成下拉框的选项

因为修改的下拉框

1.由不同的远程搜索 获得的内容组成的下拉框,选项不能一次性返显完毕
所以采用以前拿到基金编码之后调用接口查询下拉框 进行多选框匹配无法实现

会导致只有编号 拿不到编号对应的选项的情况

导致返显失败

现在将后端返回的fundName字符串进行切割 做成下拉选项对修改的基金多选框进行填充 保证 框中的值能够和下拉框对应上实现反显

修改实现的效果图:

需要注意的问题

每次打开修改都要重新清空需要用到的数组,否则会导致有大量的重复数组

一般清空数组的地方

1.页面定义

2.showForm

3.打开修改弹窗绑定事件

相关推荐
Mintopia1 分钟前
你以为是技术问题,其实是流程问题:工程效率的真相
前端
Mintopia7 分钟前
一套能落地的"防 Bug"习惯:不用加班也能少出错
前端
亿元程序员9 分钟前
箭头游戏那么火,搞个3D的可以吗?我:这不是3年前的游戏了吗?
前端
IT_陈寒11 分钟前
SpringBoot里的这个坑差点让我加班到天亮
前端·人工智能·后端
智者知已应修善业12 分钟前
【CD4022八进制计数器脉冲分配器】2023-5-31
驱动开发·经验分享·笔记·硬件架构·硬件工程
巫山老妖14 分钟前
大模型工程三驾马车:Prompt Engineering、Context Engineering 与 Harness Engineering 深度解析
前端
Cobyte19 分钟前
4.响应式系统基础:从发布订阅模式的角度理解 Vue3 的数据响应式原理
前端·javascript·vue.js
晓得迷路了21 分钟前
栗子前端技术周刊第 124 期 - ESLint v10.2.0、React Native 0.85、Node.js 25.9.0...
前端·javascript·eslint
sp_fyf_202421 分钟前
【大语言模型】从失败中学习:在微调大型语言模型作为智能体时整合负例
人工智能·深度学习·学习·机器学习·语言模型·自然语言处理
星空椰30 分钟前
JavaScript基础:运算符和流程控制
开发语言·javascript·ecmascript