uniapp 上下滚动，头部固定，左右滚动，左侧边栏固定布局

情景：上下滚动，头部固定，左右滚动，左侧固定，表格单元格宽度固定，单元格高度根据内容自动换行，同一行高度一致

方法：使用sticky粘性定位，将首行、首列固定，使用表格table布局，实现高度一致

结构

样式

逻辑

export default {
	data() {
		return {
			tableColumn: [
				{ id: 'language', name: '语文' },
				{ id: 'math', name: '数学' },
				{ id: 'english', name: '英语' },
				{ id: 'politics', name: '政治' },
				{ id: 'biology', name: '生物' },
			],
			person: ['宋江', '卢俊义', '吴用', '公孙胜', '关胜', '林冲', '花容', '柴进', '李逵', '宋江', '卢俊义', '吴用', '公孙胜', '关胜', '林冲', '花容', '柴进', '李逵'],
			min: 60,
			max: 100,
			titleWidth: 200,
			contentWidth: 250
		}
	},
	computed: {
		tableStyle() {
			const width = this.titleWidth + this.tableColumn.length * this.contentWidth;
			return `width: ${width}rpx`;
		},
		tableData() {
			const tableData = this.person.map((name, index) => {
				const obj = this.tableColumn.reduce((result, item) => {
					result[item.id] = Math.ceil(Math.random() * (this.max - this.min) + this.min);
					return result;
				}, {});
				return {
					id: String(index + 1),
					name,
					...obj
				};
			});
			console.log(tableData);
			// [{"id":1,"name":"宋江","language":90,"math":69,"english":98,"politics":89,"biology":85}]
			return tableData;
		}
	}
}

参考：上下滚动，头部固定，左右滚动，左侧边栏固定布局 - 一个大柚子~ - 博客园