zoukankan      html  css  js  c++  java
  • element输入框只能输入数字或小数保留两位小数

    <template>
      <div style="margin:10px;">
            <!-- 修改弹框 -->
        <el-dialog title="价格修改" :visible.sync="dialogFormVisible" width="30%" :close-on-click-modal="false">
           <el-form :model="priceForm" :rules="rules" ref="priceForm" label-width="90px" class="demo-ruleForm">
                 <el-form-item label="价格" prop="price">
                    <el-input
                        style="250px;"
                        oninput="value=value.indexOf('.') > -1?value.slice(0, value.indexOf('.') + 3):value"
                        v-model="priceForm.price"
                        >
                    </el-input>
                </el-form-item>
                <el-form-item>
                    <el-button style="float:right;" type="primary" @click="submitForm">确定</el-button>
                    <el-button style="float:right;margin-right:20px;" @click="cancelForm">取消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
      </div>
    </template>

    <script>
    export default {
        data() {
            return {
                priceForm:{
                    price:''
                },
                dialogFormVisible:false,
                rules: {
                    price: [
                        { required: true, trigger: 'change', message:'请输入价格'},
                        { pattern: /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/, message: '请输入正确的格式,可保留两位小数' }
                    ]
                },
            }
        },
        created () {
            
        },
        methods: {
            // 修改
            submitForm() {
                let params={
                    price:this.priceForm.price
                }
                this.$refs.priceForm.validate(valid => {
                        if (valid) {
                            updatePrice(params).then(res=>{
                                this.$message.success('保存成功')
                                this.dialogFormVisible = false
                                this.getTicketList()
                            })
                        } else {
                            console.log('error submit!!');
                            return false;
                        }
                });
            },
            cancelForm(){
                this.dialogFormVisible = false
            }
        },
    };
    </script>

    <style scoped>
    </style>
  • 相关阅读:
    sync 解释
    USB枚举详细过程剖析(转)
    内核早期内存分配器:memblock
    LTE:eMBMS架构
    对linux内核中jiffies+Hz表示一秒钟的理解
    android的USB MTP && USB CDC/USBnet(ECM, NCM, ACM) && USB gardget
    Install Shield中调用devcon自动安装硬件驱动程序
    利用 devcon.exe实现自动安装驱动(转)
    linux系统IO调度算法
    ZooKeeper原理详解及常用操作
  • 原文地址:https://www.cnblogs.com/xiaofang234/p/15654354.html
Copyright © 2011-2022 走看看