uni-app中下拉框多选

uni-app中下拉框多选_第1张图片

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

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

step2:使用HBuilderX导入插件

uni-app中下拉框多选_第2张图片

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


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

项目中的数据格式:

uni-app中下拉框多选_第3张图片

 插件数据格式:

 uni-app中下拉框多选_第4张图片

在获取到人员列表后替换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
   });
},

你可能感兴趣的:(uni-app)