van-picker下拉框添加搜索和分页功能

<template>
  <div class="content">
    <div class="picker">
      <label class="rediconc" v-show="pickerObj.isRequired">*</label>
      <van-field
        v-model="pickerval"
        is-link
        readonly
        :label="pickerObj.title"
        :placeholder="pickerObj.placeholder"
        @click="onClick"
      />
    </div>
    <div class="bigblack" v-show="show" @click.self="hiddenshow">
        <!-- 搜索start -->
        <van-search placeholder="请输入" v-model="goodsNameValue" @input='getMerchantGoods' />
        <!-- 搜索 end-->
        <!-- 分页start -->
        <van-pagination v-model="pageNum" :total-items="total" 
          :show-page-size="4" 
          @change="changePageFun"
          force-ellipses
        >
          <template #prev-text><van-icon name="arrow-left" /></template>
          <template #next-text><van-icon name="arrow" /></template>
          <template #page="{ text }">{{ text }}</template>
        </van-pagination> 
        <!-- 分页end -->
        <van-picker
          title="请选择"
          value-key="name"
          show-toolbar
          :columns="columns"
          @confirm="onConfirm"
          @cancel="onCancel"
        />
    </div>
  </div>
</template>

<script>
import Picker from 'vant/lib/picker'
export default {
  props: ['pickerObj'],
  data() {
    return {
      pickerval: '',
      show: false,
      columns: [],
      merchantCode: '', 
      goodsNameValue:'',
      depNameShow:'',
      depColumnsSearch:[{
        name:'',
        val:''
      }],
      pageNum: 1,
      pageSize: 10,
      total:1
    }
  },
  components: {
    'van-picker': Picker,
  },
  created() {
    this.pickerval = this.pickerObj.thisValue
  },
  watch: {
    pickerObj: {
      handler(val) {
        this.pickerval = this.pickerObj.thisValue
        this.show = this.pickerObj.isShow
      },
      deep: true,
    }
  },
  mounted() {
   
    this.getMerchantGoods()
  },
  methods: {
    getMerchantGoods() {       
      // 获取列表columns         
      ......    
    },
    // 分页改变
    changePageFun(val){
      this.changePage = val
      this.getMerchantGoods()
    },
    loseblur() {},
    onClick() {
      this.show = true
      this.$emit('clickFn')
    },
    onConfirm(value, index) {
      this.show = false
      this.goodsNameValue = ''
      this.getMerchantGoods()
      this.pickerval = value.name
      this.$emit('fromChild', value)
    },
    onCancel() {
      this.show = false
      if (this.pickerval == '') {
      }
    },
    //隐藏遮罩
    hiddenshow() {
      this.show = false
    },
  },
}
</script>

<style lang="less" scoped>
.content {
  font-size: 15px;
  .picker {
    font-size: 15px;
    position: relative;
    border-bottom: 1px solid #eee;
    .rediconc {
      z-index: 99;
      position: absolute;
      left: 10px;
      top: 19px;
      color: #f00;
    }
    .van-cell {
      font-size: 15px;
      height: 46px;
      line-height: 46px;
      padding: 0px 10px 0 15px;
    }
    .custom-title {
      margin-left: 5px;
    }
    /deep/.van-field__label {
      margin-left: 5px;
      width: 110px;
      span {
        font-size: 15px;
      }
    }
    /deep/.van-field__control {
      text-align: right;
    }
    /deep/.van-icon {
      line-height: 46px;
    }
  }
  .bigblack {
    height: 100%;
    width: 100%;
    z-index: 999;
    position: fixed;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.2);
    .van-picker {
      position: fixed;
      bottom: 0;
      width: 100%;
      height: 50%;
    }
    .van-pagination{
      position: absolute;
      bottom: 0%;
      z-index: 99;
      width: 100%;
    }
    .van-search{
      position: relative;
      top: 44%;
      z-index: 9999;
    }
  }
}
</style>

引用

<searchPicker :pickerObj="vegetableType" @fromChild="vegetableTypeFunc"></searchPicker>

以下为 在data()方法中设置要传的值

 vegetableType:{
   isRequired: false, // false为非必填
   title: 'label名',
   placeholder: '请选择',
   type: 'text',
   selectList: [
     
   ],
   thisValue: '',  // 这个值用来返显
 },

赋值方法在methods中写：

vegetableTypeFunc(val){
  console.log(val)
},