1.源码

<template><view><view :class="[getPickerName ? '' : 'is-placeholder']" @click="onShowPicker">{{ getPickerName || placeholder }}</view><u-picker v-if="showStatus" :show="show" :columns="columns" :key-name="keyName" @cancel="show = false" @confirm="onConfirm" /></view>
</template><script>
export default {name: 'HgPicker',props: {value: {type: [String, Number],default: ''},columns: {type: Array,default() {return []}},keyName: {type: String,default: 'label'},placeholder: {type: [String, Number],default: '请选择'},disabled: {type: Boolean,default: false}},data() {return {show: false,showStatus: true}},computed: {getPickerName() {if (this.columns.length) {for (let item of this.columns[0]) {if (item.id === this.value) {return item[this.keyName]}}}return ''}},methods: {onShowPicker() {if (!this.disabled) {this.show = true}},onConfirm({ indexs, value, values }) {this.$emit('input', value[0].id)this.$emit('change', value[0].id)this.$emit('changes', indexs[0])this.show = false},reload() {this.showStatus = falsethis.$nextTick(() => {this.showStatus = true})}}
}
</script><style lang="scss" scoped>
.is-placeholder {color: #b5afaf;
}
</style>

2.使用方法
    <hg-picker v-model="formModel.mode" :columns="capacityModeList" style="flex:1" />