【APP VTable】和市面上的 Table 组件一样,都是接收表格[] 以及数据源[]

news2025/3/3 18:03:17

在这里插入图片描述

博主:_LJaXi Or 東方幻想郷
专栏: uni-app | 小程序开发
开发工具:HBuilderX

这里写目录标题

  • 表格组件
  • USE

表格组件

<template>
	<view class="scroll-table-wrapper">
		<view class="scroll-table-container">
			<table class="scroll-table">
				<thead>
					<tr>
						<th v-for="(item, index) in columns" :key="index">
							{{ item.title }}
						</th>
					</tr>
				</thead>
				<!-- 表格内容 -->
				<tbody v-if="dataSource.length > 0">
					<tr v-for="(row, rowIndex) in dataSource" :key="rowIndex">
						<td v-for="(cell, cellIndex) in columns" :key="cellIndex">
							<view v-if="cell.title !== '操作'"
								:style="{'width': cell.width, 'white-space': cell.width ? 'normal' : 'nowrap', 'text-align': 'center'}"
								@click="handleArrowClick(row, cell, type)">
								{{ row[cell.dataIndex] || '' }}
							</view>
							<view v-else>
								<button @click="handleButtonClick(row)" class="op-after-0">{{operateTitle}}</button>
							</view>
						</td>
					</tr>
				</tbody>
				<tbody v-else>
					<tr style="text-align: center;">
						<td :colspan="columns.length">暂无数据</td>
					</tr>
				</tbody>
			</table>
		</view>
	</view>
</template>

<script>
	export default {
		/**
		 * @author _LJaXi
		 * @columns 表头内容
		 * @dataSource 表格数据源
		 * @operateTitle 操作按钮title
		 * @updatehandleOperate 操作栏按钮获取row
		 * @updateshow 单击单元格获取row
		 */
		props: {
			columns: {
				type: Array,
				default: []
			},
			dataSource: {
				type: Array,
				default: []
			},
			// 状态
			type: {
				type: String,
				default: ''
			},
			operateTitle: {
				type: String,
				default: '操作'
			}
		},
		methods: {
			handleArrowClick(item, type) {
				this.$emit('update:show', {
					item,
					type: this.type
				})
			},
			handleButtonClick(item) {
				this.$emit('update:handleOperate', {
					item
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	@import url('index.less');
</style>

USE

<VTable 
	:columns="maintenanceFeedbackTableData" 
	:dataSource="tableData"
	@update:show="handleShow" 
	@update:handleOperate="handleOperate" 
/>

总之这个表格和市面上的没有什么不同,都是自适应的,这个我是在APP里面写的一个表格,不知道为什么APP会让写表格…

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1127450.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

使用 excel 快速拼接省市区镇街村居五级区划完整名称

你知道的越多&#xff0c;你不知道的越多 点赞再看&#xff0c;养成习惯 如果您有疑问或者见解&#xff0c;欢迎指教&#xff1a; 企鹅&#xff1a;869192208 文章目录 前言数据准备excel 函数附件 前言 之前做了国家区划的映射关系&#xff0c;在其过程中&#xff0c;使用代码…

JAVA-编程基础-12-01-创建多线程的3种方式

JAVA-编程基础-12-创建多线程的3种方式 文章目录 JAVA-编程基础-12-创建多线程的3种方式创建一个类继承Thread类&#xff0c;并重写run方法创建一个类实现Runnable接口&#xff0c;并重写run方法实现Callable接口&#xff0c;重写call()方法&#xff0c;这种方式可以通过Future…

亚马逊云代码AI助手CodeWhisperer使用教程

一、CodeWhisperer 简介 1、CodeWhisperer是一款基于机器学习的通用代码生成器&#xff0c;由Amazon出品&#xff0c;可以给我们提供代码建议。 2、CodeWhisperer 基于各种上下文线索提供建议&#xff0c;包括光标在源代码中的位置、位于光标前面的代码、注释&#xff0c;以及…

MR混合现实情景实训教学系统在旅游管理专业中的应用

在旅游管理专业中&#xff0c;MR混合现实情景实训教学系统的主要应用包括但不限于以下几个方面&#xff1a; 1. 实地考察的替代&#xff1a;对于一些无法实地考察的景点或设施&#xff0c;学生可以通过MR系统进行虚拟参观&#xff0c;从而了解其实际情况。这不仅可以减少时间和…

Banana Pi BPI-W3 RK3588开源硬件开发板 Debian11详解

1. 简介 RK3588从入门到精通Debian 是⼀种完全⾃由开放并⼴泛⽤于各种设备的 Linux 操作系统。Rockchip在官⽅Debian发⾏版的基础上构建和适配了相关硬件功能 2. 环境介绍 硬件环境&#xff1a; ArmSoM-W3 RK3588开发板软件版本&#xff1a; OS&#xff1a;ArmSoM-W3 Debian…

Java中配置RabbitMQ基本步骤

在Java中配置RabbitMQ&#xff0c;需要遵循以下步骤&#xff1a; 1.添加依赖 在项目的pom.xml文件中添加RabbitMQ的Java客户端依赖&#xff1a; <dependency><groupId>com.rabbitmq</groupId><artifactId>amqp-client</artifactId><versio…

搜维尔科技:Varjo-最自然和最直观的互动

创建真实生活虚拟设计 Varjo让你沉浸在最自然的混合和虚拟现实环境中。 世界各地的设计团队可以聚集在一个摄影现实的虚拟空间中,以真实的准确性展示新的概念-实时的讨论和迭代。这是一个充满无限创造潜力的新时代,加速了人类前所未有的想象力。 虚拟现实、自动反应和XR设计的…

虹科案例 | 2016款别克昂科拉车发动机偶尔无法起动

作者&#xff1a;建辉汽车诊断中心 梁建辉 梁建辉&#xff0c;TechGear汽车诊断学院优秀学员&#xff0c;从事汽车维修工作15年&#xff0c;现自营“建辉汽车诊断中心”门店。 故障现象 一辆2016款别克昂科拉车&#xff0c;搭载LFF发动机&#xff0c;累计行驶里程约为8.6万km。…

【LeetCode每日一题】——1379.找出克隆二叉树中的相同节点

文章目录 一【题目类别】二【题目难度】三【题目编号】四【题目描述】五【题目注意】六【题目示例】七【题目提示】八【题目进阶】九【解题思路】十【时间频度】十一【代码实现】十二【提交结果】 一【题目类别】 广度优先搜索 二【题目难度】 简单 三【题目编号】 1379.找…

分享一下微信小程序的文章中怎么添加营销活动

在数字化时代&#xff0c;小程序已经成为企业营销的重要工具。通过小程序&#xff0c;企业可以提供更加便捷、高效的服务&#xff0c;吸引更多的用户和客户。本文将以小程序营销活动为主题&#xff0c;介绍如何在小程序文章中加入营销活动&#xff0c;提高品牌知名度和销售额。…

DAY32 122. 买卖股票的最佳时机 II + 55. 跳跃游戏 + 45.跳跃游戏 II

122. 买卖股票的最佳时机 II 题目要求&#xff1a;给定一个数组&#xff0c;它的第 i 个元素是一支给定股票第 i 天的价格。 设计一个算法来计算你所能获取的最大利润。你可以尽可能地完成更多的交易&#xff08;多次买卖一支股票&#xff09;。 注意&#xff1a;你不能同时…

基于springboot实现漫画网站管理系统项目【项目源码+论文说明】计算机毕业设计

基于Springboot实现漫画网站管理系统演示 摘要 首先,论文一开始便是清楚的论述了系统的研究内容。其次,剖析系统需求分析,弄明白“做什么”,分析包括业务分析和业务流程的分析以及用例分析,更进一步明确系统的需求。然后在明白了系统的需求基础上需要进一步地设计系统,主要包括…

Docker从入门到实战

Docker基本概念 1、解决的问题 1、统一标准 应用构建 ○ Java、C、JavaScript ○ 打成软件包 ○ .exe ○ docker build … 镜像应用分享 ○ 所有软件的镜像放到一个指定地方 docker hub ○ 安卓&#xff0c;应用市场应用运行 ○ 统一标准的 镜像 ○ docker run 容器化技术 …

Snowflake雪花算法

文章目录 分布式ID一、雪花算法起源二、雪花算法的原理三、java实现雪花算法四、常见问题总结 分布式ID 分布式ID&#xff0c;也称为全局唯一ID&#xff0c;是在分布式系统中用于标识数据的唯一标识符。随着业务量的不断扩展&#xff0c;传统的UUID和数据库自增ID无法满足需求…

Linux下的IMX6ULL——IMX6ULL Pro开发板基本操作(二)

目录&#xff1a; 前面我们已经配置好了环境&#xff0c;下载好了软件&#xff0c;下面让我们对我们使用的开发板有给简单的了解吧&#xff0c;IMX6ULL Pro开发板基本操作是必不可少的一大环节&#xff0c;下面让我们从它的硬件资源&#xff0c;软件资源等一系列开发板的基础操…

医院多维度综合绩效考核系统源码 商业项目源码,支持二次开发

医院多维度综合绩效考核系统源码 商业项目源码&#xff0c;支持二次开发 采用多维度综合绩效考核的形式&#xff0c;针对院内实际情况分别对工作量、KPI指标、科研、教学、管理等进行全面考核。医院可结合实际需求&#xff0c;对考核方案中各维度进行灵活配置&#xff0c;对各维…

Kubernetes-进阶(Pod生命周期/调度/控制器,Ingress代理,数据存储PV/PVC)

Kubernetes-进阶 Pod详解 每个Pod中都可以包含一个或多个容器&#xff0c;这些容器可以分两类 用户程序所在容器&#xff0c;数量用户决定Pause容器&#xff0c;这是每个Pod都会有的一个根容器&#xff0c;它的作用有两个 可以以它为依据&#xff0c;评估整个Pod的健康状态可以…

打印机提示“需要用户干预”解决方法

在计算机管理中&#xff0c;点击“服务和应用程序”中的“服务”&#xff1b; 3、在右侧找到“Print Spooler”服务&#xff0c;点击停止此服务&#xff08;不要退出此页面&#xff0c;后面会用&#xff0c;最小化即可&#xff09;&#xff1b; 4、按WINR&#xff0c;输入“spo…

海信商用显示出海提速,在参与共建“一带一路”中成长

2023年是中国“一带一路”倡议提出十周年。十年来&#xff0c;“一带一路”建设取得了实打实、沉甸甸的重大历史性成就&#xff0c;成为深受欢迎的国际公共产品和国际合作平台。丰硕成果的背后&#xff0c;离不开广大企业的积极参与与担当作为。作为较早出海的中国品牌之一&…

发现一款好用的数据库安全风险扫描工具-DPEasy,推荐给大家!

数据库安全治理是确保企业数据安全的关键任务&#xff0c;然而&#xff0c;许多企业在实际操作中面临着多种挑战。通过深入沟通交流和实地分析&#xff0c;我们发现企业在数据库安全治理过程中主要受到以下问题困扰&#xff1a;外部人员风险、账号权限管理困难、内部业务复杂以…