The el-input input box can only enter numbers and are greater than 0 in two ways

1. Use the method whose type is number

1. If you use the max and min attributes, you must add type="number" at the same time; but there will be an up and down arrow at the end of the input box, min and max can only control the maximum and minimum values ​​entered by the arrows, and there are no restrictions on keyboard typing living.
2. It is recommended to use when entering business in the form.

• min: The minimum value is 0, but it is invalid for keyboard input; if the up and down arrows are not displayed, you can leave it blank.
• type: Let it only enter numbers
• oninput: If the input value is less than 0, let it be 0
• The implementation code is as follows

<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. Use the InputNumber counter

Disadvantages of using counters: You cannot use clearable to clear attributes with one click; if used in a form, it will also cause the form validation to fail.

1. Used in form input boxes.

• The implementation code is as follows

<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>

Note: To make the plus and minus signs not displayed, you must set: controls="false"

2. Using counters in forms

• style="width: 100%", to ensure that when the plus and minus signs are not displayed, there will be no blank space on the left and right
• precision: numerical precision
• value-on-clear (> 2.2.0): the value displayed when the input box is cleared

<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>