本功能主要实现表格加表单并且在表格中添加一行新数据,进行数据表单校验
1.使用el-form将el-table包裹起来
实际代码不方便展现,大概是这个意思
也可以参考element中的表单的动态增加案例 地址:Element - The world's most popular Vue UI framework
<el-form :model="Form" ref="Form" label-width="100px" class="demo-dynamic">
<el-table
:data="Form.tableData"
style="width: 100%"
:row-class-name="tableRowClassName">
<el-table-column
prop="date"
label="日期"
width="180">
<template v-slot="scope">
<el-form-item v-if="scope.row.input" :prop="'tableData.'+scope.$index+'.authority'":rules="rules.a">
.......
</el-form-item>
</template>
</el-table-column>
<el-table-column
prop="name"
label="姓名"
width="180">
</el-table-column>
<el-table-column
prop="address"
label="地址">
</el-table-column>
</el-table>
</el-form>
export default {
data() {
return {
//必须这样定义对象数组
Form:{
tableData:[]
}
}
}
}
最终效果图片展示
标签:el,vue,form,表格,校验,表单,table From: https://blog.csdn.net/qq_55961367/article/details/140274010