VUE-el-input-number 了解以及动态给max赋值
最近做项目，遇到el-input-number这个标签，按照官网操作基本功能实现了，可是遇到动态给"max"赋值的问题，在网上找了好多解决办法，最终将解决方式记录下来；
1、el-input-number说明
官网：Element - The world's most popular Vue UI framework
| value / v-model | 绑定值 | number | — | 0 |
| min | 设置计数器允许的最小值 | number | — | -Infinity |
| max | 设置计数器允许的最大值 | number | — | Infinity |
| step | 计数器步长 | number | — | 1 |
| step-strictly | 是否只能输入 step 的倍数 | boolean | — | false |
| precision | 数值精度 | number | — | — |
| size | 计数器尺寸 | string | large, small | — |
| disabled | 是否禁用计数器 | boolean | — | false |
| controls | 是否使用控制按钮 | boolean | — | true |
| controls-position | 控制按钮位置 | string | right | - |
| name | 原生属性 | string | — | — |
| label | 输入框关联的label文字 | string | — | — |
| placeholder | 输入框默认 placeholder | string | - | - |
¶Events
| 事件名称 | 说明 | 回调参数 |
|---|---|---|
| change | 绑定值被改变时触发 | currentValue, oldValue |
| blur | 在组件 Input 失去焦点时触发 | (event: Event) |
| focus | 在组件 Input 获得焦点时触发 | (event: Event) |
¶Methods
| 方法名 | 说明 | 参数 |
|---|---|---|
| focus | 使 input 获取焦点 | - |
| select | 选中 input 中的文字 | — |
2、基本使用
<!-- el-input-number -->
<el-input-number v-model='number' :min='1' :max='10'></el-input-number>
<!-- disabled -->
<el-input-number v-model='number' :min='1' :max='10' disabled></el-input-number>
<!-- step -->
<el-input-number v-model='stepNumber' :step='2'></el-input-number>
<!-- step + step-strictly -->
<el-input-number v-model='stepNumber' :step='2' step-strictly></el-input-number>
<!-- precision必须是一个非负整数，并且不能小于step的小数位数 -->
<el-input-number v-model='floatNumber' :precision='2' :step='0.02'></el-input-number>
<!-- size -->
<el-input-number v-model='floatNumber' :precision='2' :step='0.1' size='mini'></el-input-number> <!-- controls-position -->
<el-input-number v-model='number' controls-position='right' :min='1' :max='10'></el-input-number>
3、动态给:max赋值
3.1 vue代码
<el-form-item label="最大功率" prop="power">
<template #default="scope">
<el-input-number v-model="form.power" :min="1" :max="form.maxPowers" label="最大功率"></el-input-number>
</template>
</el-form-item>
3.2 js代码
<script>
export default {
name: "DeviceEdit",
data() {
return {
// 表单参数
form: {
productId: 0,
name:'',
power: 0,
status: 1,
firmwareVersion: 1.0,
netFirmVer:1.0,
appFirmVer:1.0,
mcbFirmVer:1.0,
maxPowers:0,
},
},
created() {
this.getBase();
},
methods: {
getBase(productId) {
this.form.maxPowers=33;
},
};
</script>
希望我的解决方法，对你们有所帮助。
