对select组件的封装

简介: 引言:在我们平时开发过程中,可能都会使用到下拉框这个组件,里面的值要么是动态的,要么是静态的,但是方便日后的维护,大多数都会将他配置成代码项封装成集合,通过遍历,生成动态的数据,这个数据都是从跳转的控制器以集合的形式带过来,这会导致每写一个select都要从后台把这个集合带过来吗,然后再去遍历,这从代码的设计角度来看,非常的臃肿,很难实现低耦合,除非下拉框里面的数据是业务中产生的数据,不得不这样做。

引言:

在我们平时开发过程中,可能都会使用到下拉框这个组件,里面的值要么是动态的,要么是静态的,但是方便日后的维护,大多数都会将他配置成代码项封装成集合,通过遍历,生成动态的数据,这个数据都是从跳转的控制器以集合的形式带过来,这会导致每写一个select都要从后台把这个集合带过来吗,然后再去遍历,这从代码的设计角度来看,非常的臃肿,很难实现低耦合,除非下拉框里面的数据是业务中产生的数据,不得不这样做。接下来就讲述下我的简单封装:

引用方式:我只需要使用select组件,然后再model属性中添上我们对应代码项中的编码就可以了,

具体实现的逻辑

首先在所有的页面引入以下的js,可以将这段js放在一个公用的js里面,就不需要我们单独的调用了,这里面主要通过遍历页面中所有class为model的组件,然后以此遍历,拿到model属性对应的值也就就代码项编码,这里是("MKGL"),通过使用ajax请求到后台的controller里拿到代码项的集合,通过json返回来之后,在进行解析遍历生成动态的下拉框值,由于这里使用的是bootstrap select组件,在拼接好option之后需要进行组件的刷新。这样就可以了

主要的js片段

最后我们看看对应后台模块,这个controller可以写在通用的controller下,后台拿到model之后,直接去代码项的表中寻找这个集合,由于我这里是放在ehcache缓存里面的,我直接从缓存中取出来的,不过逻辑都一样的,然后以json格式返回到前台进行解析。

selectcontroller

到这里,小小的封装就做好了,功能简单,但很使用,希望大家能喜欢,虽然说不要重复造轮子,但是我觉得对自己做的东西进行小小的封装,也是对日后的开发提供一种便利。

感谢大家能看到这里,文中讲的不正确的地方,欢迎在下方留言,我会及时修正。

欢迎大家关注我的公众号,会不定时更新技术干货。

相关文章
|
1月前
Element table组件封装 核心:父子组件传值、传方法
本文介绍了如何基于Element UI的table组件进行二次封装,创建一个具有父子组件传值和传方法功能的自定义表格组件,并提供了封装后的组件如何引入、注册和使用的方法。
82 0
Element table组件封装 核心:父子组件传值、传方法
|
1月前
封装react-antd-table组件参数以及方法如rowSelection、pageNum、pageSize、分页方法等等
文章介绍了如何封装React-Antd的Table组件,包括参数和方法,如行选择(rowSelection)、页码(pageNum)、页面大小(pageSize)、分页方法等,以简化在不同表格组件中的重复代码。
54 0
|
3月前
|
API
前后端数据交互,API风格组合式API和选项式API,setup是一个标识,组合式编写的意思,使定义count.value的值自增的写法,组合式API使用axios的写法,ref定义响应数据写法
前后端数据交互,API风格组合式API和选项式API,setup是一个标识,组合式编写的意思,使定义count.value的值自增的写法,组合式API使用axios的写法,ref定义响应数据写法
|
5月前
|
API
[组件封装]API式调用-封装一个审核意见的组件Comments
[组件封装]API式调用-封装一个审核意见的组件Comments
31 0
|
5月前
element plus 表各组件怎样和分页组件配合使用
element plus 表各组件怎样和分页组件配合使用
89 0
|
5月前
|
JavaScript
uniapp-----封装接口
uniapp-----封装接口
135 0
uniapp-----封装接口
|
Web App开发 API 开发者
关于 SAP UI5 Context.prototype.delete 方法的输入参数 Group ID 的细节
关于 SAP UI5 Context.prototype.delete 方法的输入参数 Group ID 的细节
|
JavaScript
VUE element-ui之table表格全局排序、调用后端接口排序功能
VUE element-ui之table表格全局排序、调用后端接口排序功能
1439 0
|
前端开发 JavaScript 大数据
Concis组件库封装——Table表格
Concis组件库封装——Table表格封装记录
120 1
Concis组件库封装——Table表格
|
API
react+ts+hook封装一个table分页组件(建议收藏,直接使用)
react+ts+hook封装一个table分页组件(建议收藏,直接使用)
179 0