<template>
<div>
<table border="1">
<thead>
<tr>
<th class="width-5">序号</th>
<th class="width-15">天气</th>
<th class="width-20">温度</th>
<th class="width-20">湿度</th>
<th class="width-20">光照</th>
<th class="width-20">时间</th>
</tr>
</thead>
<tbody>
<tr v-for='(item,index) in tableData' :key='index'>
<td class="width-5">{{index+1}}</td>
<td class="width-15">{{item.pName}}</td>
<td class="width-20">{{item.name}}</td>
<td class="width-20">{{item.num}}</td>
<td class="width-20">{{item.num}}</td>
<td class="width-20">{{item.time}}</td>
</tr>
</tbody>
</table>
</div>
</template>
<script>
export default {
data() {
return {
tableData: [{
pName: '安',
name: '安保0111111111111111111111111111111111111111111111111111111111',
deptName: '安保部',
num: 12,
time:'2023/01/01 12:00:00'
},
{
pName: '安',
name: '安保02',
deptName: '安保部',
num: 56,
time:'2023/01/01 12:00:00'
},
{
pName: '安',
name: '安保03',
deptName: '安保部',
num: 1,
time:'2023/01/01 12:00:00'
},
{
pName: '陈默',
name: 'can01',
deptName: '餐饮部',
num: 36,
time:'2023/01/01 12:00:00'
},
{
pName: '陈默',
name: 'can02',
deptName: '餐饮部',
num: 30,
time:'2023/01/01 12:00:00'
},
{
pName: '房',
name: '房01',
deptName: '房务部',
num: 89,
time:'2023/01/01 12:00:00'
},
],
};
},
mounted() {
},
methods: {
}
};
</script>
<style lang="scss" scoped>
table{
width:100%;
table-layout:fixed;
border-collapse:collapse;
}
table,th, td{
border: 1px solid #dfe6ec;
}
thead{
background-color: #f8f8f9;
color: #515a6e;
th{
padding:8px 0;
text-align: center;
}
}
tbody tr:hover,
tbody tr:nth-of-type(2n){
background-color: #f8f8f9;
}
tbody{
td{
font-size: 13px;
color:#606266;
padding:7px 0;
font-weight: 500;
text-align: center;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
}
.width-5{
width:5%;
}
.width-10{
width:10%;
}
.width-15{
width:15%;
}
.width-20{
width:20%;
}
</style>
普通table的样式
最新推荐文章于 2024-07-25 15:07:09 发布