el-table内有多条数据,并且每一行数据内都会有一个el-input输入框,如何校验所有输入框的值
时间: 2024-02-03 10:14:33 浏览: 161
vue鼠标在表格中移入移出input显示隐藏
你可以采用以下步骤来校验所有输入框的值:
1. 在 el-table 中定义一个 ref,例如:`<el-table ref="myTable"></el-table>`
2. 在需要校验的时候,获取到这个 ref,并找到所有的 el-input 元素
3. 遍历所有的 el-input 元素,进行校验
4. 如果校验失败,则记录错误信息,并将 el-input 元素的颜色修改为红色或者其他标识
5. 最后展示所有的错误信息
以下是一个示例代码:
```html
<el-table ref="myTable">
<el-table-column label="Name">
<template slot-scope="scope">
<el-input v-model="scope.row.name" @blur="validateInput(scope.row)"></el-input>
</template>
</el-table-column>
<el-table-column label="Age">
<template slot-scope="scope">
<el-input v-model="scope.row.age" @blur="validateInput(scope.row)"></el-input>
</template>
</el-table-column>
</el-table>
```
```javascript
export default {
methods: {
validateInput(row) {
// 获取到 el-table 的 ref
const table = this.$refs.myTable
// 找到所有的 el-input 元素
const inputs = table.$el.querySelectorAll('.el-input__inner')
const errors = []
// 遍历所有的 el-input 元素,并进行校验
inputs.forEach(input => {
if (!input.value) {
errors.push('Input is empty')
input.style.borderColor = 'red'
} else {
input.style.borderColor = ''
}
})
// 展示所有的错误信息
if (errors.length > 0) {
this.$message.error(errors.join(', '))
}
}
}
}
```
阅读全文