Vue form必填字段 rules

rules

<el-form label-width="80px" :model="addForm" status-icon :rules="rules" ref="addForm" style="padding-left: 10px;padding-right: 10px;">
  <el-row>
     <template v-for="(item,index) in addForm.redoList" :key="it.index">
       <el-form-item label="责任部门" :prop="'redoList.'+index+'.cause_parent'" :rules="rules.str">
          <template slot-scope="scope">
               <el-select v-model="item.cause_parent" placeholder="请选择"  style="width: 300px" clearable @change="depart_change(item.cause_parent)" :rules="rules.str">
               <el-option
                  v-for="item in departList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </template>
       </el-form-item>
       <el-form-item label="重做原因" :prop="'redoList.'+index+'.cause'" :rules="rules.str">
             <el-select v-model="item.cause" multiple clearable placeholder="请选择" style="width: 300px" :rules="rules.str">
               <el-option
                 v-for="item in causeList"
                 :key="item.value"
                 :label="item.label"
                 :value="item.value"
               ></el-option>
             </el-select>
           </el-form-item>
           
     </template>
   </el-row>
   <br class="row">
   <el-row>
     <el-col :span="10">
       <el-form-item></el-form-item>
     </el-col>
     <el-col :span="10">
       <el-button @click="cancelBtn()">取 消</el-button>
       <el-button type="primary" @click="submitBtn('addForm')">提 交</el-button>
     </el-col>

   </el-row>
</el-form>

    data() {
      return {
        loading: false,
        add_i: 0,
        addForm: {
          redoList: [],
        },
        departList:[],        // 部门配置
        causeList:[],         // 原因配置

        rules: {
          str: [
            {required: true, message: '请选择必填项', trigger: 'blur'}
          ]
        }
      }
    },
 methods: {
       //提交
      submitBtn(formName) {
        var that = this
        that.$refs[formName].validate((valid) => {
          if (valid) {
            that.$confirm('确认提交? 提交之后不能修改 !', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              that.loading = true;
              jQuery.ajax({
                url: "/hismaterial/saveRedo",
                type: "post",
                data: {
                  '_token'   : '{{ csrf_token() }}',
                  'notice_id': that.notice_id,
                  'redoList' : that.addForm.redoList,
                },
                dataType: 'json',
                success: function (res) {
                  that.loading = false;
                  if (res.code == 1) {
                    that.$message({
                      message: res.msg,
                      type: 'success'
                    })
                    //that.getData();
                  } else {
                    that.$message({
                      message: res.msg,
                      type: 'warning'
                    })
                  }

                }
              });
            });
          } else {
            return false;
          }
        });
      },
      //取url里边参数
      RequestParameter() {
        var url = window.location.search; //获取url中"?"符后的字串
        var theRequest = new Object();
        if (url.indexOf("?") != -1) {
          var str = url.substr(1);
          var strs = str.split("&");
          for (var i = 0; i < strs.length; i++) {
            theRequest[strs[i].split("=")[0]] = (strs[i].split("=")[1]);
          }
        }
        return theRequest
      },
 }
  mounted() {
      //url传id传进来
      this.notice_id = this.RequestParameter()["notice_id"];
    }