vue | 移动端table表格的表格头图片样式设置+暂无数据展示

效果：

 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;
	}