uni-app 实现表格上下左右拖拉且表头固定

最新推荐文章于 2024-06-14 16:28:37 发布
最新推荐文章于 2024-06-14 16:28:37 发布
阅读量775 收藏 3
点赞数 2
文章标签： uni-app linux 服务器
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/BelleLinQ/article/details/138715938
版权

本期分享内容：uni-app 实现表格上下左右拖拉且表头固定
1、实现效果
本次数据为假数据，请不用在意数据内容，精力放在数据结构
请添加图片描述
2、实现数据
表头如下数据：

		collapseList: [{
					"name": "判定详情",
					"index": 1,
					"children": [{
							"type": "input",
							"label": "领料单号",
							"prop": "IT3"
						},
						{
							"type": "input",
							"label": "工单",
							"prop": "REFWO"
						},
						{
							"type": "input",
							"label": "项目",
							"prop": "ITEMNUM"
						},
						{
							"type": "input",
							"label": "描述",
							"prop": "ITEM.DESCRIPTION"
						},
						{
							"type": "input",
							"label": "规格型号",
							"prop": "ITEM.HDMODEL"
						},
						{
							"type": "select",
							"label": "固定资产",
							"prop": "UDISASSET"
						},
						{
							"type": "operinput",
							"label": "描述分类",
							"prop": "UDASTCLASS"
						},
						{
							"type": "input",
							"label": "安装存放地点",
							"prop": "UDLOCDESC"
						},
						{
							"type": "input",
							"label": "发放单位",
							"prop": "ITEM.ISSUEUNIT"
						},
						{
							"type": "input",
							"label": "仓库",
							"prop": "STORELOC"
						},
						{
							"type": "input",
							"label": "专业",
							"prop": "BINNUM"
						},
						{
							"type": "input",
							"label": "专业描述",
							"prop": "BINNUM_DESC"
						},
						{
							"type": "input",
							"label": "批次",
							"prop": "LOTNUM"
						},
						{
							"type": "input",
							"label": "数量",
							"prop": "QUANTITY"
						},
						{
							"type": "input",
							"label": "单位成本",
							"prop": "UNITCOST"
						},
						{
							"type": "input",
							"label": "行成本",
							"prop": "LINECOST"
						},
						{
							"type": "input",
							"label": "领料人",
							"prop": "SUB_USER_NAME"
						},
						{
							"type": "input",
							"label": "交易日期",
							"prop": "TRANSDATE"
						}
					]
				}],

数据值详情：

		TableDatas: [
					[{
							"IT3": "18336",
							"REFWO": "",
							"ITEMNUM": "20002430",
							"ITEM.DESCRIPTION": "苹果",
							"ITEM.HDMODEL": "TC",
							"UDISASSET": "是",
							"UDASTCLASS": "1-01-01-01",
							"UDLOCDESC": "1",
							"ITEM.ISSUEUNIT": "个",
							"STORELOC": "P",
							"BINNUM": "",
							"BINNUM_DESC": "",
							"LOTNUM": "1",
							"QUANTITY": "",
							"UNITCOST": 123,
							"LINECOST": 619,
							"SUB_USER_NAME": "管理员",
							"TRANSDATE": "2024-04-09 14:35:22",
							"PO.HDCONTNUM": ""
						},
						{
							"IT3": "18337",
							"REFWO": "",
							"ITEMNUM": "10004035",
							"ITEM.DESCRIPTION": "继电器",
							"ITEM.HDMODEL": "ST3PR",
							"UDISASSET": "是",
							"UDASTCLASS": "1-01-01-01",
							"UDLOCDESC": "2",
							"ITEM.ISSUEUNIT": "个",
							"STORELOC": "P",
							"BINNUM": "",
							"BINNUM_DESC": "",
							"LOTNUM": "1",
							"QUANTITY": "",
							"UNITCOST": 49,
							"LINECOST": 49,
							"SUB_USER_NAME": "管理员",
							"TRANSDATE": "2024-04-09 14:36:26",
							"PO.HDCONTNUM": ""
						},
						{
							"IT3": "18339",
							"REFWO": "",
							"ITEMNUM": "20002430",
							"ITEM.DESCRIPTION": "油封",
							"ITEM.HDMODEL": "TC-60*85*12",
							"UDISASSET": "是",
							"UDASTCLASS": "1-01-01-02",
							"UDLOCDESC": "3",
							"ITEM.ISSUEUNIT": "个",
							"STORELOC": "P",
							"BINNUM": "DLGY",
							"BINNUM_DESC": "公用",
							"LOTNUM": "3",
							"QUANTITY": "",
							"UNITCOST": 123,
							"LINECOST": 123,
							"SUB_USER_NAME": "管理员",
							"TRANSDATE": "2024-04-09 14:46:03",
							"PO.HDCONTNUM": ""
						},
						{
							"IT3": "18340",
							"REFWO": "",
							"ITEMNUM": "20002430",
							"ITEM.DESCRIPTION": "骨架",
							"ITEM.HDMODEL": "TC",
							"UDISASSET": "是",
							"UDASTCLASS": "1-01-01-03",
							"UDLOCDESC": "4",
							"ITEM.ISSUEUNIT": "个",
							"STORELOC": "P",
							"BINNUM": "DLGY",
							"BINNUM_DESC": "公用",
							"LOTNUM": "3",
							"QUANTITY": 5,
							"UNITCOST": 123,
							"LINECOST": 619,
							"SUB_USER_NAME": "管理员",
							"TRANSDATE": "2024-04-09 14:52:11",
							"PO.HDCONTNUM": ""
						},
						{
							"IT3": "18341",
							"REFWO": "",
							"ITEMNUM": "20002430",
							"ITEM.DESCRIPTION": "骨油封",
							"ITEM.HDMODEL": "TC-60*85*12",
							"UDISASSET": "是",
							"UDASTCLASS": "1-01-01-04",
							"UDLOCDESC": "5",
							"ITEM.ISSUEUNIT": "个",
							"STORELOC": "P",
							"BINNUM": "DLGY",
							"BINNUM_DESC": "公用",
							"LOTNUM": "3",
							"QUANTITY": 5,
							"UNITCOST": 123,
							"LINECOST": 619,
							"SUB_USER_NAME": "管理员",
							"TRANSDATE": "2024-04-09 14:53:38",
							"PO.HDCONTNUM": ""
						},
						{
							"IT3": "18342",
							"REFWO": "",
							"ITEMNUM": "20002430",
							"ITEM.DESCRIPTION": "香蕉",
							"ITEM.HDMODEL": "TC",
							"UDISASSET": "是",
							"UDASTCLASS": "1-01-01-02",
							"UDLOCDESC": "6",
							"ITEM.ISSUEUNIT": "个",
							"STORELOC": "P",
							"BINNUM": "DLGY",
							"BINNUM_DESC": "公用",
							"LOTNUM": "3",
							"QUANTITY": 5,
							"UNITCOST": 123,
							"LINECOST": 619,
							"SUB_USER_NAME": "管理员",
							"TRANSDATE": "2024-04-09 14:58:23",
							"PO.HDCONTNUM": ""
						},
						{
							"IT3": "18345",
							"REFWO": "",
							"ITEMNUM": "20002430",
							"ITEM.DESCRIPTION": "草莓",
							"ITEM.HDMODEL": "60*85",
							"UDISASSET": "",
							"UDASTCLASS": "",
							"UDLOCDESC": "",
							"ITEM.ISSUEUNIT": "个",
							"STORELOC": "P",
							"BINNUM": "",
							"BINNUM_DESC": "",
							"LOTNUM": "2",
							"QUANTITY": 5,
							"UNITCOST": 123,
							"LINECOST": 619,
							"SUB_USER_NAME": "管理员",
							"TRANSDATE": "2024-04-09 15:12:23",
							"PO.HDCONTNUM": ""
						},
						{
							"IT3": "18346",
							"REFWO": "",
							"ITEMNUM": "20018969",
							"ITEM.DESCRIPTION": "隔膜阀",
							"ITEM.HDMODEL": "衬胶隔膜阀",
							"UDISASSET": "",
							"UDASTCLASS": "",
							"UDLOCDESC": "",
							"ITEM.ISSUEUNIT": "个",
							"STORELOC": "P",
							"BINNUM": "",
							"BINNUM_DESC": "",
							"LOTNUM": "1",
							"QUANTITY": 1,
							"UNITCOST": 256,
							"LINECOST": 256,
							"SUB_USER_NAME": "管理员",
							"TRANSDATE": "2024-04-18 19:21:21",
							"PO.HDCONTNUM": ""
						},
						{
							"IT3": "18347",
							"REFWO": "",
							"ITEMNUM": "20018969",
							"ITEM.DESCRIPTION": "隔膜阀",
							"ITEM.HDMODEL": "DN25，PN1",
							"UDISASSET": "",
							"UDASTCLASS": "",
							"UDLOCDESC": "",
							"ITEM.ISSUEUNIT": "个",
							"STORELOC": "P",
							"BINNUM": "",
							"BINNUM_DESC": "",
							"LOTNUM": "1",
							"QUANTITY": 1,
							"UNITCOST": 256,
							"LINECOST": 410256,
							"SUB_USER_NAME": "管理员",
							"TRANSDATE": "2024-04-18 19:27:07",
							"PO.HDCONTNUM": ""
						},
						{
							"IT3": "18348",
							"REFWO": "",
							"ITEMNUM": "20018969",
							"ITEM.DESCRIPTION": "隔膜阀",
							"ITEM.HDMODEL": "PN1.6",
							"UDISASSET": "",
							"UDASTCLASS": "",
							"UDLOCDESC": "",
							"ITEM.ISSUEUNIT": "个",
							"STORELOC": "P",
							"BINNUM": "",
							"BINNUM_DESC": "",
							"LOTNUM": "1",
							"QUANTITY": 1,
							"UNITCOST": 256.410256,
							"LINECOST": 256.410256,
							"SUB_USER_NAME": "管理员",
							"TRANSDATE": "2024-04-18 19:31:24",
							"PO.HDCONTNUM": ""
						},
						{
							"IT3": "18349",
							"REFWO": "",
							"ITEMNUM": "20018969",
							"ITEM.DESCRIPTION": "隔膜阀",
							"ITEM.HDMODEL": "DN25",
							"UDISASSET": "",
							"UDASTCLASS": "",
							"UDLOCDESC": "",
							"ITEM.ISSUEUNIT": "个",
							"STORELOC": "P",
							"BINNUM": "",
							"BINNUM_DESC": "",
							"LOTNUM": "1",
							"QUANTITY": -1,
							"UNITCOST": 256.410256,
							"LINECOST": 256.410256,
							"SUB_USER_NAME": "管理员",
							"TRANSDATE": "2024-04-18 19:52:24",
							"PO.HDCONTNUM": ""
						},
						{
							"IT3": "18350",
							"REFWO": "",
							"ITEMNUM": "20018969",
							"ITEM.DESCRIPTION": "隔膜阀",
							"ITEM.HDMODEL": "DN25",
							"UDISASSET": "",
							"UDASTCLASS": "",
							"UDLOCDESC": "",
							"ITEM.ISSUEUNIT": "个",
							"STORELOC": "P",
							"BINNUM": "",
							"BINNUM_DESC": "",
							"LOTNUM": "1",
							"QUANTITY": 22222,
							"UNITCOST": 410256,
							"LINECOST": 708832,
							"SUB_USER_NAME": "管理员",
							"TRANSDATE": "2024-04-18 19:59:56",
							"PO.HDCONTNUM": ""
						},
						{
							"IT3": "18351",
							"REFWO": "",
							"ITEMNUM": "20018969",
							"ITEM.DESCRIPTION": "隔膜阀",
							"ITEM.HDMODEL": "DN25",
							"UDISASSET": "",
							"UDASTCLASS": "",
							"UDLOCDESC": "",
							"ITEM.ISSUEUNIT": "个",
							"STORELOC": "P",
							"BINNUM": "",
							"BINNUM_DESC": "",
							"LOTNUM": "1",
							"QUANTITY": -1,
							"UNITCOST": 410256,
							"LINECOST": 410256,
							"SUB_USER_NAME": "管理员",
							"TRANSDATE": "2024-04-18 20:13:48",
							"PO.HDCONTNUM": ""
						},
						{
							"IT3": "18352",
							"REFWO": "",
							"ITEMNUM": "20018969",
							"ITEM.DESCRIPTION": "隔膜阀",
							"ITEM.HDMODEL": "DN25",
							"UDISASSET": "",
							"UDASTCLASS": "",
							"UDLOCDESC": "",
							"ITEM.ISSUEUNIT": "个",
							"STORELOC": "P",
							"BINNUM": "DLGY",
							"BINNUM_DESC": "公用",
							"LOTNUM": "1",
							"QUANTITY": 1,
							"UNITCOST": 410256,
							"LINECOST": 410256,
							"SUB_USER_NAME": "管理员",
							"TRANSDATE": "2024-04-18 20:25:25",
							"PO.HDCONTNUM": ""
						}
					]
				]

表格只展示与表头prop对应字段的数据

3、实现过程
在这里插入图片描述
tr行渲染一个表头的数据，有多少个数据表示有多少行
th则是渲染数据的单元格，第一个th存放表头，之后的th存放TableDatas的数据，每行数据对应渲染表头字段的数据
例如：
表头的prop:LOTNUM---->TableDatas：LOTNUM的值

	<th v-for="(item1,index1) in TableDatas" style="padding: 10px;">
					<view v-for="(item2,index2) in item1">
						{{index2 == item4.prop ? item2:'' }}
					</view>
	</th>

TableDatas的index2，则是值，所以直接用index2 == item4.prop（item3.children里面的prop数据)

4、实现代码
该代码的数据是组件形式传递过来的，数据结构跟上述一样，代码中的methods对使用表格没有什么用，是其他东西用到的方法可忽略。

<template>
	<view class="sub_table">
		<view class="sub_table_box">
			<table rules="all" class="sub_table_box_inside" >
				<tbody v-for="(item3,index3) in collapseList" :key="index3"
					style="padding: 10px;font-size: 16px;text-align: center;">
					<tr v-for="(item4,index4) in item3.children"
						v-if="item4.type =='input"
						style="background-color: #fff;">
						<th class="labelStyle">
							<view>{{item4.label}}</view>
						</th>
						<th v-for="(item1,index1) in TableDatas" style="padding: 10px;">
							<view v-for="(item2,index2) in item1">
								{{index2 == item4.prop ? item2:'' }}
							</view>
						</th>
					</tr>
				</tbody>
			</table>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				scrollTop: 0,
				activeStyle: { //选项卡选中时样式
					color: '#0080FF',
					fontWeight: '600'
				},
				swiperCurrent: 0,
				current: 0,
			}
		},
		props: {
			show: {
				type: Boolean,
				default: false
			},
			TableDatas: {
				type: Array
			},
			collapseList: {
				type: Array
			}
		},
		watch: { //监听数据是否有变化
			show(val) { //刷新方法
				console.log(val)
			},
			collapseList(val) {
				console.log(val)
			},
			TableDatas(val) {
				console.log(val)
			},
		},
		methods: {
			tabsChange(e) { // tabs通知swiper切换
				this.swiperCurrent = e.index;
				this.scrollTop = this.old.scrollTop
				this.$nextTick(() => {
					this.scrollTop = 0
				});
			},
			transition(e) {
				let dx = e.detail.dx;
			},
			animationfinish(e) {
				if (e.detail.current != this.swiperCurrent) {
					this.scrollTop = this.old.scrollTop
					this.$nextTick(() => {
						this.scrollTop = 0
					});
				}
				let current = e.detail.current;
				this.swiperCurrent = current;
				this.current = current;
			},
			close() {
				console.log('close');
				this.$emit('close')
			},
			scroll: function(e) {
				this.old.scrollTop = e.detail.scrollTop
			},
		}
	}
</script>
<style lang="scss" scoped>
	.warp {
		height: 100%;
		background-color: #FFFFFF;
		outline: 1px solid rgb(192, 192, 192);
	}

	/deep/.u-body-item {
		padding: 0px 4px;
	}

	.sub_table {
		height: 1500px;
		overflow: auto;
	}

	.sub_table_box {
		width: 100vw;
		height: 80vh;
		overflow: scroll;
		margin-top: 5px
	}

	.sub_table_box_inside {
		// width: 800px;
		height: 100px;
		text-align: center;
		border: 1px solid cornflowerblue;
		font-size: 16px;
		font-weight: 600;
	}

	.sub_table_box_inside_planTime {
		//盘点计划-计划时间
		width: 400px;
		height: 80vh;
		text-align: center;
		border: 1px solid cornflowerblue;
		font-size: 16px;
		font-weight: 600;
	}

	.table_tr {
		color: cornflowerblue;
		font-size: 16px;
	}

	.tablay_tr_name {
		width: 5%;
	}

	.tablay_tr_name_othername {
		width: 8%;
	}

	.sub_table_box_th_pdxq {
		width: 230px;
	}

	.labelStyle {
		position: sticky;
		left: 0;
		padding-top: 2%;
		width: 100px;
		padding: 15px;
		color: cornflowerblue;
		background-color: #fff;
	}
</style>

总结：
1、本次使用uni-app实现表格上下左右拖拉效果且表头固定，该表格适用于需要以表格形式展示数据的需求。
2、该表格展示的结构需要分开渲染：表头数据+表格数据
3、表头数据对应表格数据，可以用表格数据的index == 表头数据props，就可以进行得到对应数据的渲染效果了
4、本次效果为原创，敲码不容易，点赞再用喔~~~

Belle千
关注
  • 2
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
uni-app中table组件表格头固定
weixin_46573073的博客
09-23 7170
分别给表格标题和body加上一层view标签,要注意body表格的宽度要加view标签单独根据表头的宽度来设置。初级小码农,有不对的地方,包涵指教。简单的table表格顶部固定。
固定列头表头ListScroll
01-07
相当漂亮的报表，使用及其方便
移动端table固定表头与固定第一列
02-20
移动端项目，移动端table固定表头与固定第一列,HTML5和css3
小程序移动端 uniapp 排课表 表头固定第一列固定 跟随表体移动
小菜儿前端的博客
09-06 758
【代码】小程序移动端 uniapp 排课表 表头固定第一列固定 跟随表体移动。
uni-app下表格纯CSS方案的固定首行首列，最简单的实现方式
最新发布
taihom的专栏
06-14 339
网上找了很多表格组件，都太复杂了，下面是一个最简单的实现方式
uniapp 封装固定表头、固定列表格
jijunqing321的博客
06-29 8073
最近又有个很烦的需求，就是要在平板上渲染一张大表格，而且表格需要在向上滚动时固定表头，向左滚动时固定左侧列，uniapp是不支持table的，网上的也很难找到合适的组件，这就尴尬了。 第一时间想的是用scroll-view来做，也真就这么搞了，也搞出来，通过各种计算固定了表头和左侧列，但是最让人头疼的问题就是性能太低，H5端没问题，移动端在滚动的时候会有延迟效果，而且滚动快了会错位，还有就是抖动，硬伤！ 后来想到了sticky，尝试了一下，还真可行，写了个组件，由于是给项目写的，封装具有局限性，大家有能用得
基于Vue uni-app的自定义列表表格信息展示组件
chenchuang0128的博客
05-28 1403
随着软件技术的不断发展，前端开发面临着越来越多的挑战。特别是在业务场景复杂多变的情况下，如何提高开发效率和降低维护成本成为了关键。本文旨在探讨组件化开发在前端应用中的重要性，并以Vue uni-app自定义列表表格为例，介绍如何实施组件化开发，从而优化开发过程，提升产品质量。一、引言随着前端应用规模的不断扩大，开发复杂度也在逐渐提高。传统的整体式开发方式往往导致代码耦合度高，任何小的改动都可能引起整体逻辑的变动，这无疑增加了开发和维护的难度。因此，组件化开发成为了一种有效的解决方案。
uni-table 固定表头与数据导出为xlsx
weixin_38946164的博客
01-04 930
uni-table表格官方插件不支持表头固定，在原插件的基础上修改样式以达到固定表头目的，要点是在表头、表体外层分别加上。针对这两部分写样式。
uniapp中使用ucharts图表
weixin_62639453的博客
01-26 477
uniapp中使用ucharts图表
【移动端表格组件】uniapp简单实现H5，小程序，APP多端兼容表格功能，复制即用，简单易懂【详细注释版本】
热门推荐
seeeeeeeeeee的博客
03-02 1万+
由于最近需要做移动端的项目有个pc端的后台系统里面需要移一部分页面过来而里面就有很多的表格，我就开始惯例网上先找前人栽的树，我好乘凉然后找了一圈发现，不管是主流的移动端ui库或者网上自己写的帖子，或者uniapp的插件网站都没有看到符合我要求的表格，然后如果要改别人的源码那我看代码都要看很久，好切有些还奇奇怪怪的bug不兼容可能是别人使用了某些组件和插件之类的。导致我很多设置不生效。没错，我也改过别人的源码了，后来放弃了。H5，小程序兼容表格。移动端表格功能。多端兼容表格功能
uniapp分页功能：实现自定义table表格选中及封装分页pagination组件
hcy5201314521的博客
12-09 1273
我在这个的基础上，修改了一些样式，写了自己的一个效果图。分页组件pagination.vue。分页组件pagination.vue。灵感来源于这一篇博主的文章。
分享一个首行表头和最左列和最右列固定中间滚动的html table样式
12-22
一个首行表头、最左列和最右列固定中间滚动的html table样式。 一个首行表头、最左列和最右列固定中间滚动的html table样式。 一个首行表头、最左列和最右列固定中间滚动的html table样式。 一个首行表头、最左列和最右列固定中间滚动的html table样式。
gridview固定表头 横向滚动 纵向固定
07-25
gridview固定表头 横向滚动 纵向固定，即拖动横向滚动条时，表头随着表体移动，纵向拖动滚动条时，表头不动，实践得出来的结果 我用的是VS2010，C#
uni-app table表格
10-26
在uni-app框架中，`table`组件是一种用于展示数据的常用元素，尤其在处理列表或者表格数据时。uni-app是一个跨平台的前端开发框架，它允许开发者使用Vue.js语法编写代码，一次编写，多端运行，包括iOS、Android、H5...
uni-app登录实例的实现
10-29
总的来说，uni-app结合HBuilderX为开发者提供了高效且便捷的开发环境，实现登录功能并不复杂。通过理解uni-app的组件、API以及网络请求机制，开发者可以快速搭建起一个功能完善的登录系统。同时，不断学习和实践，...
uni-app实现select标签功能
04-27
在uni-app中实现类似html的select标签功能。选中数据后，会在下面显示出所选的数据，点删除之后，对应的选中状态也清除
uni-app实现视频文件指定目录下载并重命名
01-27
【uni-app实现视频文件指定目录下载并重命名】 在移动应用开发中，有时我们需要实现一个功能，让用户能够从网络上下载视频文件，并将其保存到特定的本地目录，同时允许用户自定义文件名。uni-app是一个基于Vue.js的...
如何固定table的表头
整理的参考资料
12-19 1021
1.html代码HTML>    HEAD>        title>title>        meta http-equiv="Content-Type" content="text/html; charset=gb2312">        style> .fixedHeaderTr {}{ position:relative; top:expression(this.offsetPa
uni-app 实现日期范围并能上下滑动
04-27
要在 uni-app 中实现日期范围并能上下滑动，可以考虑使用 uni-calendar 组件。该组件可以实现日历的展示和选择，并且支持滑动操作。在使用时，可以设置组件的 mode 属性为 "range"，表示选择日期范围。同时，可以设置组件的 scrollable 属性为 true，表示支持上下滑动。以下是一个示例代码： ``` <template> <view> <uni-calendar mode="range" scrollable></uni-calendar> </view> </template> <script> export default { data() { return {}; } }; </script> ``` 需要注意的是，uni-calendar 组件需要引入 uni-calendar 组件库，可以在项目的 manifest.json 文件中进行配置。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值