easyui根据select下拉框内容更新表单内容_Element UI 使用 select远程搜索回显

1. 前言

对于管理系统来讲，基本上就是增删改查。增和改在后端就是修改数据库的数据，在前端就是Form表单。增的话还好，就是直接创建一个空的或者带有部分默认值的Form。改就需要比增多一个过程，那就是数据回显。

2. 数据回显

数据回显就意味着第一创建的时候表单的内容显示成什么样，回显时表单显示的内容应该保持一致(此处不考虑表单组件的状态是否禁用)。

3. 表单组件

表单的作用就是数据录入，表单的基本组件有：

• input
• select
• radio
• checkbox

在原生的HTML中，radio 和 checkbox 是 input 组件两种特殊的展现形式。select组件的使用，更多的时候是为了保证数据的正确性与规范性。

select允许用户在一组的数据进行选择，并将选择的内容作为表单的录入。

4. Element UI select

在 Element UI 中，对 select 组件进行了增强，使得其不止包含原生组件的功能及特性，还增加了远程搜索的功能。远程搜索适用于数据集量级比较大的情况。

以下的 select 如无特殊指明，均代表 Element UI select。

select按显示和实际值的关系可以分为三种类型：

• value和label一样
• value和label不一样
• value是一个对象, label是value拼装出来的

三种类型的数据回显的解决方案是不一样的。

第一种情况

对于第一种“value和label一样”的情景，这种数据回显最简单，直接显示即可。对于多选和单选都一样，直接使用即可。

第二种情况

对于第二种情况，通常和后端的模型设计有关。在数据库模型设计时，两个表的关联键就是一个外键ID。在前端为了用户友好性，就会将外键ID转化为对应的名称(或其他方便用户识别的内容值)，对于select控件来讲，value和label此时就是不一样的。

这种情况的解决方案可以分为两种：

• 后端处理
• 前端处理

后端处理就是在后端返回数据的时候，不再是直接返回和库表一样的结构，而是返回经过加工的VO数据，对于前端来讲VO就是一个完整的数据结构、数据模型，前端可以直接使用VO内的数据去渲染视图，而不再需要再次异步转换。

前端处理就是后端直接返回数据的库表结构，不进行架构，前端需要根据业务逻辑，再次请求后端其他接口，对数据进行架构，即将对VO的加工过程由后端转移到前端。

对比这两种方案，从性能、安全性方面的考虑，后端处理会更胜一筹。这也是为什么在后端系统设计中会有VO、DTO等概念的原因之一。

第三种情况

了解的第二种情况的两种解决方案后，对与第三种情况理解起来就比较容易了。其实第三种情况就对应后端处理的VO。

5. 实现

第一种情况

第二种情况

第三种情况

6. 总结

常言道：“办法总比问题多”。每一实际遇到的问题，我们都可以找到不同的实现方式。

---

公众号： Java码农