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

<template>
	<scroll-view class="uni-container" scroll-y="true" @scrolltolower='scrollbottom'>
		<uni-table ref="table" :loading="loading" border stripe emptyText="暂无更多数据">
			<!-- <scroll-view style="width: 1000px;" scroll-x="true"> -->
			<uni-tr class="headerFix">
				<uni-th width="160">告警设备</uni-th>
				<uni-th width="260">告警信息</uni-th>
				<uni-th width="168">告警时间</uni-th>
				<uni-th width="160" align="center">是否处理</uni-th>
				<uni-th width="190" align="center">正在告警</uni-th>
				<uni-th width="80" align="center">操作</uni-th>
			</uni-tr>

			<uni-tr v-for="(item, index) in tableData" :key="index">
				<uni-td width="160">{{ item.date }}</uni-td>
				<uni-td width="260">{{ item.name }}</uni-td>
				<uni-td width="168">{{ item.name }}</uni-td>
				<uni-td width="160" align="center">{{ item.name }}</uni-td>
				<uni-td width="190" align="center">{{ item.name }}</uni-td>
				<uni-td width="80" align="center"><view class="editbtn">处理</view></uni-td>
			</uni-tr>
			<!-- </scroll-view> -->

		</uni-table>
	</scroll-view>
</template>

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

			};
		},
		methods:{
			scrollright(){
				console.log('scrollright')
			},
			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 .table--border {
		border: none;
	}

	::v-deep .uni-table-scroll {
		width: 998px;
		height: 100%;
	}
	.headerFix{
		position:fixed;
		left: 241px;
		z-index: 1;
		top: 175px;
		width: 1000px;
	}
	::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>