后端数据库设计:1.类型字段 2.用户输入的其它信息记录字段
前端:
<el-form-item label="性能要求类型">
<el-radio-group v-model="form.performanceRequirementType">
<el-radio
v-for="dict in performanceRequirementTypeOptions"
@change="settlementChange(dict)"
:key="dict.dictValue"
:label="parseInt(dict.dictValue)"
>{{dict.dictLabel}}</el-radio>
</el-radio-group>
<el-radio
@change="settlementChange({ dictValue: '99' })"
v-model="form.performanceRequirementType"
label="99"
style="margin-left: 20px"
>其他:
<el-tooltip class="item" effect="dark" :content="form.performanceRequirementOther" placement="top-start">
<el-input
maxlength="225"
:disabled="form.performanceRequirementType !== '99'"
class="item"
v-model="form.performanceRequirementOther"
></el-input>
</el-tooltip>
</el-radio>
</el-form-item>
样式:
<style lang="scss">
.item {
.input_padding {
padding-left: 0px !important;
}
.el-input__inner {
color: #000000 !important;
height: 14px !important;
border-radius: 0px !important;
border-bottom: 1px solid #000000 !important;
border-top: 0px;
border-left: 0px;
border-right: 0px;
background-color: #ffffff !important;
}
.item__txt {
box-sizing: border-box;
border: 1px solid transparent;
width: 100px;
line-height: 24px;
padding: 0 8px;
}
.item__txt--hover {
border: 1px solid #dddddd;
border-radius: 4px;
cursor: text;
}
.el-input--mini {
font-size: 13px !important;
}
i {
font-size: 13px !important;
/*line-height: 26px !important;*/
}
.item__input {
display: none;
width: 100px;
}
}
</style>