<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;
复制代码
