app-station-control-frontend_v1/pages/fault-alarm/components/FaultTable.vue

<template>
	<scroll-view class="uni-container" scroll-y="true" @scrolltolower='scrollbottom'>
		<uni-table ref="table" :loading="loading" border stripe emptyText="暂无更多数据">
			<uni-tr class="headerFix">
				<uni-th width="120">告警设备</uni-th>
				<uni-th width="144">告警标识</uni-th>
				<uni-th width="200">告警信息</uni-th>
				<uni-th width="162">告警开始时间</uni-th>
				<uni-th width="162">告警结束时间</uni-th>
				<uni-th width="132">告警状态</uni-th>
				<uni-th align="center" width="80">操作</uni-th>
			</uni-tr>

			<uni-tr v-for="(item, index) in datalist" :key="index">
				<uni-td width="120">{{ item.equipment }}</uni-td>
				<uni-td width="144">{{ item.code }}</uni-td>
				<uni-td width="200">{{ item.info }}</uni-td>
				<uni-td width="162">{{ item.beginTime }}</uni-td>
				<uni-td width="162">{{ item.endTime }}</uni-td>
				<uni-td width="132">{{ item.state===0?'待处理':item.state === 1?'处理中':'已处理' }}</uni-td>
				<uni-td width="80" align="center"><view class="editbtn">处理</view></uni-td>
			</uni-tr>
		</uni-table>
	</scroll-view>
</template>

<script>
	export default {
		name: "PublicTable",
		props: ['loading', 'datalist'],
		data() {
			return {

			};
		},
		methods:{
			scrollbottom(){
				console.log('scrollbottom')
			}
		}
	}
</script>

<style lang="scss" scoped>
	.editbtn {
		color: #91FDB9;
	}

	.tableHeader {
		display: flex;
	}

	.uni-group {
		display: flex;
		align-items: center;
		justify-content: center;

		view:first-child {
			margin-right: 15px;
		}
	}

	.uni-container {
		margin-top: 16px;
		height: 523px;
		box-sizing: border-box;
		padding-top: 36px;
	}

	

	::v-deep .uni-table-scroll {
		width: 998px;
		height: 100%;
	}
	::v-deep .table--border {
		border: none;
	}
	.headerFix{
		position:fixed;
		left: 241px;
		z-index: 1;
		top: 175px;
	}
	::v-deep .uni-table {
		background: none;
		
		.empty-border {
			border: none;
			height: 80px;
			line-height: 80px;
		}

		.uni-table-th {
			height: 46px;
			background: #1D283E;
			box-shadow: 0px 1px 0px 0px #2F3C86;
			font-weight: 600;
			color: #FFFFFF;
			font-size: 14px;
			padding: 12px 8px;
		}

		.uni-table-td {
			font-weight: 400;
			color: #FFFFFF;
			font-size: 14px;
			height: 46px;
			line-height: 38px;
		}

		.uni-table-tr:nth-child(n + 2):hover {
			background-color: #1e2f36;
		}
	}
	
	::v-deep .table--stripe .uni-table-tr:nth-child(2n + 3) {
		background-color: #141B2B;
		box-shadow: 0px 1px 0px 0px #292D46, 0px -1px 0px 0px #292D46;
	}
</style>