soc_app/src/components/selectCell/index.vue

<template>
  <div class="select-cell">
    <van-cell
      v-if="disabled"
      :required="required"
      :border="border"
      :title="title"
      :value="isRow?label:null"
      :label="!isRow?label:null" />
    <van-cell
      v-else
      :required="required"
      :title="title"
      :border="border"
      :value="isRow?label:null"
      :label="!isRow?label:null"
      is-link
      @click="clickItem"/>
      <!-- :label="!isRow?label:null" -->
    <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: false,
    },
    //标题
    title:{
      type: String,
      default: null,
    },
    //父组件给的列表数据
    dataList:{
      type: Array,
      default: ()=>[],
    },
    //是否显示全部选项
    isAll:{
      type: Boolean,
      default: false,
    },
    //单行显示或者多行显示
    isRow:{
      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;
        if(this.dataList)
        { // 如果 this.dataList 为null undefine 解构会报错
          return [obj,...this.dataList];
        }
        else
        {
          return [obj]
        }
      }
      return this.dataList;
    },
    selected(){
      if(!this.value) {
        if(this.isAll){
          this.label = '全部';
          return null;
        }
        this.label = '无';
        return null;
      }
      let val;
      console.log(this.label,'label1111');
      this.columns.forEach(v=> {
        if (v[this.prop.value] === this.value) {
          val = v;
          this.label = v[this.prop.label];
          console.log(this.label,'label2222');
        }
      });
      return val;
    },
  },
  methods:{
    cancelPicker(){
      this.showPicker = false;
    },
    pickerConfirm(val){
      console.log(val,'val')
      if(!val) return;
      this.label = val[this.prop.label];
      console.log(this.label,'label')
      this.showPicker = false;
      this.$emit('change',val[this.prop.value]);
      this.$emit('itemInfo',val)
    },
    clickItem(){
      this.showPicker = true;
    },
  },
  model:{
    prop: 'value',
    event: 'change',
  }
}
</script>

<style lang="scss" scoped>
.select-cell{
  position: relative;
  box-sizing: border-box;
  width: 100%;
  overflow: hidden;
  color: #323233;
  background-color: #fff;
}
.select-cell::after{
  position: absolute;
  box-sizing: border-box;
  content: ' ';
  pointer-events: none;
  right: 30px;
  bottom: 0;
  left: 30px;
  border-bottom: 1px solid #ebedf0;
  -webkit-transform: scaleY(.5);
  transform: scaleY(.5);
}
.van-cell__label{
  margin: 0;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  width: 260px;
}
</style>