vue table表头固定，内容滚动实现

先上效果

 

 

 

  1 <template>
  2   <div class="simpTable">
  3     <table>
  4       <thead>
  5         <th
  6           v-for="(item,index) of tableHeader"
  7           :key="index"
  8         >{{ item.label }}</th>
  9       </thead>
 10       <tbody>
 11         <tr
 12           v-for="(tr,trIndex) of tableData"
 13           :key="trIndex"
 14         >
 15           <td
 16             v-for="(td,tdIndex) of tableHeader"
 17             :key="tdIndex"
 18           >
 19             {{ tr[td.prop] }}
 20           </td>
 21         </tr>
 22       </tbody>
 23     </table>
 24     <div
 25       v-if="!tableHeader.length || !tableData.length"
 26       class="simpTable__noData"
 27     > 暂无数据</div>
 28   </div>
 29 </template>
 30 
 31 <script>
 32 export default {
 33   props: {
 34     tableHeader: {
 35       type: Array,
 36       default: () => [
 37         { label: '工厂', prop: 'name' },
 38         { label: '预警天数', prop: 'value_a' },
 39         { label: '超库容数量', prop: 'value_b' }
 40       ]
 41     },
 42     tableData: {
 43       type: Array,
 44       default: () => [{
 45         name: 'a',
 46         value_a: 100,
 47         value_b: 190
 48       },
 49       {
 50         name: 'b',
 51         value_a: 100,
 52         value_b: 190
 53       },
 54       {
 55         name: 'b',
 56         value_a: 100,
 57         value_b: 190
 58       },
 59       {
 60         name: 'b',
 61         value_a: 100,
 62         value_b: 190
 63       },
 64       {
 65         name: 'c',
 66         value_a: 100,
 67         value_b: 190
 68       },
 69       {
 70         name: 'd',
 71         value_a: 100,
 72         value_b: 190
 73       }
 74       ]
 75     },
 76     titleName: {
 77       type: String,
 78       default: ''
 79     }
 80   }
 81 }
 82 </script>
 83 
 84 <style lang="scss" scope>
 85 .simpTable {
 86   width: 100%;
 87   height: 100%;
 88   box-sizing: border-box;
 89   table {
 90     display: inline-block;
 91     width: 100%;
 92     max-height: 150px;
 93     overflow-y: hidden;
 94     display: flex;
 95     flex-direction: column;
 96     font-size: 12px;
 97     thead {
 98       width: 100%;
 99       display: flex;
100       color: #c9dcfb;
101       background: rgba(30, 116, 255, 0.16);
102       flex-shrink: 1;
103       th {
104         margin: auto;
105         flex: 1;
106         min-width: 50px;
107         height: 29px;
108         display: flex;
109         justify-content: center;
110         align-items: center;
111         white-space: nowrap;
112       }
113     }
114     tbody {
115       flex: 1;
116       display: inline-block;
117       width: 100%;
118       overflow-y: auto;
119       tr {
120         width: 100%;
121         display: flex;
122         align-items: center;
123         justify-content: space-between;
124         td {
125           height: 29px;
126           white-space: nowrap;
127           flex: 1;
128           display: flex;
129           align-items: center;
130           text-align: center;
131           justify-content: center;
132           background: rgba(30, 116, 255, 0.06);
133           border-top: solid 3px rgba(19, 25, 61, 1);
134         }
135       }
136     }
137   }
138   &__noData {
139     text-align: center;
140     display: inline-block;
141     width: 100%;
142     margin-top: 10%;
143     color: #ccc;
144   }
145 }
146 </style>

 

posted @ 2022-10-13 10:14  树叶铃铛  阅读(915)  评论(0)  编辑  收藏  举报