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;
}
}