el-table数据遍历结合el-form校验

需要实现的效果

el-table数据遍历结合el-form校验

 

 

  最新遇到一个需求,数据在table中遍历展示,且需要校验每一项数据的格式,而且表头数据需要增加必填项*标示。

这里的校验和平时的校验不一样的是此处的数据是循环遍历展示的,因此要注意

  1. prop的值为`bindList[${scope.$index}].nickName`
  2. :model="bindForm"中bindForm的数据类型,
  3. 表头必填项数据的渲染函数render-header,这里希望表头文字以参数的形式传入而不是每个表头数据写一个函数渲染,我之前的cto再三要求不要写重复代码!!!
  4. 此处的el-form-item的:rules="rules.nickName"不能写在el-form上

  代码实现如下:

  

el-table数据遍历结合el-form校验
 1 <template>
 2   <div>
 3   <el-form class="form" :model="bindForm" ref="ruleForm">
 4     <el-table ref="multipleTable" :data="bindForm.bindList" tooltip-effect="dark" style="width: 99%" empty-text="暂无绑定用户">
 5       <el-table-column :render-header="(h, obj) => renderHeader(h, obj, '姓名')" min-width="100">
 6         <template slot-scope="scope">
 7           <el-form-item :prop="`bindList[${scope.$index}].nickName`" :rules="rules.nickName">
 8             <el-input v-model="scope.row.nickName" placeholder="请输入内容"></el-input>
 9           </el-form-item>
10         </template>
11       </el-table-column>
12       <el-table-column :render-header="(h, obj) => renderHeader(h, obj, '职务')" min-width="130">
13         <template slot-scope="scope">
14           <el-form-item :prop="`bindList[${scope.$index}].paymentScenes`" :rules="rules.paymentScenes">
15             <el-select
16               v-model="scope.row.paymentScenes"
17               multiple
18               collapse-tags
19               placeholder="请选择支付场景">
20               <el-option
21                 v-for="item in paymentSceneList"
22                 :key="item.value"
23                 :label="item.label"
24                 :value="item.value">
25               </el-option>
26             </el-select>
27           </el-form-item>
28         </template>
29       </el-table-column>
30       <el-table-column>
31         <template slot-scope="scope">
32           <el-form-item :prop="`bindList[${scope.$index}].sex`">
33             <el-input v-model="scope.row.sex" placeholder="请输入性别"></el-input>
34           </el-form-item>
35         </template>
36       </el-table-column>
37       <el-table-column label="操作" min-width="80">
38         <template slot-scope="scope">
39           <el-form-item>
40             <el-button @click="add">新增</el-button>
41             <el-button @click="sub(scope.$index)">删除</el-button>
42           </el-form-item>
43         </template>
44       </el-table-column>
45     </el-table>
46     <div class="save">
47      <el-button type="primary" @click="save">保存</el-button>
48     </div>
49   </el-form>
50   </div>
51 </template>
el-table数据遍历结合el-form校验

  js代码如下:

  

el-table数据遍历结合el-form校验
 1 export default {
 2   data() {
 3     return {
 4       // 支付场景数据
 5       paymentSceneList: [
 6         { label: '图书管理员', value: 1 },
 7         { label: '物业管理员', value: 2 },
 8         { label: '宿舍管理员', value: 3 },
 9         { label: '教室管理员', value: 4 }
10       ],
11       // 此处必须是这样的数据类型,才能够校验成功
12       bindForm: {
13         bindList: []
14       },
15       // 支付场景是否开启的状态值
16       STATUS: {
17         OPEN: 1, // 开启
18         CLOSE: 0 // 不开启
19       },
20       rules: {
21         nickName: [
22           {
23             required: true,
24             message: '姓名不可为空',
25             trigger: ['blur', 'change']
26           }
27         ],
28         paymentScenes: [
29           {
30             type: 'array',
31             required: true,
32             trigger: ['blur', 'change'],
33             message: '职务不可为空'
34           }
35         ]
36       }
37     };
38   },
39   methods: {
40     /**
41      * 渲染表头 表头增加必填项*
42      * str自定义传入参数 为表头名称
43     */
44     // eslint-disable-next-line
45     renderHeader (h, { column, $index }, str) {
46       return h('span', [
47         h('span', { style: { color: '#f56c6c' } }, ['*']),
48         h('span', {}, [str])
49       ]);
50     },
51     add() {
52       this.bindForm.bindList.push({
53         nickName: '',
54         sex: '',
55         paymentScenes: []
56       });
57     },
58     sub(index) {
59       this.bindForm.bindList.splice(index, 1);
60     },
61     save() {
62       this.$refs.ruleForm.validate((valid) => {
63         if (valid) {
64           // 通过校验时
65         }
66       });
67     }
68   },
69   mounted() {
70     this.bindForm.bindList.push({
71       nickName: '',
72       sex: '',
73       paymentScenes: []
74     });
75   }
el-table数据遍历结合el-form校验

 转自:https://www.cnblogs.com/scuplting-in-time/p/13801532.html

上一篇:vue 页面与弹框组件之间的相互传值


下一篇:搭建自动化测试平台Snail_Autotest_Platfrom(4)——用户设计