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

src/views/abnormalAlarm/components/tableList.vue

@@ -1,6 +1,6 @@
 <template>
   <a-table
-   class="custom-table"
+    class="custom-table"
     v-bind="$attrs"
     :data-source="list"
     :columns="columns"
@@ -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: []
+      innerSelectedRowKeys: [],
+      innerSelectedRows: [],
     }
   },
   methods: {
@@ -72,50 +73,49 @@ export default {
         class: this.innerSelectedRowKeys.includes(key) ? 'ant-table-row-selected' : '',
         on: {
           click: () => {
-            if(!this.canSelect) {
+            if (!this.canSelect) {
               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) {
+              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) {
-        this.innerSelectedRowKeys = val
+    selectedRowKeys(val) {
+      this.innerSelectedRowKeys = val
     },
-    innerSelectedRowKeys () {
+    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">