soc_app/src/components/SearchSelectCell/index.vue

<template>
  <div class="date-cell">
    <van-cell v-if="disabled" :required="required" :title="title" :label="label"/>
    <van-cell v-else  :required="required" :title="title" :label="label" is-link  @click="clickItem"/>
    <Select-picker
      :options="dataList"
      v-bind="$attrs"
      :showPicker="showPicker"
      :title="title"
      :value-key="prop.label"
      :value="selected"
      @confirm="pickerConfirm"
      @cancel="cancelPicker">
    </Select-picker>
  </div>
</template>

<script>
import SelectPicker from './SelectPicker.vue'
export default {
  components:{
    SelectPicker
  },
  props:{
    //禁用
    disabled:{
      type: [Boolean,String],
      default: false,
    },
    //双向绑定的数据
    value:{
      type:Array,
      default: ()=>[],
    },
    required:{
      type: [Boolean,String],
      default: false,
    },
    //标题
    title:{
      type: String,
      default: null,
    },
    //父组件给的列表数据
    dataList:{
      type: Array,
      default: ()=>[],
    },
    //自定义字段
    prop:{
      type: Object,
      default: ()=>(
        {
          label:'label',
          value:'value'
        }
      ) ,
    }
  },
  data(){
    return{
      showPicker:false,
      label:'',
    }
  },
  computed:{
    columns(){
      return this.dataList;
    },
    selected(){
      let val;
      this.columns.forEach(v=> {
        if (v[this.prop.value] === this.value) {
          val.push(v[this.prop.label]);
          this.label = val.toString();
        }
      });
      return val;
    },
  },
  methods:{
    cancelPicker(){
      this.showPicker = false;
    },
    pickerConfirm(val){
      console.log(val,'234')
      this.label = val.map(v=>v[this.prop.label]).toString();
      this.showPicker = false;
      let arr = val.map(v=>v[this.prop.value]);
      this.$emit('change',arr)
    },
    clickItem(){
      this.showPicker = true;
    },
  },
  model:{
    prop: 'value',
    event: 'change',
  }
}
</script>

<style lang="scss" scoped>
.van-cell__label{
  margin: 0;
}
</style>