【uniapp】Table固定首行、列，能够分级

已将前期写的uniapp表格组件封装成组件，上传至uniapp组件库。可以根据以下api进行使用，此组件只适用于app端（因为浏览器环境就可以正常写了，不用这么麻烦）。
组件地址：添加链接描述

Table 固定首列、首行

请添加图片描述

主要提供能table首列、首行功能

根据主题颜色变化：

属性	值类型	说明
tableHeader	object	固定首行时，头部数据

classifyData	object	传入的最左侧大分类数据
headerKey	string	当不使用slot修改头部，渲染数据的属性
leftFixKey	string	当不使用slot修改左侧固定栏，渲染数据的属性
contentKey	string	当不使用slot修改body展现数据第一层，渲染数据的属性
classItemKey	string	传入的最左侧大分类数据具体属性
unitKey	string	当不使用slot修改body展现数据第二层，渲染数据的属性
classify	string	左侧有分类分级时需要传入用来做大类区分的属性名
leftFixWidth	string	左侧固定列的宽度
headerTitle	string	表格的title
headerStyle	object	修改表头单元格样式
leftFixStyle	object	修改左侧固定栏单元格样式
contentStyle	object	修改内容单元格样式

用法：（如不需要修改单元格，可以不适用slot）

<template>
	<view>
		<chenfly-table :tableContentLeftFixed="tableContentLeftFixed"
				 :tableHeader="tableHeader"
				 :tableContent="tableContent"
				 :classifyData="classifyData"
				 :headerStyle="headerStyle"
				 :headerTitle="headerTitle"
				 headerKey="name"
				 leftFixWidth="15%"
				 contentKey="content"
				 unitKey="name"
				 classify="id"
				 classItemKey="class"
				 >
			<template v-slot:header="{header}">
				<view>{{header.name}}</view>
			</template>
			<template v-slot:leftFix="{leftFix}">
				<view>{{leftFix.name}}</view>
			</template>
			<template v-slot:content="{content}">
				<view>{{content}}</view>
			</template>
			<template v-slot:classifyItem="{classifyItem}">
				<view>{{classifyItem}}</view>
			</template>
		</chenfly-table>
	</view>
</template>

<script>
	export default{
		data(){
			return {
				tableHeader: [{name:'09:00'},{name:'10:00'},{name:'11:00'},{name:'12:00'},{name:'13:00'},{name:'14:00'},{name:'15:00'}],
				tableContent: [{
					content: [1,2,3,4,5,6,7],
				},{
					content: [1,2,3,4,5,6,7],
				},{
					content: [1,2,3,4,5,6,7],
				},{
					content: [1,2,3,4,5,6,7],
				},{
					content: [1,2,3,4,5,6,7],
				},{
					content: [1,2,3,4,5,6,7],
				}],
				classifyData: [{
					id:'指标一',
					class: [{
						name: '测试1'
					},{
						name: '测试2'
					},{
						name: '测试3'
					}]
				},{
					id:'指标二',
					class: [{
						name: '测试4'
					},{
						name: '测试5'
					}]
				},{
					id:'指标三',
					class: [{
						name: '测试1',
						style: {minHeight: '60px',display:'flex',alignItems: 'center'}
					}]
				}],
				headerStyle: {height:'100%'},
				headerTitle: "题目"
			}
		}
	}
</script>

<style>
</style>

不足之处：
1、分级只能一级，多级不支持
2、通过计算出的分级，所以渲染时候有点慢
后期会慢慢更新，大家有问题可以交流~~~

【uniapp】Table固定首行、列，能够分级

Table 固定首列、首行

悦读