您可以使用 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。

Element UI Table 表格行内输入框值校验:限制最大值 99

原文地址: https://www.cveoy.top/t/topic/jCT7 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录