首页 > 作文

Vue elementUI表单嵌套表格并对每行进行校验详解

更新时间:2023-04-04 11:23:53 阅读：评论：0

效果展示

先看看这是不是需要的效果^_^

如图，elementui 表单里嵌套了表格，表格内每行能进行【保存】【新增】【编辑】【删除】【重置】等操作，同时可以对每行的某些字段进行校验（而不是整个表单校验！），这种需求很常见，所以记录下来。

代码链接

gitee地址

关键代码

表格数据

// 数据格式必须是【对象嵌套数组】，【form】绑定表单，【list】绑定表格form: {  // 表格数据  list: [      { id: 1, name: '小叶', age: '12', phone: '123456', show: true },      { id: 2, name: '小李', age: '23', phone: '123457', show: true },      { id: 3, name: '小林', age: '12', phone: '123458', show: true }  ]},

组件嵌套

添加字段校验的时候，格式必须写成这样的 :prop=”‘list.’ + scope.$index + ‘.name'”
这是 elementui 规定的格式，渲染后的结果为 list.1.name每个字段要动态绑定表单的 rules 属性如果不是以上的格式，会出错！！！

// 表单必须嵌套在表格的外面，表单必须绑定【rules】【ref】属性<el-form :model="form" :rules="rules" ref="form">   <el-table :data="form.list">       <el-table-column prop="name" label="姓名">           <template scope="scope">              // 每个字段动态的绑定表单的【prop】【rules】属性              <el-form-item :prop="'list.' + scope.$index + '.name'"                                              :rules="rules.name">                    <el-input size="mini" v-model="scope.row.name" placeholder="请输入"                             clearable></el-input>               </el-form-item>           </template>       </el-table-column>  </el-table></el-form>

校验方法

表单的字段对象存在于 this.$refs[‘form’].fields 中，并且字段对象具有 prop【datas.1.name】属性和 validatefield 方法【验证 datas.1.name 能否通过校验】但是 validatefield 方法需要手动创建来验证能否通过校验必须创建，否则会出错！！！

// 表单校验方法// 【form】是需要校验的表单，就是表单中【ref】绑定的字段// 【index】是需要传入的行数，字段【scope.$index】validatefield(form, index) {     let result = true;     for (let item of this.$refs[form].fields) {         if(item.prop.split(".")[1] == index){             this.$refs[form].validatefield(item.prop, err => {                 if(err !="") {                     result = fal;                 }             });         }         if(!result) break;     }     return result;}

重置方法

// 对【需要校验】的表单字段进行重置// 参数同校验方法，如果是全部重置ret(form, index) {    this.$refs[form].fields.foreach(item => {        if(item.prop.split(".")[1] == index){            item.retfield();        }    })}// 如果需要全部重置可以直接质控表单中字段// 【row】是每行传入的数据retrow(row) {    row.name = "";    row.age = "";    row.phone = "";}

完整代码

因为用的是在线链接，网络不稳定时页面不一定能加载出来，使用时可以更换成本地的！

<!doctype html><html lang="zh"><head><meta chart="utf-8"><meta http-equiv="x-ua-compatible" content="ie=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>vue表单嵌套表格逐行验证</title><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><!-- 引入样式 --><link rel="stylesheet" href="/d/file/titlepic/index.css" rel="external nofollow" ><!-- 引入组件库 --><script src="https://unpkg.com/element-ui/lib/index.js"></script></head><body><div id="app"><!-- 页面组件 --><h2 style="text-align: center; line-height: 23px;color: #909399;">vue表单嵌套表格逐行验证</h2><el-form :model="form" :rules="rules" ref="form" :inline="true"style="margin: 23px auto 0px; width: 96%; overflow: hidden;"><el-table border :data="form.list"><el-table-column align="center" prop="id" label="序号" width="55"></el-table-column><el-table-column align="center" prop="name" label="姓名"><template scope="scope"><el-form-item :prop="'list.' + scope.$index + '.name'" :rules="rules.name"v-if="scope.row.show"><el-input size="mini" v-model="scope.row.name" placeholder="请输入" clearable></el-input></el-form-item><div v-if="!scope.row.show">{{scope.row.name}}</div></template></el-table-column><el-table-column align="center" prop="age" label="年龄"><template scope="scope"><el-form-item :prop="'list.' + scope.$index + '.age'" :rules="rules.age" v-if="scope.row.show"><el-input size="mini" v-model="scope.row.age" placeholder="请输入" clearable></el-input></el-form-item><div v-if="!scope.row.show">{{scope.row.age}}</div></template></el-table-column><el-table-column align="center" prop="phone" label="联系方式"><template scope="scope"><el-form-item :prop="'list.' + scope.$index + '.phone'" :rules="rules.phone"v-if="scope.row.show"><!-- <el-form-item v-if="scope.row.show"> --><el-input size="mini" v-model="scope.row.phone" placeholder="请输入" clearable></el-input>&全国十大校草lt;/el-form-item><div v-if="!scope.row.show">{{scope.row.phone}}</div></template></el-table-column><el-table-column label="操作" align="center" width="290" fixed="right"><template slot-scope="scope"><el-button type="text" style="color: #e6a23c;" @click="save(scope.$index, scope.row)"v-if="scope.row.show" icon="el-icon-check">保存</el-button><el-button type="text" style="color: #409eff;" @click="edit(scope.row)" v-if="!scope.row.show"icon="el-icon-edit">编辑</el-button><el-button type="text" style="color: #67c23a;" v-if="scope.$index+1 == listlength"@click="addrow(scope.$index, scope.row)" icon="el-icon-plus">新增</el-button><el-button type="text" style="color: #f56c6c;" @click="delrow(scope.$index, scope.row)"icon="el-icon-delete">删除</el-button><el-button type="text" style="color: #909399;" @click="ret('form', scope.$index)"v-if="scope.row.show" icon="largeel-icon-refresh">重置</el-button><!-- <el-button type="text" style="color: #909399;" @click="retrow(scope.row)"v-if="scope.row.show" icon="el-icon-refresh">重置</el-button> --></template></el-table-column></el-table></el-form></div></body></html><最新瓷砖;script>var app = new vue({el: '#app',data() {return {// 表单数据form: {// 表格数据list: [{ id: 1, name: '', age: '', phone: '', show: true }]},// 表单验证规则rules: {name: [{ required: true, message: '请输入姓名！', trigger: 'blur' }],age: [{ required: true, message: '请输入年龄！', trigger: 'blur' }],phone: [{ required: true, message: '请输入联系方式！', trigger: 'blur' }],},// 表格长度默认为 1listlength: 1,}},methods: {// 校验validatefield(form, index) {let result = true;for (let item of this.$refs[form].fields) {if (item.prop.split(".")[1] == index) {this.$refs[form].validatefield(item.prop, err => {if (err != "") {result = fal;}});}if (!result) break;}return result;},// 重置【只针对校验字段】ret(form, index) {this.$refs[form].fields.fo上海公租房reach(item => {if (item.prop.split(".")[1] == index) {item.retfield();}})},// 重置【全部】retrow(row) {row.name = "";row.age = "";row.phone = "";},// 保存save(index, row) {if (!this.validatefield('form', index)) return;row.show = fal;},// 新增addrow(index, row) {if (!this.validatefield('form', index)) return;this.form.list.push({id: index + 2,name: '',age: '',phone: '',show: true});this.listlength = this.form.list.length;},// 编辑edit(row) {row.show = true;},// 删除delrow(index, row) {if (this.form.list.length > 1) {this.form.list.splice(index, 1);this.lis学位英语一年可以考几次tlength = this.form.list.length;} el {this.form.list = [{id: 1,name: '',age: '',phone: '',show: true}];}},}})</script>