uniapp 展示表格并且前端实现分页

最新推荐文章于 2024-07-19 15:37:18 发布
最新推荐文章于 2024-07-19 15:37:18 发布
阅读量2.6k 收藏 2
点赞数
文章标签： 前端 vue.js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46760480/article/details/122153151
版权
本文介绍了如何通过DCloud插件中的table样式创建可定制的表格，包括基本表格和带有固定列的布局，以及如何在Vue组件中灵活运用各种CSS类来调整表格样式。通过实例演示了如何设置表头、单元格和不同状态下的背景色，适用于数据展示和UI设计。
摘要由CSDN通过智能技术生成

实现效果

实现表格:                                                                                                                                 我是直接使用了该插件的样式table表格 - DCloud 插件市场 此插件里有更多的用法 

1.首先复制下面这些table的样式到一个文件里 并在app.vue里引入此scss 注意 文件的格式要为scss

page {
	font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
}
@for $i from 0 through 100 {
	.w-#{$i} {
		width: $i + '%';
	}
	.h-#{$i} {
		height: $i + '%';
	}
	.padding-#{$i} {
		padding: $i + rpx;
	}
	.padding-left-#{$i} {
		padding-left: $i + rpx;
	}
	.padding-right-#{$i} {
		padding-right: $i + rpx;
	}
	.padding-top-#{$i} {
		padding-top: $i + rpx;
	}
	.padding-bottom-#{$i} {
		padding-bottom: $i + rpx;
	}
	.margin-#{$i} {
		margin: $i + rpx;
	}
	.margin-left-#{$i} {
		margin-left: $i + rpx;
	}
	.margin-right-#{$i} {
		margin-right: $i + rpx;
	}
	.margin-top-#{$i} {
		margin-top: $i + rpx;
	}
	.margin-bottom-#{$i} {
		margin-bottom: $i + rpx;
	}
}
.d-table {
	display: table;
	width: 100%;
	vertical-align: middle;
	text-align: center;
	table-layout: fixed;
	font-size: 28rpx;
	word-break: break-all;
	background-color: white;
	border-collapse: collapse;
	&.primary {
		&.dark {
			.d-thead {
				background-color: #2b85e4;
			}
		}
		&.disabled {
			.d-thead {
				background-color: #a0cfff;
			}
		}
		&.light {
			.d-thead {
				background-color: #ecf5ff;
			}
		}
		.d-thead {
			background-color: #2979ff;
			color: #fff;
		}
	}
	&.success {
		&.dark {
			.d-thead {
				background-color: #18b566;
			}
		}
		&.disabled {
			.d-thead {
				background-color: #71d5a1;
			}
		}
		&.light {
			.d-thead {
				background-color: #dbf1e1;
			}
		}
		.d-thead {
			background-color: #19be6b;
			color: #fff;
		}
	}
	&.warning {
		&.dark {
			.d-thead {
				background-color: #f29100;
			}
		}
		&.disabled {
			.d-thead {
				background-color: #fcbd71;
			}
		}
		&.light {
			.d-thead {
				background-color: #fdf6ec;
			}
		}
		.d-thead {
			background-color: #ff9900;
			color: #fff;
		}
	}
	&.danger {
		&.dark {
			.d-thead {
				background-color: #dd6161;
			}
		}
		&.disabled {
			.d-thead {
				background-color: #fab6b6;
			}
		}
		&.light {
			.d-thead {
				background-color: #fef0f0;
			}
		}
		.d-thead {
			background-color: #fa3534;
			color: #fff;
		}
	}
	&.info {
		&.dark {
			.d-thead {
				background-color: #82848a;
			}
		}
		&.disabled {
			.d-thead {
				background-color: #c8c9cc;
			}
		}
		&.light {
			.d-thead {
				background-color: #f4f4f5;
			}
		}
		.d-thead {
			background-color: #909399;
			color: #fff;
		}
	}
	&.gray {
		.d-thead {
			background-color: #aaa;
			color: #fff;
		}
	}
	&.border-under {
		.d-td,
		.d-th {
			@extend .noBorder;
		}
		.d-tr {
			@extend .border-bottom;
		}
		.d-table {
			.d-tr {
				@extend .noBorder;
			}
		}
	}
	&.large {
		.d-td,
		.d-th {
			height: 80rpx;
		}
	}
	&.middle {
		.d-td,
		.d-th {
			height: 60rpx;
		}
	}
	.d-td,
	.d-th {
		@extend .border;
	}
	.d-table {
		height: 100%;
		.d-td,
		.d-th {
			@extend .noBorder;
		}
		// .d-tr {
		// 	&:first-child {
		// 		.d-td{
		// 			&.border-bottom {
		// 				border-bottom: none;
		// 			}
		// 			&.border-top {
		// 				border-top: none;
		// 			}
		// 		}
		// 	}
		// }
	}
	input.borderInput {
		border: 1px solid #ccc;
		border-radius: 6rpx;
		width: 80%;
		height: 80%;
		display: inline-flex;
	}
}
.d-caption {
	display: table-caption;
	background-color: inherit;
}
.d-thead {
	display: table-header-group;
	font-weight: 600;
}
.d-tbody {
	display: table-row-group;
}
.d-tfoot {
	display: table-footer-group;
}
.d-tr {
	display: table-row;
	width: 100%;
}
.d-td,
.d-th {
	display: table-cell;
	vertical-align: middle;
	height: 50rpx;
	font-size: 28rpx;
}
.d-th {
	font-weight: 600;
}
.border-top {
	border-top: 1px solid #efefef !important;
}
.border-left {
	border-left: 1px solid #efefef !important;
}
.border-bottom {
	border-bottom: 1px solid #efefef !important;
}
.border-right {
	border-right: 1px solid #efefef !important;
}
.border {
	border: 1px solid #efefef;
}
.noBorder {
	border: 0;
}

.flex {
	display: flex;
	align-items: center;
	&-wrap {
		flex-wrap: wrap;
	}
	&-nowrap {
		flex-wrap: nowrap;
	}
	&-direction {
		flex-direction: column;
	}
}

@each $type in center, space-between, space-around, flex-start, flex-end {
	.row-#{$type} {
		justify-content: $type;
	}
}

@each $type in center, stretch, flex-start, flex-end {
	.col-#{$type} {
		align-items: $type;
	}
}

@each $type in center, left, right {
	.text-#{$type} {
		text-align: $type!important;
	}
}

2.引入之后可以选择直接需要的表格来进行编写

2.1普通表格

<template>
    //普通的表格 devList数组是表格data数据  columns数组是表头名
    //先循环表格data数组再循环表头名数组 如果data数组下标等于0 就使用表头
    <view class="d-table scroll-x">
        <!--表头-->
        <view class="d-tr right" v-for="(item,i) in devList" :key="i">
				<view class="d-th" v-for="(columnsObj,j) in columns" :key="j">
						{{columnsObj.title}}
				</view>
		</view>

        <!--表格-->
		<view class="d-tr right" v-for="(item,i) in devList" :key="i">
				<view class="'d-td'" v-for="(columnsObj,j) in columns" :key="j">
						{{item[columnsObj.dataIndex]}}
				</view>
		</view>
    </view>
</template>

<script>
	export default {
		data() {
			return {
				//table表头
				columns: [{
					title: '进人', //表格标题
					dataIndex: 'enterPeople' //当前列渲染的data名
				}, {
					title: '出人',
					dataIndex: 'outPeople'
				}, {
					title: '入口异常',
					dataIndex: 'entranceException'
				}],
                //表格Data数据
                devList:[{
                    id:1,
                    enterPeople:'假数据'，
                    outPeople：'假数据'，
                    entranceException：'假数据'
                },{
                    id:1,
                    enterPeople:'假数据'，
                    outPeople：'假数据'，
                    entranceException：'假数据'
                }]
			}
		}
	}
</script>

<style>

	.d-table .right>view {
		border: 0;
		border-bottom: 1px solid #efefef;
	}

	.d-table .d-th,
	.d-table .left>view {
		border: 0 !important;
	}
</style>

2.2 固定列表格

<template>
    //带固定列的表格 devList数组是表格data数据  columns数组是表头名
    <view style="display: flex;">
        <!--左侧固定列-->
		<view class="d-table" style="width: 30%;">
            <!--固定列的表头-->
			<view class="d-tr left">
				<view class='d-th'>{{'设备序列号'}}</view>
			</view>
            <!--固定列的表格-->
		    <view class="d-tr left" v-for="(item,i) in devList" :key="i">
			    <view class="d-td">{{item.devSn}}</view>
		    </view>
	    </view>

        <!--剩余未固定的列-->
	    <scroll-view scroll-x class="border-right" style="width: 70%;">
		    <view class="d-table scroll-x">
                 <!--表头-->
			    <view class="d-tr right">
			    	<view style="width:150rpx" class="d-th" 
                    v-for="(columnsObj,j) in columns" :key="j">
					{{columnsObj.title}}
				    </view>
			    </view>
                 <!--表格-->
		        <view class="d-tr right" 
                    v-for="(item,i) in devList" :key="i">
			        <view style="width:150rpx" class="d-td" 
                        v-for="(columnsObj,j) in columns"  :key="j">
				        {{item[columnsObj.dataIndex]}}
			        </view>
		        </view>
	        </view>
	    </scroll-view>
    </view>
</template>

<script>
	export default {
		data() {
			return {
				//table表头
				columns: [{
					title: '进人', //表格标题
					dataIndex: 'enterPeople' //当前列渲染的data名
				}, {
					title: '出人',
					dataIndex: 'outPeople'
				}, {
					title: '入口异常',
					dataIndex: 'entranceException'
				}],
                //表格Data数据
                devList:[{
                    id:1,
                    enterPeople:'假数据'，
                    outPeople：'假数据'，
                    entranceException：'假数据'
                },{
                    id:1,
                    enterPeople:'假数据'，
                    outPeople：'假数据'，
                    entranceException：'假数据'
                }]
			}
		}
	}
</script>

<style>

	.d-table .right>view {
		border: 0;
		border-bottom: 1px solid #efefef;
	}

	.d-table .d-th,
	.d-table .left>view {
		border: 0 !important;
	}
</style>

敲不出代码的秃子
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
uniapp中自定义代码前端进行数据的分页
小黄呀呀呀的博客
04-16 865
<template> <view> <goods-list :goods="goods" @receiveSon="goGoodsDetail"></goods-list> <view class="line" v-if="flag==true">---我是有底线的----</view> </view> </template> <script> import goodsList fro
uniapp后台分页下拉加载新分页数据
weixin_67434908的博客
04-21 575
下拉加载分页
uni-app:实现表格多选及数据获取
weixin_46001736的博客
08-02 2245
uni-app:实现表格多选及数据获取
uni-app实现前端分页功能
Magic_xp7的博客
05-07 1300
uni-app实现前端分页功能
UniApp__微信小程序项目实战 实现长列表分页，通过 onReachBottom 方法上划分次加载数据
最新发布
apple_70049717的博客
07-19 833
2、首先应该是请求接口拿到数据，因为那你每次拿到的是十几条数据，向下加载的话继续要加在数组里面，newUsers返回的就是在之前数组里面没有的新数据，相当于一个去重操作。所以得使用分页加载，第一次加载你在手机可视区域的数据，往下滑动的时候,逐步加载另一部分数据，直到数据加载完成。分页加载只会在用户需要时加载下一页的数据，而不是一次性加载所有数据，减少了应用的内存占用，从而提高应用的稳定性。用户在滚动页面时，数据逐步加载，用户感知到的数据加载时间变短，应用响应更加灵敏，提升用户体验。
uniapp分页功能：实现自定义table表格选中及封装分页pagination组件
hcy5201314521的博客
12-09 1348
我在这个的基础上，修改了一些样式，写了自己的一个效果图。分页组件pagination.vue。分页组件pagination.vue。灵感来源于这一篇博主的文章。
移动端表格分页uni-app
weixin_59527403的博客
11-18 733
移动端表格分页uni-app
uniapp实现分页
weixin_64978272的博客
08-25 630
HBuilder先安装分页插件。
uni-app table表格
10-26
5. **分页**：如果数据量较大，通常需要配合分页组件进行展示，uni-app提供`uni-data-grid`等组件可以实现分页功能，与`table`结合使用。 6. **排序与筛选**：通过`sort-key`属性，可以设置默认的排序字段，实现...
uni-pagination实现表格分页查询
weixin_50688830的博客
05-17 249
在uniapp中通过uni-pagination组件实现表格内容的分页查询，实现思路和简单，分为两个步骤： 1、使用MySQL的Limit语句按照要求查询出符合分页要求的记录； 2、通过MySQL的COUNT函数获取该表中的全部记录； 接下来我们结合前两个章节的内容实现表格的分页查询。 一、分页查询微服务 在idea中使用通用Mapper（第02讲：通用Mapper）实现单表的分页查询，用户访问controller时需要传递2个参数，分别是从第start条记录开始...
js、vue、uniapp全选与反选
m0_59419496的博客
08-04 876
js、vue、uniapp全选与反选
（源代码）第03讲：uni-pagination实现表格分页查询
04-26
第03讲：uni-pagination实现表格分页查询
uni-z-paging:【uni-app自动分页器】超简单！仅需两步轻松完成完整分页逻辑（刷新，上拉加载更多），分页自动处理。支持自定义加载更多的文字或整个视图，自定义拖动刷新样式，自动管理空数据view等
04-01
Z分页 【uni-app自动分页器】超简单，低重组！仅需两步轻松完成完整分页逻辑（翻页刷新，上拉加载更多），分页自动处理。支持自定义加载更多的文字或整个视图，自定义拖放刷新样式，自动管理空数据视图，支持吸顶效果等。 在DCloud插件市场中访问： ://ext.dcloud.net.cn/plugin?name=z-paging 反馈qq群（点击加群）： 平台兼容性 应用程序 5天 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序 √ √ √ √ √ √ √ 预览 自定义拖动刷新效果+分页演示 吸顶效果+分页演示 滑动切换选项卡+分页演示 聊天记录模式+分页演示 功能与特点 【配置简单】仅需两步（绑定网络请求方法，绑定分页结果数组）轻松完成完整刷新刷新，上拉加载更多功能。 【低重组，低侵入】在页面中无需处理任何分页相关逻辑，无需在数据中定义任何分页相关变量，全
uniApp预览PDF插件，pdf.js插件压缩包
10-21
在IT行业中，尤其是在前端开发领域，uniApp是一个非常流行的跨平台开发框架，它基于H5技术，能够方便地构建iOS、Android以及Web应用。而PDF（Portable Document Format）文件是广泛应用的文档格式，用于存储和分享...
uniapp ---- 添加分页
weixin_44235759的博客
10-27 696
添加分页 <view> <u-navbar :is-back="false" title="盘点任务" :background="{ backgroundColor: '#007AFF'}" title-color="#fff"> </u-navbar> <rt-card2 :data="dataList" @cardClick="cardClick"> <u-button :customStyle="btnCustomStyl.
uniapp 处理 分页请求
tengyuxin的博客
09-04 1345
虽然表现形式不一样，最基础的分页逻辑是一样。PC端上点击页码来分页，手机端根据滚动到底部，自动增加页码，来请求数据。其次像懒加载和预加载，我个人认为它应该是组件内部该处理的，因为这个性能优化问腿，性能优化问题应该归组件本身，不能混到逻辑开发中，否则写出的代码就会很复杂。
uniapp 图表 插件 qiun-data-charts
qq_37924396的博客
12-17 6912
<view class="charts-box"> <!-- 开启onmovetip后，同时开启canvas2d模式（需要传canvasId），否则在小程序端会很卡。--> <qiun-data-charts type="line" :canvas2d="true" :canvasId="canvasId" :chartData="chartData" background="none" :ontouch="true"
uni-app：实现分页功能，单击行获取此行指定数据，更改行样式
weixin_46001736的博客
08-01 813
uni-app：实现分页功能，单击行获取此行指定数据，更改行样式
【uni-app：表格】分页、点击行
Qxn530的博客
09-13 1069
分页、点击行
jQuery实现前端大数据分页示例与代码详解
本文提供的纯jQuery前端分页实现方法不仅实用，而且具有良好的可扩展性和可维护性，对于处理大规模数据并在前端展示优化用户体验非常有价值。读者可以根据文章中的指导，结合自己的实际需求调整和扩展这个示例。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值