【无标题】

vant2组件库多选实现

代码如下所示

<template>
  <div class="box">
    <van-form ref='form'>
      <van-field
          v-model="userAssignText"
          is-link
          readonly
          label="处理人"
          placeholder="请选择"
          @click="showCheckbox= true"
          :rules="[{ required: true, message: '请选择处理人' }]"
      />
      <van-popup v-model="showCheckbox" position="bottom">
        <div style="display: flex;justify-content: space-between;height:44px;line-height:44px;">
          <van-button style="border:none;color:#969799;" @click="concal" size="normal">取消</van-button>
          <span style="font-size:16px;font-weight:bold;">处理人</span>
          <van-button style="border:none;color:#6398fb;" @click="confirm" size="normal">确认</van-button>
        </div>
        <van-checkbox-group v-model="userAssign">
          <van-cell
              v-for="(item, index) in userAssignList"
              clickable
              :key="index"
              :title="item.name"
          >
            <template #right-icon>
              <van-checkbox
                  :name="item.id"
                  ref="checkboxes"
              />
            </template>
          </van-cell>
        </van-checkbox-group>
      </van-popup>
    </van-form>
    <van-button type="primary" class="btn" block @click="btn()">保存</van-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      userAssignText:[],
      userAssign:[],
      showCheckbox: false,
      userAssignList:[
        {
          id: 1,
          name:"张三"
        },{
          id: 2,
          name:"李四"
        },{
          id: 3,
          name:"王五"
        },{
          id: 4,
          name:"赵六"
        },
      ]
    }
  },
  methods:{
    concal(){
      let _this = this
      _this.showCheckbox= false
      _this.userAssign = _this.userAssignList.filter(obj => _this.userAssignText.includes(obj.name)).map(obj => obj.id)
    },
    confirm(){
      let _this = this
      // 关闭下拉框
      _this.showCheckbox= false
      // 在userAssignList数组对象中取出userAssign里面包含的所有元素的id,并将对用的userAssignList数组对象中name绑定到userAssignText
      _this.userAssignText = _this.userAssignList.filter(obj => _this.userAssign.includes(obj.id)).map(obj => obj.name)
    },
    btn(){
      // 表单验证
      this.$refs.form.validate().then(() => {
        console.log("点击了保存")
      })
    },
  }
}
</script>

<style lang="css" scoped>
.box{
  height: 100vh;
  width: 100vw;
}
.btn{
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  border: none;
  padding: 10px;
  background: linear-gradient(to left, #fd8223,#f58f62,#cb9f7e);
  text-align: center;
}
</style>