<template>
<div class="table">
<div class="thead">
<div class="tr" style="padding-right: 10px;">
<div class="td" v-for="col in columns" :key="col.key">{{ col.title }}</div>
</div>
</div>
<div class="tbody" :style="{height: tableheight}" style="overflow-y: scroll;">
<div class="tr" v-for="row in data" :key="row.key" style="margin-bottom: 10px;">
<div class="td" v-for="col in columns" :key="col.key">{{ row[col.key]?row[col.key]:"-" }}</div>
</div>
</div>
</div>
</template>
<script>
export default {
props: {
columns: {
type: Array,
default () {
return [];
}
},
data: {
type: Array,
default () {
return [];
}
},
tableheight: {
type: [String, Number],
default: "500px",
},
}
};
</script>
<style lang="less" scoped>
::-webkit-scrollbar {
-webkit-appearance: none;
width: 6px;
height: 6px;
};
::-webkit-scrollbar-track {
background: rgba(11,31,100,0.1);
border-radius: 0;
};
::-webkit-scrollbar-thumb {
cursor: pointer;
background: rgb(2,124,233);
transition: color 0.2s ease;
border-radius: 15px;
};
.table{
width: 100%;
padding: 5px;
.thead{
.tr{
display: flex;
justify-content: space-between;
color: rgba(255,255,255,0.6);
font-weight: 600;
white-space: nowrap;
.td{
padding: 8px 16px;
text-align: center;
width: @td-width;
}
.td:nth-child(1){
width: @td-1-width;
}
/* .td:nth-child(2){
margin-right: 20px;
} */
}
}
.tbody{
.tr{
width: 100%;
display: flex;
background-color: rgba(8,32,85,1);
.td{
padding: 8px 16px;
text-align: center;
width: @td-width;
}
.td:nth-child(1){
width: @td-1-width;
}
.td:nth-child(2){
padding-right: 30px;
}
.td:nth-child(3){
padding-right: 40px;
}
.td:nth-child(4){
padding-right: 50px;
}
.td:nth-child(5){
padding-right: 50px;
}
}
}
}
</style>
封装个table
最新推荐文章于 2024-08-24 13:47:49 发布