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>

希望我的解决方法，对你们有所帮助。