elementUI下拉选项加多选框功能实现(自己添加“全部”选项)

本文包含三部分:
1.下拉加多选框
2.升级—添加全部选项
3.需求改版完善


一、下拉加多选框

效果如下图:

elementUI下拉选项加多选框功能实现(自己添加“全部”选项)_第1张图片

封装如下:






页面中使用







二、升级—添加全部选项






组件中使用







效果如下图
elementUI下拉选项加多选框功能实现(自己添加“全部”选项)_第2张图片
elementUI下拉选项加多选框功能实现(自己添加“全部”选项)_第3张图片

三、需求改版完善







组件使用:








效果如下:
elementUI下拉选项加多选框功能实现(自己添加“全部”选项)_第4张图片
elementUI下拉选项加多选框功能实现(自己添加“全部”选项)_第5张图片
elementUI下拉选项加多选框功能实现(自己添加“全部”选项)_第6张图片

因上面是对象格式数据,操作起来可能会不方便,我重新整理了一下数组对象格式数据,如下







组件中使用






效果如下:

elementUI下拉选项加多选框功能实现(自己添加“全部”选项)_第7张图片

 本文转发自https://blog.csdn.net/weixin_42681295/article/details/120739490

你可能感兴趣的:(javascript,vue.js,前端)