eltable输入框校验
时间: 2023-10-08 20:12:22 浏览: 106
基于Vue和ElementUI的ElTable和ElPagination深度封装设计源码
eltable输入框的校验可以通过以下步骤实现:
1. 在el-table中设置每个需要校验的单元格的prop属性,例如:<el-table-column prop="name"></el-table-column>
2. 在el-table-column中使用scoped-slot来自定义单元格的内容,例如:<el-table-column prop="name">
<template slot-scope="scope">
<el-input v-model="scope.row.name" placeholder="请输入姓名" @blur="validateName(scope.row.name)"></el-input>
</template>
</el-table-column>
3. 在el-input中添加校验规则,例如:<el-input v-model="scope.row.name" placeholder="请输入姓名" :rules="nameRules" @blur="validateName(scope.row.name)"></el-input>
4. 在Vue组件中定义校验规则,例如:
data() {
return {
nameRules: [
{ required: true, message: '请输入姓名', trigger: 'blur' },
{ pattern: /^[\u4e00-\u9fa5]+$/, message: '姓名只能为中文', trigger: 'blur' }
]
}
}
5. 在Vue组件中定义校验方法,例如:
methods: {
validateName(name) {
this.$refs.table.validate((valid) => {
if (valid) {
console.log('校验通过')
} else {
console.log('校验失败')
}
})
}
}
这样就可以实现eltable输入框的校验了。
阅读全文