有些时候在业务需求中有这样一种场景,提交表单的时候需要添加条格式一样的数据,这时候就用到了表单里面嵌套表格,附上代码,
最外面使用form表单,内部再嵌套表格
<el-form
:inline="true"
ref="form"
:model="formTableData"
size="mini"
abel-width="88px"
:rules="rules"
>
<el-table
:data="formTableData.list"
style="width: 100%"
border
size="mini"
@selection-change="handleSelectionChange"
>
<el-table-column type="selection" width="55" align="center" />
<el-table-column label="序号" width="50" align="center">
<template slot-scope="scope">{{ scope.$index + 1 }}</template>
</el-table-column>
<el-table-column
label="门店名称"
prop="store"
resizable
align="center"
header-align="center"
>
<template slot-scope="scope">
<el-form-item
:prop="'list.' + scope.$index + '.store'"
:rules="rules.store"
>
<el-input
style="width: 100%"
v-model="scope.row.store"
placeholder="请输入门店名称"
/>
</el-form-item>
</template>
</el-table-column>
</el-table>
</form>
data(){
return{
// 表格表单参数
formTableData: {
list: [],
},
rules: {
store:[
{ required: true, message: "名称不能为空", trigger: "blur" },
],
}
}
}
以上是一个示例,后续字段根据业务需求去添加即可