vue table 固定首列和首行

Z时代
2024-01-10
分类：综合

vue

 1 <!DOCTYPE html>
 2 <html>
 3  
 4 <head>
 5     <meta charset="UTF-8">
 6     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7     <title>Test</title>
 8     <style>
 9         table{border-collapse: collapse;}
10         th,td{padding: 5px;text-align: center;border:1px solid #999;min-width: 100px;}
11         th{background-color: #333;color: #fff;position: sticky;top:0px;}
12         td:first-child{background-color: #333;color: #fff;position: sticky;left:0px;}
13         th:first-child{position: sticky;left:0px;}
14     </style>
15     <script src="https://cdn.staticfile.org/vue/2.5.17-beta.0/vue.min.js"></script>
16     <script>
17         document.addEventListener("DOMContentLoaded",function(){
18             let t = new Vue({el:"#t"});
19         });
20     </script>
21 </head>
22  
23 <body>
24     <table id="t">
25         <thead>
26             <tr>
27                 <th v-for="(n,i) of 50">字段 {{i+1}}</th>
28             </tr>
29         </thead>
30         <tbody>
31             <tr v-for="(n,i) of 100">
32                 <td v-for="(m,j) of 50">{{j+1}}</td>
33             </tr>
34         </tbody>
35     </table>
36 </body>
37  
38 </html>