初始下拉选择如（图一）

最终效果如（图二）

思路

左边是输入框，可以进行模糊查询，右边图标进行选择（简单就是根据input输入值进行过滤）

具体代码

<template>
  <div class="dh-search" :style="dhSearchStyle">
    <input
      v-model.trim="pickerValue"
      :placeholder="placeholder"
      class="picker-item-input"
      :class="pickerValue?'t-color-dark':'t-color-placeholder'"
      @input.stop="bindkeyinput"
    />
    <picker
      class="picker-box flex-box flex-ver-v"
      @change.stop="bindchange"
      :value="index"
      :range-key="pickerLab"
      :range="dropDownData"
    >
      <van-icon class="picker-icon t-color-placeholder" name="arrow-down" />
    </picker>
  </div>
</template>
<script>
export default {
  name: 'dhSearch',
  props: {
    // 下拉框数据来源
    list: {
      type: Array,
      default () {
        return []
      }
    },
    // 组件宽度
    width: {
      type: String,
      default: '392rpx'
    },
    // 组件高度
    height: {
      type: String,
      default: '72rpx'
    },
    // 提示语
    placeholder: {
      type: String
    },
    // 下拉选择展示的文字
    selectLabel: {
      type: String
    },
    // list value字段
    pickerVal: {
      type: String,
      default: 'driverCode'
    },
    // list label字段
    pickerLab: {
      type: String,
      default: 'plateNum'
    }
  },
  data () {
    return {
      // 输入框值
      pickerValue: this.selectLabel,
      // 下拉框下标
      index: 0,
      // 下拉框数据
      dropDownData: this.list
    }
  },
  computed: {
    dhSearchStyle () {
      return `width:${this.width};height:${this.height}`
    }
  },
  watch: {
    list: {
      handler (val) {
        this.dropDownData = val
      }
    },
    selectLabel: {
      handler (val) {
        this.pickerValue = val
      }
    }
  },
  methods: {
    // 文本框输入事件
    bindkeyinput (event) {
      console.log('文本框输入事件', event)
      const value = event.mp.detail.value
      const list = JSON.parse(JSON.stringify(this.list))
      const array = list.filter(item => item[this.pickerLab].indexOf(value) !== -1).map(item => {
        const result = JSON.parse(JSON.stringify(item))
        return result
      })
      this.dropDownData = array
    },
    // 下拉框选择事件
    bindchange (event) {
      const idx = event.mp.detail.value
      // const val = this.dropDownData[idx][this.pickerVal]
      this.index = idx
      // this.dropDownData = this.list
      this.pickerValue = this.dropDownData[idx][this.pickerLab]
      // console.log('下拉框选择事件', event, this.dropDownData)
      this.$emit('action', { index: idx, list: this.dropDownData })
    }
  }
}
</script>
<style lang="scss">
.dh-search {
  margin-left: 30rpx;
  background: #f8f8f8;
  border-radius: 40rpx;
  font-size: 14px;
  line-height: 80rpx;
  padding-left: 30rpx;
  display: flex;
  .picker-item-input {
    margin-left: 10rpx;
    width: 80%;
    height: 100%;
    line-height: 60rpx;
    font-size: 14px;
  }
  .picker-box {
    width: 30%;
    height: 100%;
    justify-content: flex-end;
    .picker-icon {
      margin-right: 35px;
      width: 100%;
      height: 72rpx;
    }
  }
}
</style>

具体使用

<dh-search
            placeholder="请选择运送物资"
            :list="materialList"
            @action="dropDownChange($event,'materialCode')"
            pickerLab="materialCategoryName"
            pickerVal="materialCode"
            :selectLabel="autoQueueInfo.materialCategoryName"
          />

参考了雨vs夜

相关文章

axios二次封装，接口统一存放,满足RESTful风格

keep-alive不能缓存多层级路由(vue-router)菜单问题解决

基于ElementUi再次封装基础组件文档