uniapp table左侧固定右侧可以滑动

<template>
	<view class="box">
		<view class="left">
			<block v-for="(item, index) in list" :key="index">
				<view class="Left_list">{{ item.name }}view>
			block>
		view>
		<view class="table">
			<scroll-view scroll-x>
				<view class="header" v-for="(item, index) in listData" :key="index">
					<view class="table_one">{{ item.Name }}view>
					<view class="border">{{ item.NoNursing15 }}view>
					<view class="border">{{ item.NoNursing30 }}view>
					<view class="border">{{ item.advanceAchieve }}view>
				view>
			scroll-view>
		view>
	view>
template>
<script>
export default {
	data() {
		return {
			list: [
				{
					name: ''
				},
				{
					name: '金额'
				},
				{
					name: '销量'
				},
				{
					name: '金额占比'
				}
			],
			listData: [
				{ Name: '余淑金', NoNursing15: 123, NoNursing30: 0, advanceAchieve: 0 },
				{ Name: '余淑金', NoNursing15: 0, NoNursing30: 456, advanceAchieve: 0 },
				{ Name: '余淑金', NoNursing15: 0, NoNursing30: 0, advanceAchieve: 789 },
				{ Name: '余淑金', NoNursing15: 0, NoNursing30: 0, advanceAchieve: 0 },
				{ Name: '余淑金', NoNursing15: 0, NoNursing30: 0, advanceAchieve: 0 }
			]
		};
	},
	methods: {}
};
script>
<style lang="less" scoped>
page {
	font-size: 25upx;
	padding: 10upx;
}

.box {
	display: flex;
}

.left {
	width: 190upx;
	view:nth-last-of-type(1) {
		border-bottom: 1upx solid #c8c7cc;
	}
	.Left_list {
		height: 80upx;
		width: 180upx;
		text-align: center;
		line-height: 80upx;
		border: 1upx solid #c8c7cc;
		border-bottom: 0;
		border-right: 0;
	}
}

.table {
	white-space: nowrap;
	overflow: hidden;
	height: 100%;
	border: 1upx solid #c8c7cc;
	border-bottom: 0;
	.header {
		width: 190upx;
		text-align: center;
		display: inline-block;
		view {
			height: 80upx;
			border: 1upx solid #c8c7cc;
			border-top: 0;
			border-left: 0;
			line-height: 80upx;
		}
		.table_one {
			border-top: 0;
			border-left: 0;
			position: relative;
			.table_one_img {
				position: absolute;
				left: 0;
				top: 20upx;
				width: 5upx;
				height: 40upx;
				margin-right: 20upx;
			}
		}
	}
}

.border {
}
style>

你可能感兴趣的:(uniapp table左侧固定右侧可以滑动)