fix 提示填写必填项，应展开显示，不然看不到必填的位置

src/components/JExpandTable.vue

@@ -2,10 +2,13 @@
   <a-table
     v-bind="$attrs"
     v-on="$listeners"
+    :row-key="rowKey"
     :bordered="bordered"
     :scroll="{x: '100%'}"
     :row-class-name="lineCanExpand"
     :columns="columns"
+    :expandedRowKeys.sync="expandedRowKeys"
+    :pagination="ipagination"
     :data-source="dataSource">
     <!-- 如果插槽是作用域插槽，将作用域插槽的props包装成对象传递给slot -->
     <template v-for="(_, slotName) in $scopedSlots" :slot="slotName" slot-scope="text, record, index">
@@ -26,7 +29,7 @@
       <template v-if="formIsDepend">
         <template v-for="(value, key) in extraForm">
           <template v-if="record[formIsDepend] === key">
-            <a-form-model :key="key" :model="record" :rules="value.rules" :ref="`ruleForm${index}`">
+            <a-form-model :key="key" :model="record" :rules="value.rules" :ref="`ruleForm${record[rowKey]}`">
               <a-form-model-item v-for="form in value.formArr"
                                  :key="form.dbFieldName"
                                  :labelCol="labelCol"
@@ -235,6 +238,27 @@ export default {
       type: [String, Number],
       required: false,
       default: null
+    },
+    // 表格行数据的主键
+    rowKey: {
+      type: String,
+      required: false,
+      default: 'id'
+    },
+    // 分页参数
+    pagination: {
+      type: [Boolean, Object],
+      required: false,
+      default: false
+    }
+  },
+  watch: {
+    pagination: {
+      handler (val) {
+        this.ipagination = Object.assign({}, val)
+      },
+      deep: true,
+      immediate: true
     }
   },
   data () {
@@ -246,25 +270,25 @@ export default {
         sm: 16
       },
       // 本系统限制可以上传的文件格式
-      canUploadType: 'pdf,docx,doc,xlsx,xls,ppt,pptx,rar,zip,jpg,jpeg,png,avi,wmv,mov,rm,mp4,cad'
+      canUploadType: 'pdf,docx,doc,xlsx,xls,ppt,pptx,rar,zip,jpg,jpeg,png,avi,wmv,mov,rm,mp4,cad',
+      ipagination: {},
+      expandedRowKeys: []
     }
   },
   methods: {
     submit () {
+      console.log(this.rowKey)
       const arr = []
       for (const i in this.dataSource) {
         if (this.$refs[`ruleForm${i}`] && this.$refs[`ruleForm${i}`][0]) {
           this.$refs[`ruleForm${i}`][0].validate(valid => {
-            arr[i] = valid
+            arr[i] = { valid, rowKey: this.dataSource[i][this.rowKey], index: i }
           })
         } else {
-          // arr[i] = false
           // 表单都没有渲染，说明没有展开过，也就是未填状态
           if (this.formIsDepend) {
             if (this.dataSource[i][this.formIsDepend]) {
               // 需要依赖某个字段，获取当前行该字段时，扩展表单是否有必填项
-              // console.log(this.dataSource[i])
-              // console.log(this.extraForm[this.dataSource[i][this.formIsDepend]])
               const currRowExtraFormFormArr = this.extraForm[this.dataSource[i][this.formIsDepend]].formArr
               const currRowExtraFormRules = this.extraForm[this.dataSource[i][this.formIsDepend]].rules
               let isHaveRequired = false
@@ -274,24 +298,18 @@ export default {
                   isHaveRequired = true
                 }
               }
-              // for (const item in currRowExtraFormRules) {
-              //   if (currRowExtraFormRules[item].required === true) {
-              //     // 有任意一个字段有必填,但没有内容
-              //     isHaveRequired = true
-              //   }
-              // }
               if (isHaveRequired) {
                 // 任意一个字段有必填，她又没展开过，校验不通过
-                arr[i] = false
+                arr[i] = { valid: false, rowKey: this.dataSource[i][this.rowKey], index: i }
               } else {
-                arr[i] = true
+                arr[i] = { valid: true, rowKey: this.dataSource[i][this.rowKey], index: i }
               }
             } else if (this.lineCanExpandField && this.dataSource[i][this.lineCanExpandField] !== this.lineCanExpandValue) {
               // 如果这行数据本身不需要填写
-              arr[i] = true
+              arr[i] = { valid: true, rowKey: this.dataSource[i][this.rowKey], index: i }
             } else {
               // 依赖的字段都没有填
-              arr[i] = false
+              arr[i] = { valid: false, rowKey: this.dataSource[i][this.rowKey], index: i }
             }
           } else {
             // 没有依赖的字段
@@ -302,23 +320,35 @@ export default {
                 isHaveRequired = true
               }
             }
-            // for (const item in this.extraForm.rules) {
-            //   if (this.extraForm.rules[item].required === true) {
-            //     // 有任意一个字段有必填
-            //     isHaveRequired = true
-            //   }
-            // }
             if (isHaveRequired) {
               // 任意一个字段有必填，她又没展开过，校验不通过
-              arr[i] = false
+              arr[i] = { valid: false, rowKey: this.dataSource[i][this.rowKey], index: i }
             } else {
-              arr[i] = true
+              arr[i] = { valid: true, rowKey: this.dataSource[i][this.rowKey], index: i }
             }
           }
         }
       }
-      console.log(arr)
-      if (arr.includes(false)) {
+      if (arr.some(tt => !tt.valid)) {
+        const errorRows = arr.filter(tt => !tt.valid)
+        const errorIndex = errorRows.map(tt => tt.index)
+        const firstIndex = errorRows[0].index
+        const firstPage = parseInt((Number(firstIndex) + 1) / this.ipagination.pageSize) + 1
+        this.ipagination.current = firstPage
+        this.$nextTick(() => {
+          this.expandedRowKeys = [...this.expandedRowKeys, ...errorRows.map(tt => tt.rowKey)]
+          let timer = setTimeout(() => {
+            this.$nextTick(() => {
+              errorIndex.forEach(index => {
+                if (this.$refs[`ruleForm${index}`] && this.$refs[`ruleForm${index}`][0]) {
+                  this.$refs[`ruleForm${index}`][0].validate()
+                }
+              })
+            })
+            clearTimeout(timer)
+            timer = null
+          }, 100)
+        })
         return false
       } else {
         return true