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) {
            //校验通过 ...
        }
      })
    },