el-input 输入框只能输入数字且大于0的两种方式

1. 使用 type 类型为 number 的方法

1. 如果使用max、min属性，则必须同时加上type=“number”；但输入框尾部会出现一个上下箭头，min和max只能控制用箭头输入的最大值最小值，对键盘打字输入是限制不住的。
2. 推荐在表单输入业务时使用。

• min：最小值为0，但对键盘输入无效；如果不显示上下箭头，可以不写。
• type: 让其只能输入数字
• oninput：如果输入的值小于0，让它为0
• 实现代码如下

<el-form-item label="数量" prop="number" align="center">
	<el-input
		clearable
		v-model="ruleForm.number"
		type="number"
		oninput="if(value<0)value=0"
	></el-input>
	// 也可以使用 οninput="if(value<0)value=''" 不会有数字0，好看点
</el-form-item>

// 让输入框上下箭头不显示
<style lang="scss" scoped>
	::v-deep input::-webkit-outer-spin-button,
	::v-deep input::-webkit-inner-spin-button {
		-webkit-appearance: none !important;
	}
	::v-deep input[type='number'] {
	-moz-appearance: textfield !important;
	}
</style>

2. 使用 InputNumber 计数器

使用计数器缺点：不能使用 clearable 一键清除属性；在表单中使用，还会导致表单校验失效。

1. 在表格输入框时使用。

• 实现代码如下

<el-table-column prop="applyNumber" label="数量" align="center" width="150px">
	<template #default="scope">
		<el-input-number
			v-model="scope.row.applyNumber"
			:controls="false"
			:min="0"
		/>
	</template>
</el-table-column>

注：要让加减号不显示，必须设置 :controls=“false”

2. 在表单中使用计数器

• style=“width: 100%”，保证加减号不显示时，左右不会留空白
• precision：数值精度
• value-on-clear (> 2.2.0)：当输入框被清空时显示的值

<el-form-item label="金额" prop="number">
	<el-input-number
		v-model.number="ruleForm.number"
		:precision="2"
		:controls="false"
		style="width: 100%"
		placeholder="请输入金额"
		:disabled="pageType == 'detailPage'"
		:min="0"
		:value-on-clear="0"
		>
	</el-input-number>
</el-form-item>