实现如上图的可多选的下拉框

step1:打开链接下拉多选,完全仿照微信原生效果,简单美观可扩展,可在线体验 - DCloud 插件市场

step2:使用HBuilderX导入插件

step 3:在要使用的页面直接使用

<multiple-picker 
    title="工作人员" 
    :show="userSelectMultiple" 
    :columns="userList" 
    :defaultIndex="selectIndex"
	@confirm="confirmMultiple" 
    @cancel="userSelectMultiple = false">
</multiple-picker>

注意:插件的colums中的key 值是label和value,如果项目中数据的key值和插件不一致,需要在获取到数据后替换key值。如下:

项目中的数据格式:

 插件数据格式:

 

在获取到人员列表后替换key值,再打开多选框 

//获取工作人员
chooseUser() {
    getWorkerList().then((res) => {
        this.userList = res.data;
        let newArr = []
        this.userList.map(item => {
        let _item = JSON.parse(JSON.stringify(item).replace('nickName','label').replace('userId', 'value'));
        newArr.push(_item)
)
        this.userList = newArr
        this.userSelectMultiple = true
   });
},

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐