复式自定义输入框

1.实现复式输入框 （新增 查看）

<el-form class="drawer">
    <el-form-item label="换算信息" prop="unitRate" v-if="isMaterials" :required="isMaterials"
    :label-width="isMaterials? '102px':'80px'">
    <el-input placeholder="系数" v-model="formData.unitRate" class="input_with_select_price" type="number">
    <template slot="append">
        <el-select
            v-model="formData.sdUnit"
            placeholder="小单位"
            clearable
            filterable
            :filter-method="(query) => {
                filterMethod(query, 'SD_UNIT');
            }"
            @focus="filterMethod('', 'SD_UNIT')">
                <el-option
                    v-for="item in DICTFilter.SD_UNIT"
                    :key="item.dataCode"
                    :label="item.dataName"
                    :value="item.dataCode">
                </el-option>
        </el-select>
        <div class="separator">/</div>
        <el-select> xxxxx 省略。。。</el-select>
    </template>
    </el-input>
    </el-form-item>
 </el-form>

同时校验三项均为必填

    rules:{
        unitRate: [ // 校验单位换算信息整合
            {
                required: this.isMaterials,
                message: '必填项不能为空',
                trigger: "blur",
                validator: (rule, value, callback) => {
                    if(!this.formData.unitRate || !this.formData.sdUnitBig || !this.formData.sdUnit){
                        callback(new Error('必填项不能为空'));
                    }else{
                        callback();
                    }
                }
            }
        ],
    }

//--- 复式输入框下拉集合样式
.drawer{
    .el-form-item{
        &.is-error{
            .input_with_select_price{
                border-color: #F56C6C;
            }
        }
    }
    .input_with_select_price{
        display: flex;
        border: 1px solid #DCDFE6;
        border-radius: 4px;
        /deep/ .el-input__inner{
            flex: 1;
            border-width: 0 1px 0 0;
        }
        /deep/ .el-input-group__append{
            background-color: #fff;
            padding:0px;
            width: 60%;
            display: table;
            border: 0;
            .el-select{
                width: 50%;
                display: table-cell;
                .el-input__inner{
                    border: 0;
                }
            }
        }
        &.is-disabled{
            /deep/ .el-input-group__append{
                background-color: #f5f7fa;
            }
        }
    }
}
// 单位换算信息 end-----

2.实现inputNumber后面固定单位，且单位长度不固定，仅可输入数字，不可编辑单位

实现思路： 因为input-number不支持slot插槽 修改起来麻烦，则更改拼接样式，包含两者的元素设置border input去除border等

<el-table :data="formData[tableName]" class="chgs_table_number">
    <el-table-column 
        prop="price"
        label="最小单位价格"
        align="right"
        width="200">
        <template slot-scope="scope">
            <div :class="['priceSpe',disabled?'priceSpeDisabled':'']">
                <el-input-number
                    :precision="precision"
                    :min="0"
                    :controls="false"
                    v-model="scope.row.price"
                    :disabled="disabled"
                    @blur="handleBlurPrice($event, scope.row)">
                </el-input-number>
                <span class="suffix_fixed" id="suffix_fixed">{{formData.sdUnit}}</span>
            </div>
        </template>
    </el-table-column>
</el-table>

//  表格inputNumber+单位集合样式处理
.chgs_table_number{
    .priceSpe{
        border:1px solid #DCDFE6;
        border-radius: 4px;
        display: flex;
        align-items: center;
        height: 28px;
        line-height: 28px;
        margin: 4px 0;
        padding-right: 10px;
        &.priceSpeDisabled{
            color: #a5a3a3;
            background-color: #f5f7fa;
            border-color: #e4e7ed;
        }
        /deep/ .el-input-number {
            flex: 1;
            .el-input__inner{
                border: 0;
                padding-right: 4px;
                background: transparent;
            }
        }
    }
}