Element UI 使用 select远程搜索回显(element杩滅▼鎼滅储鍥炴樉鏁版嵁)

1.前言主要是对管理系统进行增删查。而后端的添加和更改是修改数据库的数据,前端是表单表单。如果增加了,也是可以的,就是直接创建一个空的或者部分默认的表单。改变需要不止一个过程,即数据回显。
2.数据回显(Data echo)数据回显是指表单刚创建时显示的内容是什么,回显时表单显示的内容应该是一致的(这里不考虑表单组件的状态是否禁用)。
3.表单组件表单的功能是数据输入。表单的基本组件包括:
inputselectradiocheckbox复选框
在原生HTML中,单选和复选框是输入组件的两种特殊表现形式。选择组件的使用更多时候是为了保证数据的正确性和标准化。
Select允许用户从一组数据中进行选择,并将所选内容作为表单输入。
4.Element UI select在Element UI中,增强了select组件,不仅包含了原生组件的功能和特点,还增加了远程搜索的功能。远程搜索适用于大数据集的情况。
除非另有说明,否则下面的select表示元素UI select。
根据显示值和实际值的关系,选择可以分为三种类型:
和价值标签一样,价值不同于标签。价值是对象,标签是由价值组装而成的。
三种数据回显的解决方案是不同的。
第一种情况,对于第一种“值与标签相同”的场景,这种数据回显是最简单的,直接显示就可以了。多选和单选都一样,直接用就行了。
第二种情况对于第二种情况,通常与后端模型设计有关。设计数据库模型时,两个表的关联键是一个外键ID。在前端,为了用户友好,外键ID会被转换成相应的名称(或者其他方便用户识别的内容值)。对于选择控件,此时的值和标签是不同的。
这种情况的解决方案可以分为两种类型:
后端处理前端处理
后端处理是指后端返回数据时,不直接返回与库表相同的结构,而是处理后的VO数据。对于前端来说,VO是一个完整的数据结构和数据模型,前端可以直接使用VO中的数据渲染视图,无需再次异步转换。
前端处理是指后端直接返回数据的库表结构,没有任何结构。前端需要根据业务逻辑再次请求后端的其他接口来结构化数据,即VO的处理过程从后端转移到前端。
对比这两种方案,后端处理在性能和安全性方面会更好。这也是为什么后端系统设计中会出现VO、DTO等概念的原因之一。
第三种情况理解了第二种情况的两种解法之后,就更容易理解第三种情况了。其实第三种情况对应的是后端处理的VO。
5.实现
第一个案例
第二种情况
第三种情况
6.总结俗话说:“办法总比问题多”。我们可以找到不同的方法来解决每一个实际问题。
微信官方账号:Java码农

其他教程

哪里有教自媒体培训班(自媒体报哪个培训班好)

2022-8-7 13:42:32

其他教程

从龙猫到蒙娜丽莎!看奢侈品如何开拓新的跨界联合思路。

2022-8-7 13:44:47

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索