效果：

所具備的功能：

　　1、支援分頁，這裡是介面支援的分頁。推薦：vue基於vant封裝上拉載入/下拉重新整理元件ListScroller

　　2、支援搜尋，這個也是介面支援的。搜尋支援防抖

　　3、多選（可擴充套件成支援單選）

　　4、通過sync修飾符繫結父子元件傳參

components/SelectUserPopup.vue

<template>
  <div class="select-user-popup">
    <van-popup v-model="isShow" position="bottom" :style="{ height: '100%' }"
 
>
      <div class="search">
        <van-icon name="cross" @click="handleClose" />
        <van-search v-model="searchValue" :placeholder="params.placeholder||'輸入姓名'" @input='handleInput' />
      </div>
      <list-scroller ref="listScrollerRef" height='-144' @on-pulldown-loading
 
="refrash" @on-pullup-loading="loadMore">
        <van-checkbox-group v-model="result">
          <van-checkbox :name="item.id" v-for="item in userOptions" :key="item.id">
            {{item.name}}{{item.empNo?`（${item.empNo}）`:''}}
            <template #icon="props">
              <
 
div :class="props.checked ? 'activeIcon' : 'inactiveIcon'"><span></span></div>
            </template>
          </van-checkbox>
        </van-checkbox-group>
      </list-scroller>
      <div class="btns">
        <van-button @click="handleClose">取消</van-button>
        <van-button @click="handleConfirm" native-type="button">確定</van-button>
      </div>
    </van-popup>
  </div>
</template>
<script>
/*
  使用：
    <SelectUserPopup :selected.sync="page1Data.visitStaffList" :show.sync='isShowVisitStaffPopup' :params='visitStaffPopupParams'></SelectUserPopup>

      isShowVisitStaffPopup: false, // 彈層顯隱
      visitStaffPopupParams: {
        queryParams: { page: 1, pageSize: 20, keyWord: '' },
        requestFn: getVisitStaffOptionsApi, // 介面函式
        placeholder: '輸入姓名或工號'
      }

*/
import ListScroller from '@/components/ListScroller'
import debounce from 'lodash.debounce'
export default {
  watch: {
    selected: {
      handler(selected) {
        this.result = selected // 場景：當進入到彈層中時，將值回顯
      },
      immediate: true
    }
  },
  computed: {
    isShow: {
      get() {
        this.show && this.handleInit()
        return this.show
      },
      set(flag) {
        this.$emit('update:show', flag)
      }
    }
  },
  props: {
    selected: { type: Array, require: true }, // script
    show: { type: Boolean, require: true }, // css
    params: { type: Object, require: true } // template
  },
  data() {
    return {
      searchValue: '', // 搜尋框內容
      queryParams: this.params.queryParams, // 介面引數
      userOptions: [], // 使用者列表
      totalRecords: 0, // 總條數
      result: [] // 回顯選中的值
    }
  },
  methods: {
    // 初始化（開啟彈層時執行）
    handleInit() {
      this.result = this.selected // 回顯選中的值   場景：當選中一項後點擊取消，再次進入正常回顯
      this.searchValue = '' // 清空輸入框
      this.handleInput('') // 重新整理
    },
    // 【取消】按鈕
    handleClose() {
      this.isShow = false
    },
    // 【確認】按鈕
    handleConfirm() {
      this.$emit('update:selected', this.result)
      this.handleClose()
    },
    // 搜尋框input事件
    handleInput(val) {
      this.$refs.listScrollerRef.$el.scrollTop = 0
      this.queryParams.page = 1
      this.queryParams.keyWord = val
      this.getUserOptions()
    },
    // 拜訪人（員工）列表
    async getUserOptions() {
      const {
        queryParams,
        params: { requestFn }
      } = this
      const { success, data, totalRecords } = await requestFn(queryParams)
      if (success) {
        this.totalRecords = totalRecords
        if (this.queryParams.page === 1) {
          this.userOptions = data
        } else {
          this.userOptions.push(...data)
        }
      }
    },
    // 重新整理
    refrash(cb) {
      this.queryParams.page = 1
      this.getUserOptions().then(() => cb && cb())
    },
    // 載入更多
    loadMore(cb) {
      const { userOptions, totalRecords } = this
      if (totalRecords > userOptions.length) {
        this.queryParams.page++
        this.getUserOptions().then(() => cb && cb())
      } else {
        cb && cb()
      }
    }
  },
  created() {
    this.getUserOptions()
    this.handleInput = debounce(this.handleInput, 200) // 搜尋框防抖
  },
  components: { ListScroller }
}
</script>

　　css

<style lang="less" scoped>
.select-user-popup {
  /deep/ .van-popup {
    box-sizing: border-box;
    .search {
      display: flex;
      align-items: center;
      padding: 4px 15px;
      box-sizing: border-box;
      > .van-icon {
        width: 30px;
        color: #333333;
        font-size: 20px;
      }
      .van-search {
        flex: 1;
        padding: 0;
        height: 36px;
        border-radius: 18px;
        overflow: hidden;
        background-color: #f3f6f9;
        .van-search__content {
          .van-icon {
            color: #8e8e93;
          }
          .van-field__control {
            font-size: 17px;
            color: #b5b5b5;
          }
        }
      }
    }
    .van-checkbox-group {
      .van-checkbox {
        margin-top: 20px;
        padding: 0 15px;
        .van-checkbox__label {
          margin-left: 20px;
          font-size: 16px;
          word-break: break-all;
        }
        // 選中和未選中樣式-start
        .activeIcon {
          width: 18px;
          height: 18px;
          border: 2px solid #198cff;
          border-radius: 50%;
          box-sizing: border-box;
          display: flex;
          align-items: center;
          justify-content: center;
          > span {
            display: block;
            width: 10px;
            height: 10px;
            background: #198cff;
            border-radius: 50%;
          }
        }
        .inactiveIcon {
          width: 18px;
          height: 18px;
          border: 2px solid #e0e5f5;
          border-radius: 50%;
          box-sizing: border-box;
        }
        // 選中和未選中樣式-end
      }
    }
    .btns {
      background-color: #fff;
      display: flex;
      justify-content: space-between;
      position: fixed;
      width: 100%;
      box-sizing: border-box;
      bottom: 47px;
      padding: 0 15px;
      > .van-button {
        width: calc(50% - 20px);
        height: 38px;
        line-height: 38px;
        border-radius: 19px;
        font-size: 14px;
        text-align: center;
      }
      > .van-button:first-child {
        background-color: #e0e5f5;
        color: #374e64;
      }
      > .van-button:last-child {
        background-color: #1288fe;
        color: #fff;
      }
    }
  }
}
</style>

使用：

　　引入、註冊：

    import SelectUserPopup from '@/components/SelectUserPopup'

      components: { SelectUserPopup }