el-form-item中的样式和验证

红太狼 2022-12-17 10:59 286阅读 0赞

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xlbW9udHJlZV9mdQ_size_16_color_FFFFFF_t_70][]

想要实现上面那种格式，然后又对input框中的值进行验证，要求都必须是数字。

代码：

<el-dialog title="配置报警值" :visible.sync="peiVisible1" width="40%" class="dialoge_black">
                <el-form ref="peiform1" :model="peiform1" :rules="rules" label-width="120px">
                    <el-form-item label="监控参数:" prop="paramname">{
       {peiform1.paramname}}</el-form-item>
                    <el-form-item label="报警选项:">
                            <el-checkbox label="工作状态" v-model="peiform1.warnstatus" style="display:block;"></el-checkbox>
                    </el-form-item>
                    <el-form-item prop="fixnumber" label-width="0" style="margin-left:120px;" class="yi_chang">
                        <el-checkbox v-model="peiform1.fixnumberstatus"></el-checkbox>  
                        异常状态值    
                        <el-input v-model.number="peiform1.fixnumber" class="input"></el-input>
                    </el-form-item>
                    <el-form-item prop="minnumber" label-width="0" style="margin-left:120px;display:inline-block;" class="yi_chang">
                        <el-checkbox v-model="peiform1.numberstatus"></el-checkbox>  
                        参数界限值    
                        <el-input v-model.number="peiform1.minnumber" class="input"></el-input> - 
                    </el-form-item>
                    <el-form-item prop="maxnumber" style="display:inline-block;" label-width="0">
                        <el-input v-model.number="peiform1.maxnumber"  class="input"></el-input>
                    </el-form-item>
                </el-form>
                <span slot="footer" class="dialog-footer">
                    <el-button type="primary" @click="savePei1('peiform1')" class="bg_black">确 定</el-button>
                    <el-button @click="peiVisible1 = false">取 消</el-button>
                </span>
            </el-dialog>

rules: {
             fixnumber: [{ type: 'number', message: '请填写数字'}],
             minnumber: [{ type: 'number', message: '请填写数字'}],
             maxnumber: [{ type: 'number', message: '请填写数字'}],
          },

以上的代码就可以了，需要灵活对待。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xlbW9udHJlZV9mdQ_size_16_color_FFFFFF_t_70]: /images/20221122/30fc6e32ee8948cc8c9d964086041d81.png