vant多选人员

参考链接:https://code84.com/810187.html

<template>
  <div class='container'>
    <van-nav-bar :style="{paddingTop:height+'px'}" title="选择处置人员" left-text="返回" left-arrow @click-left="onClickLeft">
    </van-nav-bar>
    <div class='form-box'>
      <van-form ref="form1" @submit="onSubmit">
        <!-- 处置人员 -->
        <van-field readonly clickable name="picker" v-model="form.dealUserName" label="处置人员" placeholder="请选择" @click="chooseUser" required :rules="[{ required: true, message: '请选择' }]" />
        <van-field placeholder="请输入" v-model="form.remarks" type="textarea" row="5" label="备注：" />
        <van-popup round v-model="userShow" position="bottom">
          <div class="van-picker__toolbar">
            <button type="button" class="van-picker__cancel" @click="cancel">
              取消
            </button>
            <div class="van-ellipsis van-picker__title">{{ $attrs.label }}</div>
            <button type="button" class="van-picker__confirm" @click="onConfirm">
              确认
            </button>
          </div>
          <div style="max-height: 264px; overflow-y: auto">
            <van-field v-model="searchVal" input-align="left" placeholder="搜索" @input="search" />
            <van-cell title="全选">
              <template #right-icon>
                <van-checkbox v-model="checkedAll" name="all" @click="toggleAll" />
              </template>
            </van-cell>
            <!-- 人员下拉框 -->
            <van-checkbox-group ref="checkboxGroup" v-model="checkboxValue" @change="change">
              <van-cell-group>
                <van-cell v-for="(item, index) in columnsData" :key="index" :title="item.label" clickable @click="toggle(index)">
                  <template #right-icon>
                    <div @click="toggle(index)">
                      <van-checkbox ref="checkboxes" :name="item.value" />
                    </div>
                  </template>
                </van-cell>
              </van-cell-group>
            </van-checkbox-group>
          </div>

        </van-popup>
        <!-- 处置时间 -->
        <!-------------------------------------------->
        <div class="btn-box">
          <van-button style="margin-left:10px" round block type="info" native-type="submit">保 存</van-button>
        </div>
      </van-form>
    </div>

  </div>
</template>
    <script>
import { getLoginUserAvailableDepForOption, getLoginUserAvailableUserForOption } from '@/api/user'
import { getDisposalUserApi,addAuditDealUserApi } from '@/api/audit'
import moment from 'moment'
export default {
  data() {
    return {
      checkedAll: false, //全选-选中为true,不选中为false
      searchVal: '', //绑定搜索的值
      checkboxValue: [], //选中人员绑定的值
      height: localStorage.getItem('height'),
      columnsData: [
       
      ], //人员数组
      tempColumnsData:[],//做搜索临时存放的数组
      userShow: false, //处置人员显示下拉列表
      form: {
        dealUserName: '', //处置人员name
        dealUserId: '', //处置人员id
        remarks:'',//备注
      }
    }
  },
  created() {
    // 获取处置人员接口
    getDisposalUserApi({ depId: this.$route.query.dealDeptId }).then(res => {
      let tempDep = res.data.map(item => {
        return {
          value: item.id,
          label: item.name
        }
      })
      this.columnsData = tempDep
      this.tempColumnsData = tempDep
    })
  },
  watch: {
    
    // checkboxValue值表示人员选了多少个的数组,这里监听为了下面所有人员勾选后自己把全选按钮勾上
    checkboxValue: {
      handler(val) {
        if (val.length && val.length === this.columnsData.length) {
          this.checkedAll = true
        } else {
          this.checkedAll = false
        }
      },
      immediate: true
    }
  },
  methods: {
    // 搜索
    search(val) {
      if (val) {
        this.columnsData = this.columnsData.filter(item => {
          return item.label.indexOf(val) > -1
        })
      } else {
        this.checkedAll = false
        this.form.dealUserName = ''
        this.form.dealUserId = ''
        // this.checkboxValue = []     --》不能清除掉，第一次选了之后删掉搜索在搜索另外一个人名字，如果加上这段代码上一次选的人就被清除了。
        this.columnsData = this.tempColumnsData
      }
    },
    cancel() {
      this.userShow = false
    },
    // 当绑定值变化时触发的事件
    change() {},
    // 人员选择完之后点击确定
    onConfirm() {
      this.userShow = false;//关闭下拉选择人员框
      // this.form.dealUserName = this.checkboxValue;
      console.log('我选择了哪些人',this.checkboxValue)
      let temp = []
      this.checkboxValue.forEach(item=>{
        this.columnsData.forEach(item1=>{
          if(item==item1.value){
            temp.push(item1.label)
          }
        })
      })
      console.log('查找的儿呢',temp)
      this.form.dealUserId = this.checkboxValue.join(',')
      this.form.dealUserName = temp.join(',')
    },
    // 点击全选
    toggleAll() {
      this.$refs.checkboxGroup.toggleAll(this.checkedAll)
    },
    // 点击下面的人员名字选中既绑定对应的value值数组
    toggle(index) {
      this.$refs.checkboxes[index].toggle()
    },
    // 提交
    onSubmit(value) {
      let params = Object.assign(this.form, { mainId: this.$route.query.id })
      addAuditDealUserApi(this.form).then(res => {
        if (res.data) {
          this.$toast('保存成功')
          this.$router.push({ path: '/auditList' })
        }
      })
    },
    // 返回稽查列表
    onClickLeft() {
      this.$router.go(-1)
    },
    chooseUser() {
      this.userShow = true
    }
  }
}
</script>
    
    <style lang='scss' scoped>
.container {
  width: 100%;
  overflow: hidden;
  font-size: 15px;
  ::v-deep .van-nav-bar .van-icon {
    color: black;
  }
  ::v-deep .van-nav-bar__text {
    color: black;
  }
}
.form-box {
  margin-top: 10px;
  background: #ffffff;
}
.btn-box {
  padding: 40px 20px 40px;
  display: flex;
}
</style>