Element UI Table 表格行内输入框值校验:限制最大值 99
您可以使用 Element UI 中 Table 组件的 scoped slot 功能,将每一行的数据都渲染成一个输入框,并通过监听输入框的 change 事件,判断输入框里的值是否大于 99。具体代码如下:
<el-table :data="tableData">
<el-table-column label="姓名" prop="name"></el-table-column>
<el-table-column label="年龄">
<template slot-scope="scope">
<el-input v-model="scope.row.age" @change="checkAge(scope.row)"></el-input>
</template>
</el-table-column>
</el-table>
export default {
data() {
return {
tableData: [
{
name: '张三',
age: 18
},
{
name: '李四',
age: 25
}
]
}
},
methods: {
checkAge(row) {
if (row.age > 99) {
this.$message.warning('年龄不能大于 99 岁');
row.age = 99;
}
}
}
}
在上面的代码中,我们使用了 Element UI 的 Table 组件,并将数据渲染到表格中。在年龄列中,我们使用了 Table 组件的 scoped slot 功能,将每一行的数据都渲染成一个输入框。同时,我们监听了输入框的 change 事件,通过 checkAge 方法判断输入框里的值是否大于 99。如果大于 99,则弹出一个警告框,并将输入框里的值设置为 99。
原文地址: https://www.cveoy.top/t/topic/jCT7 著作权归作者所有。请勿转载和采集!