Vue2移动端（H5项目）项目基于vant实现select单选（支持搜索、回显、自定义下拉label展示功能）

一最终效果

在这里插入图片描述

二、参数配置

1、代码示例：

<t-selectv-model="formData.materialNo"valueKey="materialNo"showLabel="materialName"labelKey="label"label="判定品级"input-align="right"placeholder="请选择判定品级"right-icon="arrow":list="judgingMaterialList"/>

2、配置参数（t-select Attributes）继承van-field和van-picker的属性

参数	说明	类型	默认值
v-model	选中的valueKey值，页面展示是：showLabell	String	-
list	下拉数据源	Array	-
valueKey	下拉选择传给后台的key	String	key
labelKey	下拉选择显示label	String	label
isSearch	是否显示搜索框	Boolean	false
showLabel	van-field显示的文本	String	-
searchPlaceholder	搜索提示语	String	请输入搜索内容

3、events 事件

事件名	说明	返回值
emitVal	点击确定按钮时触发	选中的对象

三、源码

<template><div class="t-select"><van-field v-bind="fieldAttrs" :value="text" @click="clickField" /><van-popup v-model="isShow" position="bottom"><van-fieldv-model="searchVal":placeholder="searchPlaceholder"@input="search"v-if="isSearch"clearableinput-align="left"/><van-pickerv-on="$listeners"v-bind="$attrs"ref="picker"@change="changeVal":value-key="labelKey":columns="columnsData"show-toolbar@confirm="onConfirm"@cancel="isShow = false"/></van-popup></div>
</template><script>
export default {name: 'TSelect',props: {// 下拉数据源list: {type: Array,default: () => []},val: { default: null },// 下拉选择传给后台的keyvalueKey: {type: String,default: 'key',},// 下拉选择显示labellabelKey: {type: String,default: 'label',},// 是否显示搜索框isSearch: {type: Boolean,default: false},// van-field显示的文本showLabel: {type: String},searchPlaceholder: {type: String,default: '请输入搜索内容'}},model: {prop: 'val',event: 'emitVal'},data() {return {isShow: false,columnsData: this.list,searchVal: '',text: '',}},watch: {val: {handler(newVal) {// 赋值回显if (newVal) {const findItem = this.list.find((item) => item[this.valueKey] == newVal)this.text = findItem[this.showLabel || this.labelKey]}},deep: true,immediate: true},list: {handler(newVal) {this.columnsData = newVal},deep: true,immediate: true}},computed: {fieldAttrs() {return {readonly: true,clickable: true,...this.$attrs}}},methods: {clickField() {this.isShow = truethis.$emit('clickField', true)},onConfirm(value) {// console.log('点击确定', value)this.$emit('emitVal', value[this.valueKey], value)this.text = value[this.showLabel || this.labelKey]this.isShow = false},changeVal() {this.$emit('change')},clear() {this.text = ''this.$emit('emitVal', null)},// 搜索search(val) {// console.log('搜索', val)if (val) {this.columnsData = this.columnsData.filter(item => {return item[this.labelKey].indexOf(val) > -1})} else {this.columnsData = JSON.parse(JSON.stringify(this.list))}},}
}
</script>