table表格校验(el-form内嵌套el-table)

320 阅读1分钟
 <el-form ref="formA" label-width="80px" :model="fix_Arr" :rules="Arules">
          <el-form-item id="fixclass">
            <template>
              <el-table ref="mytableA" border :data="fix_Arr.applayList" style="width: 100%">
                <el-table-column :label="table_date" align="center">
                  <template slot-scope="scope">
                    <el-form-item :prop="'applayList.' + scope.$index + '.date'" :rules="Arules.date">
                      <el-date-picker v-model="scope.row.date" align="right" size="mini" style="width: 100%" type="date" placeholder="年-月-日" value-format="yyyy-MM-dd" />
                    </el-form-item>
                  </template>
                </el-table-column>
                <el-table-column :label="table_fee" align="center">
                  <template slot-scope="scope">
                    <el-form-item :prop="'applayList.' + scope.$index + '.fee'" :rules="Arules.fee">
                      <el-input v-model="scope.row.fee" size="mini" placeholder="单行输入" />
                    </el-form-item>
                  </template>
                </el-table-column>
                <el-table-column :label="table_note" align="center">
                  <template slot-scope="scope">
                    <el-form-item :prop="'applayList.' + scope.$index + '.note'" :rules="Arules.note">
                      <el-input v-model="scope.row.note" size="mini" placeholder="单行输入" />
                    </el-form-item>
                  </template>
                </el-table-column>
                <el-table-column label="操作" style="width: 77px" align="left">
                  <template slot-scope="scope">
                    <i class="el-icon-circle-plus-outline" style="font-size: 25px" @click="applayaddRow(fix_Arr.applayList)" />
                    <i v-if="fix_Arr.applayList.length > 1 && scope.$index > 0" class="el-icon-remove-outline" style="font-size: 25px" @click="applaydeleteRow(scope.$index, fix_Arr.applayList)" />
                  </template>
                </el-table-column>
              </el-table>
            </template>
          </el-form-item>
</el-form>
<script>
export default {
  data() {
    return {
    //rules校验
      Arules: {
        date: [{ required: true, message: "请选择维修日期", trigger: "blur" }],
        fee: [{ required: true, message: "请输入维修费用", trigger: "blur" }],
        note: [{ required: true, message: "请输入备注", trigger: "blur" }],
      },
      fix_Arr: {
        applayList: [
          // {
          //   date: "",
          //   fee: "",
          //   note: "",
          // },
        ],
      //动态lable名,作为维修和违纪区分 
       table_date: "维修日期1111",
       table_fee: "维修费用(元)",
       table_note: "备注",
      },
    },
  },
  methods:{
    // 添加表格里的行(申请状态)
    applayaddRow(applayList) {
      applayList.push({
        date: "",
        fee: "",
        note: "",
      });
    },
  }
 }