elementui 金额控件

Element UI 提供了 el-input 组件，可以通过设置 type 属性为 "number" 或 "tel" 来限制只能输入数字，然后再结合 el-form 组件进行表单验证。以下是一个简单的例子：

<template>
  <el-form ref="form" :model="formData" :rules="rules">
    <el-form-item label="金额" prop="amount">
      <el-input v-model.number="formData.amount" type="tel" placeholder="请输入金额"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm">提交</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  data() {
    return {
      formData: {
        amount: null
      },
      rules: {
        amount: [
          { required: true, message: '请输入金额', trigger: 'blur' },
          { pattern: /^\d+(\.\d{1,2})?$/, message: '金额格式不正确', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    submitForm() {
      this.$refs.form.validate(valid => {
        if (valid) {
          // 表单验证通过，提交数据
          console.log(this.formData.amount)
        } else {
          // 表单验证失败
          console.log('验证失败')
        }
      })
    }
  }
}
</script>

在上面的例子中，我们通过设置 type 属性为 "tel" 来限制只能输入数字，然后使用 v-model.number 将输入框的值转化为数字类型。接着定义了一个表单验证规则 rules，其中设置了两个验证规则：必填和金额格式不正确，使用正则表达式限制只能输入整数或小数，小数点后最多保留两位。最后在提交表单时，调用 this.$refs.form.validate 方法进行表单验证，如果验证通过，就可以提交数据了。