效果:
html代码:
<div class="table">
<thead class="table1">
<tr>
<th class="th1 w35">表格头</th>
<th>1</th>
<th>2</th>
<th>3</th>
</tr>
</thead>
<tbody v-if="tableData1.list.length > 0">
<tr v-for="(item, index) in tableData1.list" :key="index">
<td class="td1 w35">{{ 0 }}</td>
<td>{{ 1 }}</td>
<td>{{ 2 }}</td>
<td>{{ 3 }}</td>
</tr>
</tbody>
<tbody v-else data_empty_reminder="暂无数据" align="center">
<template>
<div class="nodata1">暂无数据</div>
</template>
</tbody>
</div>
css:
使用伪类::before展示表格头前的图片
.table {
width: 100%;
border: 2px solid #f0f0f0;
border-radius: 10px;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
text-align: center;
margin-bottom: 30px;
thead {
color: #666666;
position: relative;
&.table1 {
background-color: rgba(90, 159, 255, 0.05);
}
.th1 {
position: relative;
}
.th1::before {
position: absolute;
left: 14px;
top: 50%;
transform: translateY(-50%);
width: 30px;
height: 30px;
content: ' ';
display: inline-block;
background: url('@/assets/warehouse/images/home/thIcon1.png') no-repeat;
background-size: 30px 30px;
}
}
}
// tbody无数据居中
[data_empty_reminder]:empty:before {
content: attr(data_empty_reminder);
text-align: center;
width: 100%;
height: 100px;
line-height: 100px;
color: rgb(199, 199, 199);
display: block;
}
tbody[data_empty_reminder] {
display: table-caption !important;
caption-side: bottom;
border: 2px solid #f0f0f0;
border-top: 0;
color: rgb(199, 199, 199);
padding: 20px 0 !important;
}
tbody[data_empty_reminder]:empty:before {
display: table-row;
}