Element給明細表添加必填校驗,el-table必填處理

先看效果圖 

 在開發中要遇到一個需求,明細裡面的字段為必填,是以在儲存的時候需要進行校驗.在網上找了很久,很多都是要重新去寫代碼,是以都沒有采納.在快要繳械投降的時候找到了這個方法.直接上代碼吧

html

<el-table :data="dataForm.detailList" size='mini'>
              <el-table-column type="index" width="50" label="序号" align="center" />
              <el-table-column prop="material" label="材料">
                <template slot-scope="scope">
                  <el-form-item :prop="'detailList.' + scope.$index + '.material'" :rules="rules.material">
                    <el-select v-model="scope.row.material" placeholder="請選擇" clearable :style='{"width":"100%"}' filterable :multiple="false">
                      <el-option v-for="(item, index) in mateialOptions" :key="index" :label="item.materialname" :value="item.id" ></el-option>
                    </el-select>
                  </el-form-item>
                </template>
              </el-table-column>

              <el-table-column prop="workload" label="數量" v-if="JudgeShow('workload')">
                <template slot-scope="scope">
                  <el-form-item :prop="'detailList.' + scope.$index + '.workload'" :rules="rules.workload">
                    <el-input-number v-model="scope.row.workload" placeholder="數字文本" :step="1" :disabled="JudgeWrite('workload')">
                    </el-input-number>
                  </el-form-item>
                </template>
              </el-table-column>
            </el-table>
           

js 

data() {
    return {
        //這裡就隻貼關鍵代碼了
        material: [{
          required: true,
          message: '請選擇材料',
          trigger: 'change'
        }],
        workload: [{
          required: true,
          message: '請選擇材料',
          trigger: 'change'
        }]
      }
    }
  },


    //表單送出的時候進行校驗
    dataFormSubmit(eventType) {
      this.$refs['elForm'].validate((valid) => {
        if (valid) {
            //校驗通過 ...
        }
      })
    },