前端实现radio+其它自定义输入选项

发布时间 2023-06-30 11:51:25作者: 雨后丶云初霁

后端数据库设计: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>