el-table内校验input 校验信息看不到
时间: 2024-06-20 09:03:45 浏览: 172
vue3 el-table多级表头收缩扩展的实现(JS原味版)
在使用 Element UI 中的 el-table 组件时,可以使用表单验证来校验输入的信息是否符合要求。如果你在校验时无法看到校验信息,可能是因为你没有设置错误提示或者错误提示被隐藏了。
你可以通过设置 rules 属性来实现表单校验。例如:
```
<el-table :data="tableData">
<el-table-column prop="name" label="姓名">
<template slot-scope="scope">
<el-form-item prop="name">
<el-input v-model="scope.row.name"></el-input>
</el-form-item>
</template>
</el-table-column>
<el-table-column prop="age" label="年龄">
<template slot-scope="scope">
<el-form-item prop="age">
<el-input v-model.number="scope.row.age"></el-input>
</el-form-item>
</template>
</el-table-column>
</el-table>
```
其中,prop 属性指定了每一列对应数据源的属性名,在 el-form-item 中使用 prop 属性指定了需要校验的表单项,并设置了错误提示信息:
```
{
name: [
{ required: true, message: '请输入姓名', trigger: 'blur' }
],
age: [
{ required: true, message: '请输入年龄', trigger: 'blur' },
{ type: 'number', message: '年龄必须为数字值', trigger: 'blur' }
]
}
```
这样设置后,当输入不符合规则时,会自动弹出错误提示。
如果你无法看到错误提示,可能是因为错误提示被隐藏了,你可以通过 CSS 样式或 JavaScript 来修改样式或显示方式,以便更好地展示错误提示。
阅读全文