el-table内部嵌套el-form并实现校验,和el-form内部嵌套el-table并实现校验,哪个好点
时间: 2024-09-13 22:08:40 浏览: 77
el-table嵌套 el-form并且加正则校验
在Vue.js中,选择在`el-table`内嵌套`el-form`还是在`el-form`内嵌套`el-table`取决于具体的业务场景和需求。
1. 如果你需要在一个表格中展示数据,并且每个表格行的数据需要独立校验,比如每个表格项有自己的必填字段,那么将`el-form`放在`el-table`的每一行会更合适。这样,你可以为每个表单项设置验证规则,当用户填写完一行并提交时,只校验该行的数据。
```html
<template>
<el-form v-model="tableForm">
<el-row v-for="(item, index) in tableData" :key="index">
<el-col :span="8">
<el-form-item label="字段1" :rules="[required]">
<input type="text" v-model="item.field1">
</el-form-item>
</el-col>
<!-- 其他字段... -->
</el-row>
</el-form>
</template>
<script>
export default {
data() {
return {
tableData: ...,
tableForm: {},
};
},
// 表单验证规则
rules: {
required: { validator: val => val !== '', message: '此项不能为空' },
},
};
</script>
```
阅读全文