vue + iview inputNumber 数字输入框踩坑(即设置 max 后输入还能输入超过最大值内容)
vue + iview inputNumber 数字输入框踩坑(即设置 max 后输入还能输入超过最大值内容)在 table 组件中嵌套使用时当在 table 组件中嵌套使用时,在 render 中自定义内容,在 props 中设置输入的max 、min 和 step,然后监听输入的变化,设置最大值和最小值,此处以设置最大值为例://poorColumns为table组件绑定的columnpoor
·
vue + iview inputNumber 数字输入框踩坑(即设置 max 后输入还能输入超过最大值内容)
在 table 组件中嵌套使用时
当在 table 组件中嵌套使用时,在 render 中自定义内容,在 props 中设置输入的max
、min
和 step
,然后监听输入的变化,设置最大值和最小值,此处以设置最大值为例:
//poorColumns为table组件绑定的column
poorColumns: [
{
title: "考评项目",
key: "kpxm",
align: "center",
minwidth: 140,
},
{
title: "考评内容",
align: "center",
minwidth: 140,
key: "kpnr",
},
{
title: "考评指标",
key: "kpzz",
align: "center",
minwidth: 180,
},
{
title: "考评方法",
key: "kpff",
align: "center",
minwidth: 180,
},
{
title: "上传材料要求",
align: "center",
minwidth: 130,
key: "uploadRemark",
},
{
title: "材料上传",
align: "center",
width: 200,
slot: "operation",
},
{
title: "自评得分",
align: "center",
width: 160,
render: (h, params) => {
return h("InputNumber", {
style: {
width: "85%",
},
props: {
value: params.row.selfEvalScore,
size: "large",
placeholder: `该项总分为${params.row.score}分`,
max: params.row.score,//此处设置按钮点击的最大值
step: 1,
min: 0,
},
on: {
input: (event) => {
//监测输入的内容,并将输入内容赋值给绑定的字段
params.row.selfEvalScore = event;
//使用$nextTick避免数字超过限制后能继续输入更大的值
this.$nextTick(() => {
if (event > params.row.score) {//在数字变化时判断数字的大小,超过对应的值就用对应的值赋值
params.row.selfEvalScore = params.row.score;
this.poorData[params.index].selfEvalScore =
params.row.score;
} else {//未超过就将event(即当前值)赋值给绑定的字段
params.row.selfEvalScore = event;
this.poorData[params.index].selfEvalScore = event;
}
});
},
},
});
},
},
],
不使用$nextTick
时,数字超过最大值后仍能继续输入。
普通使用不嵌套时
在使用时绑定 change 的方法,监听输入的内容变化并对其进行判断(以设置最大值为例):
<template>
//此处max根据suffixLabel字段动态设置
<InputNumber
:min="0"
:step="1"
:max="question.suffixLabel == '%' ? 100 : Infinity"
@on-change="changeNumber"
v-model="question.itemValue"
></InputNumber>
</template>
<script>
export default {
methods: {
changeNumber(val) {
if (this.question.suffixLabel && this.question.suffixLabel == "%") {
//使用$nextTick避免在判断达到最大值并赋值后仍能输入数字
this.$nextTick(() => {
if (val > 100) {
this.question.itemValue = 100;
} else {
this.question.itemValue = Number(val);
}
});
}
},
},
};
</script>
更多推荐
已为社区贡献1条内容
所有评论(0)