设为首页收藏本站
开启辅助访问 切换到宽版

安徽论坛

 找回密码
 立即注册

QQ登录

只需一步，快速开始

安徽论坛»论坛 › 大国徽商 › 计算机 › Vue elementUI表单嵌套表格并对每行进行校验详解 ...
返回列表 发新帖
查看: 11471|回复: 0

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

[复制链接]
乔微博

76

主题

0

回帖

240

积分

中级会员

Rank: 3Rank: 3

积分
240
发表于 2022-3-26 11:01:50 | 显示全部楼层 |阅读模式
网站内容均来自网络，本站只提供信息平台，如有侵权请联系删除，谢谢！
目录


效果展示

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

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

代码链接

gitee地址

关键代码


表格数据
  1. // 数据格式必须是【对象嵌套数组】，【form】绑定表单，【list】绑定表格
  2. form: {
  3.   // 表格数据
  4.   list: [
  5.       { id: 1, name: '小叶', age: '12', phone: '123456', show: true },
  6.       { id: 2, name: '小李', age: '23', phone: '123457', show: true },
  7.       { id: 3, name: '小林', age: '12', phone: '123458', show: true }
  8.   ]
  9. },
复制代码
组件嵌套


  • 添加字段校验的时候，格式必须写成这样的 :prop="'list.' + scope.$index + '.name'"
    这是 elementui 规定的格式，渲染后的结果为 list.1.name
  • 每个字段要动态绑定表单的 rules 属性
  • 如果不是以上的格式，会出错！！！
  1. // 表单必须嵌套在表格的外面，表单必须绑定【rules】【ref】属性
  2. <el-form :model="form" :rules="rules" ref="form">
  3.    <el-table :data="form.list">
  4.        <el-table-column prop="name" label="姓名">
  5.            <template scope="scope">
  6.               // 每个字段动态的绑定表单的【prop】【rules】属性
  7.               <el-form-item :prop="'list.' + scope.$index + '.name'"                                              :rules="rules.name">
  8.                     <el-input size="mini" v-model="scope.row.name" placeholder="请输入"                             clearable></el-input>
  9.                </el-form-item>
  10.            </template>
  11.        </el-table-column>
  12.   </el-table>
  13. </el-form>
复制代码
校验方法


  • 表单的字段对象存在于 this.$refs[&#39;form&#39;].fields 中，并且字段对象具有 prop【datas.1.name】 属性和 validateField 方法【验证 datas.1.name 能否通过校验】
  • 但是 validateField 方法需要手动创建来验证能否通过校验
  • 必须创建，否则会出错！！！
  1. // 表单校验方法
  2. // 【form】是需要校验的表单，就是表单中【ref】绑定的字段
  3. // 【index】是需要传入的行数，字段【scope.$index】
  4. validateField(form, index) {
  5.      let result = true;
  6.      for (let item of this.$refs[form].fields) {
  7.          if(item.prop.split(".")[1] == index){
  8.              this.$refs[form].validateField(item.prop, err => {
  9.                  if(err !="") {
  10.                      result = false;
  11.                  }
  12.              });
  13.          }
  14.          if(!result) break;
  15.      }
  16.      return result;
  17. }
复制代码
重置方法
  1. // 对【需要校验】的表单字段进行重置
  2. // 参数同校验方法，如果是全部重置
  3. reset(form, index) {
  4.     this.$refs[form].fields.forEach(item => {
  5.         if(item.prop.split(".")[1] == index){
  6.             item.resetField();
  7.         }
  8.     })
  9. }
  10. // 如果需要全部重置可以直接质控表单中字段
  11. // 【row】是每行传入的数据
  12. resetRow(row) {
  13.     row.name = "";
  14.     row.age = "";
  15.     row.phone = "";
  16. }
复制代码
完整代码

因为用的是在线链接，网络不稳定时页面不一定能加载出来，使用时可以更换成本地的！
  1. <!DOCTYPE html>
  2. <html lang="zh">

  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>vue表单嵌套表格逐行验证</title>
  9.     <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  10.     <!-- 引入样式 -->
  11.     <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css" rel="external nofollow" >
  12.     <!-- 引入组件库 -->
  13.     <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  14. </head>

  16. <body>
  17.     <div id="app">
  18.         <!-- 页面组件 -->
  19.         <h2 style="text-align: center; line-height: 23px;color: #909399;">vue表单嵌套表格逐行验证</h2>
  20.         <el-form :model="form" :rules="rules" ref="form" :inline="true"
  21.             style="margin: 23px auto 0px; width: 96%; overflow: hidden;">
  22.             <el-table border :data="form.list">
  23.                 <el-table-column align="center" prop="id" label="序号" width="55">
  24.                 </el-table-column>
  25.                 <el-table-column align="center" prop="name" label="姓名">
  26.                     <template scope="scope">
  27.                         <el-form-item :prop="'list.' + scope.$index + '.name'" :rules="rules.name"
  28.                             v-if="scope.row.show">
  29.                             <el-input size="mini" v-model="scope.row.name" placeholder="请输入" clearable>
  30.                             </el-input>
  31.                         </el-form-item>
  32.                         <div v-if="!scope.row.show">{{scope.row.name}}</div>
  33.                     </template>
  34.                 </el-table-column>
  35.                 <el-table-column align="center" prop="age" label="年龄">
  36.                     <template scope="scope">
  37.                         <el-form-item :prop="'list.' + scope.$index + '.age'" :rules="rules.age" v-if="scope.row.show">
  38.                             <el-input size="mini" v-model="scope.row.age" placeholder="请输入" clearable>
  39.                             </el-input>
  40.                         </el-form-item>
  41.                         <div v-if="!scope.row.show">{{scope.row.age}}</div>
  42.                     </template>
  43.                 </el-table-column>
  44.                 <el-table-column align="center" prop="phone" label="联系方式">
  45.                     <template scope="scope">
  46.                         <el-form-item :prop="'list.' + scope.$index + '.phone'" :rules="rules.phone"
  47.                             v-if="scope.row.show">
  48.                             <!-- <el-form-item v-if="scope.row.show"> -->
  49.                             <el-input size="mini" v-model="scope.row.phone" placeholder="请输入" clearable>
  50.                             </el-input>
  51.                         </el-form-item>
  52.                         <div v-if="!scope.row.show">{{scope.row.phone}}</div>
  53.                     </template>
  54.                 </el-table-column>
  55.                 <el-table-column label="操作" align="center" width="290" fixed="right">
  56.                     <template slot-scope="scope">
  57.                         <el-button type="text" style="color: #E6A23C;" @click="save(scope.$index, scope.row)"
  58.                             v-if="scope.row.show" icon="el-icon-check">保存
  59.                         </el-button>
  60.                         <el-button type="text" style="color: #409EFF;" @click="edit(scope.row)" v-if="!scope.row.show"
  61.                             icon="el-icon-edit">编辑
  62.                         </el-button>
  63.                         <el-button type="text" style="color: #67C23A;" v-if="scope.$index+1 == listLength"
  64.                             @click="addRow(scope.$index, scope.row)" icon="el-icon-plus">新增
  65.                         </el-button>
  66.                         <el-button type="text" style="color: #F56C6C;" @click="delRow(scope.$index, scope.row)"
  67.                             icon="el-icon-delete">删除
  68.                         </el-button>
  69.                         <el-button type="text" style="color: #909399;" @click="reset('form', scope.$index)"
  70.                             v-if="scope.row.show" icon="el-icon-refresh">重置
  71.                         </el-button>
  72.                         <!-- <el-button type="text" style="color: #909399;" @click="resetRow(scope.row)"
  73.                             v-if="scope.row.show" icon="el-icon-refresh">重置
  74.                         </el-button> -->
  75.                     </template>
  76.                 </el-table-column>
  77.             </el-table>
  78.         </el-form>
  79.     </div>
  80. </body>

  82. </html>
  83. <script>
  84.     var app = new Vue({
  85.         el: '#app',
  86.         data() {
  87.             return {
  88.                 // 表单数据
  89.                 form: {
  90.                     // 表格数据
  91.                     list: [{ id: 1, name: '', age: '', phone: '', show: true }]
  92.                 },
  93.                 // 表单验证规则
  94.                 rules: {
  95.                     name: [{ required: true, message: '请输入姓名！', trigger: 'blur' }],
  96.                     age: [{ required: true, message: '请输入年龄！', trigger: 'blur' }],
  97.                     phone: [{ required: true, message: '请输入联系方式！', trigger: 'blur' }],
  98.                 },
  99.                 // 表格长度默认为 1
  100.                 listLength: 1,
  101.             }
  102.         },

  104.         methods: {
  105.             // 校验
  106.             validateField(form, index) {
  107.                 let result = true;
  108.                 for (let item of this.$refs[form].fields) {
  109.                     if (item.prop.split(".")[1] == index) {
  110.                         this.$refs[form].validateField(item.prop, err => {
  111.                             if (err != "") {
  112.                                 result = false;
  113.                             }
  114.                         });
  115.                     }
  116.                     if (!result) break;
  117.                 }
  118.                 return result;
  119.             },

  121.             // 重置【只针对校验字段】
  122.             reset(form, index) {
  123.                 this.$refs[form].fields.forEach(item => {
  124.                     if (item.prop.split(".")[1] == index) {
  125.                         item.resetField();
  126.                     }
  127.                 })
  128.             },

  130.             // 重置【全部】
  131.             resetRow(row) {
  132.                 row.name = "";
  133.                 row.age = "";
  134.                 row.phone = "";
  135.             },

  137.             // 保存
  138.             save(index, row) {
  139.                 if (!this.validateField('form', index)) return;
  140.                 row.show = false;
  141.             },

  143.             // 新增
  144.             addRow(index, row) {
  145.                 if (!this.validateField('form', index)) return;
  146.                 this.form.list.push({
  147.                     id: index + 2,
  148.                     name: '',
  149.                     age: '',
  150.                     phone: '',
  151.                     show: true
  152.                 });
  153.                 this.listLength = this.form.list.length;
  154.             },

  156.             // 编辑
  157.             edit(row) {
  158.                 row.show = true;
  159.             },

  161.             // 删除
  162.             delRow(index, row) {
  163.                 if (this.form.list.length > 1) {
  164.                     this.form.list.splice(index, 1);
  165.                     this.listLength = this.form.list.length;
  166.                 } else {
  167.                     this.form.list = [{
  168.                         id: 1,
  169.                         name: '',
  170.                         age: '',
  171.                         phone: '',
  172.                         show: true
  173.                     }];
  174.                 }
  175.             },
  176.         }
  177.     })
  178. </script>
复制代码
总结

到此这篇关于Vue elementUI表单嵌套表格并对每行进行校验的文章就介绍到这了,更多相关elementUI表单嵌套表格内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
                                                        
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

本帖子中包含更多资源

您需要 登录 才可以下载或查看，没有账号？立即注册

x
免责声明
1. 本论坛所提供的信息均来自网络，本网站只提供平台服务，所有账号发表的言论与本网站无关。
2. 其他单位或个人在使用、转载或引用本文时，必须事先获得该帖子作者和本人的同意。
3. 本帖部分内容转载自其他媒体，但并不代表本人赞同其观点和对其真实性负责。
4. 如有侵权，请立即联系，本网站将及时删除相关内容。
回复 设为聚合帖聚合到帖子

使用道具 举报

返回列表 发新帖
懒得打字嘛，点击右侧快捷回复 【右侧内容，后台自定义】
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

快速回复 返回顶部 返回列表