el-table表单校验时,数据有改变失去焦点时触发,数据没改变失去焦点时不触发该怎么写
时间: 2024-02-11 20:05:52 浏览: 131
你可以在表单项失去焦点后,判断该表单项的值是否与原始值相同,如果不同则触发校验,否则不触发校验。具体实现可以参考以下代码:
```html
<el-table :data="tableData">
<el-table-column prop="name" label="姓名">
<template slot-scope="{ row }">
<el-form :model="row" :rules="getRules(row)">
<el-form-item prop="name">
<el-input v-model="row.name" @blur="handleBlur(row)" />
</el-form-item>
</el-form>
</template>
</el-table-column>
</el-table>
```
```javascript
export default {
data() {
return {
tableData: [
{ name: '张三' },
{ name: '李四' },
{ name: '王五' }
],
originalData: []
}
},
mounted() {
// 保存原始数据
this.originalData = JSON.parse(JSON.stringify(this.tableData))
},
methods: {
// 根据表单项动态获取校验规则
getRules(row) {
return {
name: [
{ required: true, message: '请输入姓名', trigger: 'blur' }
]
}
},
// 表单项失去焦点事件
handleBlur(row) {
// 获取原始数据
const originalRow = this.originalData.find(item => item === row)
// 判断表单项的值是否与原始值相同
if (row.name !== originalRow.name) {
// 触发校验
this.$refs[row.id].validateField('name')
}
}
}
}
```
在上面的代码中,我们在表单项的失去焦点事件上,通过比较表单项的值和原始值是否相同来判断是否触发校验。如果不同,则通过 `$refs` 获取该表单项的引用,然后调用 `validateField` 方法触发校验。注意,这里我们需要保存原始数据,以便在比较时使用。
阅读全文