表格单元格点击

src/views/securityCheck/components/securityCheckHeader.vue

@@ -174,8 +174,8 @@ export default {
       changeButtonLoading: false,
       optionLists: ["低风险", "优先", "普通", "高风险", "严控"],
       formData: {
-        beginDate: "",
-        endDate: "",
+        beginDate: null,
+        endDate: null,
         dateRangeRadio: "",
         selection: "",
         searchText: "",

src/views/securityCheck/components/securityCheckTable.vue

@@ -14,10 +14,10 @@
       "
       :rowClassName="rowClassName"
       bordered
-      :pagination = "pagination"
-       @change="handleTableChange"
-       :loading="loading"
-       :scroll="{ y: height }"
+      :pagination="pagination"
+      @change="handleTableChange"
+      :loading="loading"
+      :scroll="{ y: height }"
     >
       <template
         v-if="withOperateColumn"
@@ -25,10 +25,14 @@
         slot-scope="text, record"
       >
         <div class="column-operate">
-          <span class="cell-operate-edit" @click="editRow(record)">修改</span>
-          <span class="cell-operate-delete" @click="deleteRow(record)"
-            >删除</span
-          >
+          <span
+            class="cell-operate-edit"
+            @click="editRow(record)"
+          >修改</span>
+          <span
+            class="cell-operate-delete"
+            @click="deleteRow(record)"
+          >删除</span>
         </div>
       </template>
     </a-table>
@@ -37,109 +41,103 @@
 
 <script>
 export default {
-  name: "SecurityCheckTable",
+  name: 'SecurityCheckTable',
   props: {
     height: {
       type: [Number, String],
-      default: "50vh",
+      default: '50vh'
     },
     tableCols: {
       type: Array,
-      default: () => [],
+      default: () => []
     },
     tableData: {
       type: Array,
-      default: () => [],
+      default: () => []
     },
     rowKey: {
       type: String,
-      default: "key",
+      default: 'key'
     },
     withSelection: {
       type: Boolean,
-      default: false,
+      default: false
     },
     loading: {
       type: Boolean,
-      default: false,
+      default: false
     },
     showSummary: {
       type: Boolean,
-      default: false,
+      default: false
     },
-    pagination:{
-      type:Object,
-      default: null,
+    pagination: {
+      type: Object,
+      default: null
     }
   },
   data() {
     return {
-      selectedRowKeys: [],
-    };
+      selectedRowKeys: []
+    }
   },
   computed: {
     columns() {
-      return this.tableCols.map((col) => {
-        if (col.clickHandler) {
-          col.customCell = (data) => {
-            return {
-              class: "cell-click",
-              on: {
-                click: col.clickHandler,
-              },
-            };
-          };
-        }
-        if (col.children) {
-          col.children.forEach((res) => {
-            if (res.clickHandler) {
-              res.customCell = () => {
-                return {
-                  class: "cell-click",
-                  on: {
-                    click: res.clickHandler,
-                  },
-                };
-              };
+      function setClickHandler(columns) {
+        return columns.map(col => {
+          if (col.clickHandler) {
+            col.customCell = (row, rowIndex) => {
+              return {
+                class: 'cell-click',
+                on: {
+                  click: () => {
+                    col.clickHandler(row, rowIndex)
+                  }
+                }
+              }
             }
-          });
-        }
-        return col;
-      });
+          }
+          if (col.children) {
+            setClickHandler(col.children)
+          }
+          return col
+        })
+      }
+      return setClickHandler(this.tableCols)
     },
     tableWrapperHeight() {
-      return typeof this.height === "number" ? this.height + "px" : this.height;
+      return typeof this.height === 'number' ? this.height + 'px' : this.height
     },
     withOperateColumn() {
-      return this.columns.find((col) => col.dataIndex === "operation");
-    },
+      return this.columns.find(col => col.dataIndex === 'operation')
+    }
   },
   methods: {
     onSelectChange(selectedRowKeys, selectedRows) {
       // console.log(selectedRowKeys)
-      this.selectedRowKeys = selectedRowKeys;
+      this.selectedRowKeys = selectedRowKeys
     },
     rowClassName(index) {
       if (index.index % 2 == 0) {
-        return "warning-row";
+        return 'warning-row'
       } else {
-        return "warning-rows";
+        return 'warning-rows'
       }
     },
     editRow(row) {
-      console.log("edit");
+      console.log('edit')
     },
     deleteRow(row) {
-      console.log("delete");
+      console.log('delete')
     },
     clickHandler(index) {
-      console.log(index);
+      console.log(index)
     },
-    handleTableChange(pagination, filters, sorter){
-      this.$emit("handleTableChange",pagination)
+    handleTableChange(pagination, filters, sorter) {
+      this.$emit('handleTableChange', pagination)
     }
-  },
-};
+  }
+}
 </script>
 
 <style lang="scss" scoped>
@@ -153,7 +151,7 @@ export default {
       }
       .ant-table-column-title {
         font-size: 14px;
-        font-family: Helvetica, "Microsoft YaHei";
+        font-family: Helvetica, 'Microsoft YaHei';
         color: #101116;
         font-weight: bold;
       }
@@ -169,7 +167,7 @@ export default {
       }
       td {
         font-size: 14px;
-        font-family: Helvetica, "Microsoft YaHei";
+        font-family: Helvetica, 'Microsoft YaHei';
         color: #101116;
         &.cell-click {
           color: #2d67e3;