ToB项目如何沉淀业务公共组件示例详解

 <el-select filterable remote :remote-method="querySearch">...</el-select>

{
    fieldName: 'id', // 后台字段名
    fieldTitle: 'id', // 展示的字段名
    isLabel: false, // 是否是选择以后展示在下拉框里的字段
    isValue: false, // 是否是选择以后要提交给后台的字段,
    isQuick: false, // 是否参与输入框的模糊查询（这是要解决既模糊搜名称也要模糊搜编码的需求）
    isSelectShow: false, // 是否在下拉选项内展示当前字段
}

props: {
  //是否禁用
 disabled: {
   type: Boolean,
   default: false
 },
 // 是否多选
 multiple: {
   type: Boolean,
   default: null
 },
 // 要解析的模板
 temp: {
 },
 // 传入的默认值
 defaultVal：{
   type: [String,Number,Array],
   default: null
 }
}

<el-select filterable remote :remote-method="querySearch">
// 模板表头循环
<el-option
    disabled
    label="标题"
    value="title"
    >
    <div class="flex jus-between">
      <div
        class="p-l-5 p-r-5 w-125px text-over"
        v-for="item in selectHeader"
        :key="item.fieldName"
      >
        {{ item.fieldTitle }}
      </div>
    </div>
</el-option>
// 真正的数据循环
<el-option
    v-for="(record, index) in tableData"
    :label="record[labelKey]"
    :value="record[valueKey]"
    :key="index"
  >
    <div class="flex jus-between">
      <div
        class="p-l-5 p-r-5 w-125px text-over"
        v-for="item in selectHeader"
        :key="item.fieldName"
      >
        <span>
          {{ record[item.fieldName] }}
        </span>
      </div>
    </div>
</el-select>
computed: {
// 需要在选项内展示的列
  selectHeader () {
      return this.temp.filer(v => v.isSelectShow)
  }
}

 <div class="refer-modal-box">
    <div
      @click.stop.self="showReferModal"
      class="iconfont icon-loadmore cursor loadmore"
    />
    <el-select
    ...
 ...
 .refer-modal-box{
  padding-right: 30px;
  position: relative;
  // 这里top为1px的原因是input高度比总高度低1像素，通过定位来拉伸高度。
  .loadmore{
    width: 30px;
    color: #999;
    text-align: center;
    border-radius: 4px;
    border: 1px solid #dcdfe6;
    position: absolute;
    top: 1px;
    bottom: 0;
    right: 0;
    margin: auto;
    box-sizing: border-box;
    border-left: 0;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }
  // 相邻元素选择器定义input样式，与弹窗图标一起拼成一个完整边框
  .loadmore ~ .el-select:deep(input){
    border-right: none;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-color: #dcdfe6;
  }
  .loadmore:hover{
    color: #2e79ef;
  }
}