Browse Source

table加滚动条

dongjh 7 months ago
parent
commit
fe14056c8c

+ 34 - 1
src/views/module_interLock/InterlockSummary/InterlockSummaryList.vue

@@ -84,9 +84,9 @@
       <a-table
       <a-table
         ref="table"
         ref="table"
         size="middle"
         size="middle"
-        :scroll="{x:true}"
         bordered
         bordered
         rowKey="id"
         rowKey="id"
+        :scroll="{ y: 'calc(75vh - 85px)' }"
         :columns="columns"
         :columns="columns"
         :dataSource="dataSource"
         :dataSource="dataSource"
         :pagination="ipagination"
         :pagination="ipagination"
@@ -215,6 +215,7 @@
             title:'联锁名称',
             title:'联锁名称',
             // align:"center",
             // align:"center",
             dataIndex: 'interlockname',
             dataIndex: 'interlockname',
+            width: 300,
             // ellipsis: true,
             // ellipsis: true,
             customRender:(text,record,index)=> {
             customRender:(text,record,index)=> {
               var children = (
               var children = (
@@ -789,4 +790,36 @@
   /deep/.ant-table-thead > tr > th {
   /deep/.ant-table-thead > tr > th {
     text-align: center; 
     text-align: center; 
   }
   }
+  //表格滚动条
+/deep/.ant-table-body {
+  overflow-x: hidden;
+  &::-webkit-scrollbar {
+    /*滚动条整体样式*/
+    width: 5px;
+    height: 1px;
+  }
+ 
+  &::-webkit-scrollbar-thumb {
+    /*滚动条里面的滑块*/
+    border-radius: 5px;
+    background: rgba(100, 177, 240, 0.5);
+  }
+ 
+  &::-webkit-scrollbar-track {
+    /*滚动条里面轨道背景*/
+    border-radius: 5px;
+    background: rgba(0, 0, 0, 0.1);
+  }
+}
+.ant-table-tbody > tr > td {
+  white-space: break-spaces;
+}
+/deep/.ant-table-fixed-header > .ant-table-content > .ant-table-scroll > .ant-table-body {
+  overflow-y: auto !important;
+}
+// /deep/ .ant-table-fixed-left .ant-table-body-outer .ant-table-body-inner {
+
+//   max-height: calc(40vh - 412px) !important;
+
+// }
 </style>
 </style>