如何校验el-table某一列内嵌的输入框
时间: 2023-08-14 15:08:20 浏览: 81
可以通过以下步骤校验el-table某一列内嵌的输入框:
1. 首先给该列的输入框绑定一个事件,例如input事件。
2. 在事件处理函数中获取当前输入框的值并进行校验。
3. 如果校验失败,可以通过给输入框添加一个error类或者在旁边显示错误提示信息的方式来提醒用户。
代码示例:
```html
<el-table :data="tableData">
<el-table-column label="姓名" prop="name">
<template slot-scope="scope">
<el-input v-model="scope.row.name" @input="checkName(scope.row)" :class="{error: scope.row.nameError}"></el-input>
<div v-show="scope.row.nameError" class="error-message">{{scope.row.nameError}}</div>
</template>
</el-table-column>
</el-table>
```
```javascript
export default {
data() {
return {
tableData: [
{ name: '', nameError: '' },
{ name: '', nameError: '' },
{ name: '', nameError: '' }
]
}
},
methods: {
checkName(row) {
if (!row.name) {
row.nameError = '姓名不能为空'
} else {
row.nameError = ''
}
}
}
}
```
上述代码中,当输入框的值为空时会在输入框旁边显示错误提示信息,并且给输入框添加一个error类,使其变成红色。当输入框的值不为空时,错误提示信息会隐藏。