需要實現的效果

　　最新遇到一個需求，資料在table中遍歷展示，且需要校驗每一項資料的格式，而且表頭資料需要增加必填項*標示。

這裡的校驗和平時的校驗不一樣的是此處的資料是迴圈遍歷展示的，因此要注意

1. prop的值為`bindList[${scope.$index}].nickName`
2. :model="bindForm"中bindForm的資料型別，
3. 表頭必填項資料的渲染函式render-header，這裡希望表頭文字以引數的形式傳入而不是每個表頭資料寫一個函式渲染，我之前的cto再三要求不要寫重複程式碼！！！
4. 此處的el-form-item的:rules="rules.nickName"不能寫在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>

　　js程式碼如下：

 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   }

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