大量数据的表格添加滚动条

src/views/abnormalAlarm/components/tableList.vue

@@ -9,8 +9,9 @@
     :loading="loading"
     :pagination="pagination"
     :customRow="customRow"
-    :rowClassName="() => canSelect? 'custom-table-row': ''"
+    :rowClassName="() => (canSelect ? 'custom-table-row' : '')"
     @change="handleTableChange"
+    :scroll="{ y: 900 }"
   >
     <!-- 处理 scopedSlots -->
     <template v-for="slotName of scopedSlotsKeys" :slot="slotName" slot-scope="text, record, index">
@@ -23,45 +24,45 @@ export default {
   props: {
     list: {
       type: Array,
-      default: () => []
+      default: () => [],
     },
     columns: {
       type: Array,
-      default: () => []
+      default: () => [],
     },
     size: {
       type: String,
-      default: 'middle'
+      default: 'middle',
     },
     rowKey: {
       type: String,
-      default: 'id'
+      default: 'id',
     },
     loading: {
-      type: Boolean
+      type: Boolean,
     },
     pagination: {
-      type: [Object, Boolean]
+      type: [Object, Boolean],
     },
     selectedRowKeys: {
-      type: Array
+      type: Array,
     },
     selectionRows: {
-      type: Array
+      type: Array,
     },
     canSelect: {
       type: Boolean,
-      default: true
+      default: true,
     },
     multiple: {
       type: Boolean,
-      default: false
+      default: false,
-    }
+    },
   },
   data() {
     return {
       innerSelectedRowKeys: [],
-        innerSelectedRows: []
+      innerSelectedRows: [],
     }
   },
   methods: {
@@ -76,28 +77,27 @@ export default {
               return
             }
             if (this.innerSelectedRowKeys.includes(key)) {
-               const findIndex = this.innerSelectedRowKeys.findIndex(k => k == key)
+              const findIndex = this.innerSelectedRowKeys.findIndex((k) => k == key)
               this.innerSelectedRowKeys.splice(findIndex, 1)
-              this.$emit("cancleRowClick")
+              this.$emit('cancleRowClick')
             } else {
               if (this.multiple) {
                 this.innerSelectedRowKeys.push(key)
-              }
+              } else {
-              else {
                 this.innerSelectedRowKeys = [key]
-                this.$emit("selectRowClick",record)
+                this.$emit('selectRowClick', record)
               }
             }
           },
           dblclick: () => {
-            this.$emit("rowDbclick",record)
+            this.$emit('rowDbclick', record)
+          },
         },
-        }
       }
     },
     handleTableChange(pagination, filters, sorter) {
       this.$emit('change', pagination, filters, sorter)
-    }
+    },
   },
   watch: {
     selectedRowKeys(val) {
@@ -106,16 +106,16 @@ export default {
     innerSelectedRowKeys() {
       this.$emit('update:selectedRowKeys', this.innerSelectedRowKeys)
       this.innerSelectedRows = this.innerSelectedRowKeys.map((key) => {
-        return this.list.find(item => item[this.rowKey] === key)
+        return this.list.find((item) => item[this.rowKey] === key)
       })
       this.$emit('update:selectionRows', this.innerSelectedRows)
-    }
+    },
   },
   computed: {
     scopedSlotsKeys() {
       return Object.keys(this.$scopedSlots)
-    }
+    },
-  }
+  },
 }
 </script>
 <style lang="less">