soc_app/src/components/selectCell/index.vue

<template>
  <div class="select-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"/>
    <van-popup v-model="showPicker" round lazy-render position="bottom" :close-on-popstate="true" get-container="#app">
      <van-picker
        v-bind="$attrs"
        show-toolbar
        :value-key="prop.label"
        v-model="selected"
        :columns="columns"
        @confirm="pickerConfirm"
        confirm-button-text="确定"
        @cancel="cancelPicker"
      />
    </van-popup>
  </div>
</template>

<script>
import {getDict} from "@/api/toConsult";
export default {
  props:{
    //禁用
    disabled:{
      type: [Boolean,String],
      default: false,
    },
    //双向绑定的数据
    value:{
      type: [String,Number],
      default: null,
    },
    required:{
      type: [Boolean,String],
      default: false,
    },
    border:{
      type: [Boolean,String],
      default: true,
    },
    //标题
    title:{
      type: String,
      default: null,
    },
    //父组件给的列表数据
    dataList:{
      type: Array,
      default: ()=>[],
    },
    isAll:{
      type: Boolean,
      default: false,
    },
    //自定义字段
    prop:{
      type: Object,
      default: ()=>(
        {
          label:'dictLabel',
          value:'dictValue'
        }
      ) ,
    }
  },
  data(){
    return{
      showPicker:false,
      label:'无',
    }
  },
  computed:{
    columns(){
      console.log(this.dataList,'datalist')
      if(this.isAll){
        let obj = {};
        obj[this.prop.label] = '全部';
        obj[this.prop.value] = null;
        return [obj,...this.dataList];
      }
      return this.dataList;
    },
    selected(){
      if(!this.value) {
        this.label = '无';
        return null;
      }
      let val;
      this.columns.forEach(v=> {
        if (v[this.prop.value] === this.value) {
          val = v;
          this.label = v[this.prop.label];
        }
      });
      return val;
    },
  },
  methods:{
    cancelPicker(){
      this.showPicker = false;
    },
    pickerConfirm(val){
      if(!val) return;
      this.label = val[this.prop.label];
      this.showPicker = false;
      this.$emit('change',val[this.prop.value])
    },
    clickItem(){
      this.showPicker = true;
    },
  },
  model:{
    prop: 'value',
    event: 'change',
  }
}
</script>

<style lang="scss" scoped>
.select-cell{
  position: relative;
}
.select-cell::after{
  position: absolute;
  box-sizing: border-box;
  content: ' ';
  pointer-events: none;
  right: 4.266667vw;
  bottom: 0;
  left: 4.266667vw;
  border-bottom: 1px solid #ebedf0;
  -webkit-transform: scaleY(.5);
  transform: scaleY(.5);
}
.van-cell__label{
  margin: 0;
}
</style>