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

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

elementUI 表单嵌套表格并进行校验。

目录
效果展示
代码链接
关键代码
完整代码

效果展示

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

如图，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 = false;

                 }

             });

         }

         if(!result) break;

     }

     return result;

}

重置方法

// 对【需要校验】的表单字段进行重置

// 参数同校验方法，如果是全部重置

reset(form, index) {

    this.$refs[form].fields.forEach(item => {

        if(item.prop.split(".")[1] == index){

            item.resetField();

        }

    })

}

// 如果需要全部重置可以直接质控表单中字段

// 【row】是每行传入的数据

resetRow(row) {

    row.name = "";

    row.age = "";

    row.phone = "";

}

完整代码

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

<!DOCTYPE html>

<html lang="zh">

<head>

    <meta charset="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="https://unpkg.com/element-ui/lib/theme-chalk/index.css">

    <!-- 引入组件库 -->

    <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>

                        </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="reset('form', scope.$index)"

                            v-if="scope.row.show" icon="el-icon-refresh">重置

                        </el-button>

                        <!-- <el-button type="text" style="color: #909399;" @click="resetRow(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' }],

                },

                // 表格长度默认为 1

                listLength: 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 = false;

                            }

                        });

                    }

                    if (!result) break;

                }

                return result;

            },

            // 重置【只针对校验字段】

            reset(form, index) {

                this.$refs[form].fields.forEach(item => {

                    if (item.prop.split(".")[1] == index) {

                        item.resetField();

                    }

                })

            },

            // 重置【全部】

            resetRow(row) {

                row.name = "";

                row.age = "";

                row.phone = "";

            },

            // 保存

            save(index, row) {

                if (!this.validateField('form', index)) return;

                row.show = false;

            },

            // 新增

            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.listLength = this.form.list.length;

                } else {

                    this.form.list = [{

                        id: 1,

                        name: '',

                        age: '',

                        phone: '',

                        show: true

                    }];

                }

            },

        }

    })

</script>

整理不易，给个赞呗~

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

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

效果展示

代码链接

关键代码

完整代码

elementUI表单嵌套表格并对每行进行校验的相关教程结束。

相关推荐

hdu 1254 推箱子(嵌套搜索，bfs中有dfs)

List嵌套排序并取第一个对象

【Qt6】嵌套 QWindow

Spring中事务嵌套这么用一定得注意了！！

2023-01-11：体育馆的人流量。编写一个 SQL 查询以找出每行的人数大于或等于 100 且 id 连续的三行或更多行记录。返回按 visit_date 升序排列的结果表。 DROP TAB

Python 字典嵌套

CRL快速开发框架系列教程十三(嵌套查询)

Spring事务传播之嵌套调用

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

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

效果展示

代码链接

关键代码

完整代码

elementUI表单嵌套表格并对每行进行校验的相关教程结束。

相关推荐

hdu 1254 推箱子(嵌套搜索，bfs中有dfs)

List嵌套排序并取第一个对象

【Qt6】嵌套 QWindow

Spring中事务嵌套这么用一定得注意了！！

2023-01-11：体育馆的人流量。编写一个 SQL 查询以找出每行的人数大于或等于 100 且 id 连续的三行或更多行记录。返回按 visit_date 升序排列 的结果表。 DROP TAB

Python 字典嵌套

CRL快速开发框架系列教程十三(嵌套查询)

Spring事务传播之嵌套调用

2023-01-11：体育馆的人流量。编写一个 SQL 查询以找出每行的人数大于或等于 100 且 id 连续的三行或更多行记录。返回按 visit_date 升序排列的结果表。 DROP TAB