因为在移动端要展现表格数据量比较多,数据滚动的时候能实现锁列锁行。没找到很合适的控件,用css实现了个简单的表格,关键属性是 position:sticky,代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.wrapper{
overflow: auto;
height: 50vh;
width: 100%;
border:1px solid red;
border-bottom: 0;
border-right: 0;
}
.wrapper>table {
width: 100%;
table-layout: fixed;
border-collapse:collapse;
}
.wrapper>table th,td {
width: 80px;
height: 40px;
/* border-top :1px solid #ccc; */
/* border-left :1px solid #ccc; */
border-right :1px solid #ccc;
border-bottom :1px solid #ccc;
box-sizing: border-box;
}
.wrapper>table>thead th{
position: sticky;
top:0;/*标题在上*/
background-color: pink;
}
.wrapper>table td:first-child, th:first-child {
position:sticky;
left:0; /* 首行在左 */
background-color: lightblue;
}
.wrapper>table th:first-child {
z-index:2;/*控制始终位于顶层*/
}
</style>
</head>
<body>
<div id="app">
<div class="wrapper">
<table>
<thead>
<tr>
<th v-for="item in 10">标题</th>
</tr>
</thead>
<tbody>
<tr v-for="item in 20">
<td v-for="column in 10">{{column===1?'锁定列':column}}</td>
</tr>
</tbody>
</table>
</div>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const { createApp } = Vue
createApp({
data() {
return {
message: 'Hello Vue!'
}
}
}).mount('#app')
</script>
</body>
</html>