-
示例图
1634197535(1).jpg
- 代码
// 原文出处我找不到了 ，自己项目里用过，在此基础上做了修改 ，以下是修改之后的
// 本人只是为了做个笔记同时也希望能帮助到大家，如有疑问请在评论区留言。
<template>
<div class="table-container">
<div id="table">
<div class="tbHeadFix">
<div class="theadDiv" id="theadDiv">
<table cellpadding="0" cellspacing="0">
<thead>
<tr>
<th v-for="(col, index) in column" :key="index" align="center">
<div :style="'width:' + handleColumnWidth(col)" class="col">
{{ col.key }}
</div>
</th>
</tr>
</thead>
</table>
</div>
<div class="tbodyDiv" id="tbodyDiv">
<table border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr v-for="(row, i) in dataSource" :key="i">
<td v-for="(col, index) in column" :key="index" align="center">
<div :style="'width:' + handleColumnWidth(col)" class="col">
{{ handleColumn(row[col.key], col.key, col) }}
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
props: {
column: { default: () => [] },
dataSource: { default: () => [] }
},
data() {
return {};
},
mounted() {
document.getElementById("tbodyDiv").onscroll = function(e) {
document.getElementById("theadDiv").scrollLeft = e.target.scrollLeft;
};
},
methods: {
handleColumnWidth(col) {
return col.width ? `${col.width}rem` : "2rem";
},
handleColumn(val, key, col) {
// console.log(val, key, col, "val,key");
return val;
},
// 数字千分位添加逗号
addCommas(nStr) {
nStr += "";
let x = nStr.split(".");
let x1 = x[0];
let x2 = x.length > 1 ? "." + x[1] : "";
let rgx = /(\d+)(\d{3})/;
while (rgx.test(x1)) {
x1 = x1.replace(rgx, "$1" + "," + "$2");
}
return x1 + x2;
}
}
};
</script>
<style scoped lang="less">
.table-container {
position: relative;
width: 100%;
height: 100%;
background-color: #fff;
#table {
width: 100%;
height: 245px;
border: 1px solid #ccc;
}
}
.tbHeadFix {
height: 100%;
font-size: 13px;
.theadDiv {
display: flex;
align-items: center;
width: 100%;
height: 46px;
overflow: hidden;
background-color: #f1f1f1;
table {
}
}
.tbodyDiv {
width: 100%;
height: 198px;
overflow: auto;
table {
}
}
}
table {
height: 100%;
thead {
tr {
th {
height: 45px;
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
.col {
padding: 5px 5px;
box-sizing: border-box;
}
}
}
}
tbody {
tr {
td {
border-bottom: 1px solid #ccc;
border-right: 1px solid #ccc;
.col {
padding: 10px 5px;
box-sizing: border-box;
}
}
}
}
}
</style>
网友评论