H5微应用 Vue3+Vant4表单中使用下拉单选、多选控件

最新推荐文章于 2024-08-15 16:04:49 发布

铁马2020

最新推荐文章于 2024-08-15 16:04:49 发布

阅读量6.4k

点赞数 3

文章标签： vue node.js 前端

本文链接：https://blog.csdn.net/weixin_44108109/article/details/132167903

版权

本文介绍了在Vue3+Vant4的H5微应用开发中，如何封装带有弹出层的下拉单选和多选控件。作者针对Vant4中缺乏此类组件的问题，结合<van-field/>、<van-popup/>、<van-picker/>等组件，实现了字典下拉单选和多选功能，提升了开发效率。

摘要由CSDN通过智能技术生成

1.简介

最近在做钉钉端H5微应用的开发，项目前端架构是Vue3+Vant4，表单中需要使用字典下拉单选、多选控件，但Vant4中没有直接可以使用的控件，在网上也没有找到类似的文章。因此整合<van-field/>、<van-popup/>、<van-picker/>、<van-checkbox-group/>、<van-checkbox/>等组件，封装了带有弹出层的下拉单选、多选控件。在新增、编辑、详情页面均可使用，快速提高团队开发效率。

2.下拉单选

在弹出层中选中610-C班，表单列表展示610-C班，传给表单的project.workTeam值为610-C班对应id：3550，单选效果图：

数据集合下拉单选使用方式：

                    <dict-select
                      :label-width="70"
                      label="工作班次"
                      :dict-data-list="workTeamList"
                      text-column="teamName"
                      value-column="id"
                      v-model="project.workTeam"
                      placeholder="请选择工作班次"
                      :rules="formRules.workTeam"
                      required
                    />

字典下拉单选使用方式：

               <dict-select
                        :label-width="100"
                        label="更换备件类别"
                        dict-type="change_component_type"
                        v-model="item.changeComponentType"
                        placeholder="请选择更换备件类别"
                        :rules="formRules.changeComponentType"
                        required
                      />

dictType、 dictDataList参数二选一必传
dictDataList：数据集合，下拉弹出层展示dictDataList中数据
textColumn：文本展示字段，默认值：dictLabel，dictDataList中对象对应的属性，下拉单选成功后在表单列表展示
valueColumn：实际值字段，默认值：dictValue，dictDataList中对象对应的属性， 传递给父组件表单的实际值
dictType：字典编码，传入时，控件会根据编码获取字典下拉数据集合

3.下拉多选

在弹出层中选中610-C班、610-A2班，表单列表展示610-C班,610-A2班，传给表单的project.workTeam值为610-C班、610-A2班对应id：3550,3559，多个值以逗号分隔，多选效果图：

数据集合下拉多选使用方式：

                    <dict-select
                      multiple
                      :label-width="70"
                      label="工作班次"
                      :dict-data-list="workTeamList"