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

在这里插入图片描述

博主:_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会让写表格…

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

2023 MathorCup(妈妈杯) 数学建模挑战赛B题完整解题思路+模型+代码

2023妈妈杯数学建模B题完整版思路、模型代码已出&#xff01;&#xff01;&#xff01; 云顶数模最新完整版解题思路、模型代码&#xff0c;供大家参考~~ B题目 解题思路 详细模型解析&#xff1a;

JavaWeb——关于servlet种mapping地址映射的一些问题

6、Servlet 6.4、Mapping问题 一个Servlet可以指定一个映射路径 <servlet-mapping><servlet-name>hello</servlet-name><url-pattern>/hello</url-pattern> </servlet-mapping>一个Servlet可以指定多个映射路径 <servlet-mapping>&…

vulnhub_DeRPnStiNK靶机渗透测试

VulnHub2018_DeRPnStiNK靶机 https://www.vulnhub.com/entry/derpnstink-1,221/ flag1(52E37291AEDF6A46D7D0BB8A6312F4F9F1AA4975C248C3F0E008CBA09D6E9166) flag2(a7d355b26bda6bf1196ccffead0b2cf2b81f0a9de5b4876b44407f1dc07e51e6) flag4(49dca65f362fee401292ed7ada96f9…

云端代码编辑器Atheos

什么是 Atheos &#xff1f; Atheos是一个基于 Web 的 IDE 框架&#xff0c;占用空间小且要求最低&#xff0c;构建于 Codiad 之上&#xff0c;不过 Atheos 已从原始 Codiad 项目完全重写&#xff0c;以利用更现代的工具、更简洁的代码和更广泛的功能。 注意事项 群晖内核版本太…

vue源码分析(四)——vue 挂载($mount)的详细过程

文章目录 前言一、使用RuntimeCompiler解析$mount的原因二、$mount 解析的详细过程1.解析挂载的#app执行了vm.$mount2. 通过$mount方法执行以下文件的mount方法3. 执行util工具文件夹中的query方法4. 执行query方法后返回$mount方法判断el是否是body5. 判断!options.render&…

js中HTMLCollection如何循环

//不带索引 let divCon document.getElementsByClassName("el-form-item__error"); if (divCon.length > 0) {for (var item of divCon) {console.log("打印&#xff1a;", item.innerText);} }//带有索引 let divCon document.getElementsByClassNam…

【密评】商用密码应用安全性评估从业人员考核题库(十五)

商用密码应用安全性评估从业人员考核题库&#xff08;十五&#xff09; 国密局给的参考题库5000道只是基础题&#xff0c;后续更新完5000还会继续更其他高质量题库&#xff0c;持续学习&#xff0c;共同进步。 3501 单项选择题 根据GM/T 0115 《信息系统密码应用测评要求》&am…

css列表样式

html文件如下&#xff1a; <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>Title</title> <link href"css/style.css" rel"stylesheet" type"text/css">&…

Python 框架学习 Django篇 (六) ORM关联

像是上一章我们很少会通过页面点击去添加和绑定关系表&#xff0c;更多的时候都是通过django的语法实现&#xff0c;接下来我们做一个案例 django rom是怎么操作外键关系的 创建mode模型表 Django_demo/mgr/models.py # 国家表 class Country(models.Model):name models.Cha…

NCCL后端

"NCCL" 代表 "NVIDIA Collective Communications Library"&#xff0c;"NVIDIA 集体通信库"&#xff0c;它是一种由 NVIDIA 开发的用于高性能计算的通信库。NCCL 专门设计用于加速 GPU 群集之间的通信&#xff0c;以便在并行计算和深度学习等领域…

深入理解 Document Load 和 Document Ready 的区别

目录 前言&#xff1a; 一、Document Ready 二、Document Load 三、理解和总结 前言&#xff1a; 在前端开发中&#xff0c;理解页面加载的不同阶段是至关重要的。特别是当我们需要在页面加载到特定阶段时执行某些操作时&#xff0c;我们需要知道应该使用 document ready 还…

基于web和mysql的图书管理系统

系统分为用户端和管理员端 用户端功能如下 登陆注册数据一栏个人信息修改个人信息修改密码图书查询借阅信息借阅状态安全退出 管理员端功能如下 登录个人信息修改个人信息修改密码读者管理书籍管理借阅管理借阅状态安全退出 用户 管理员 源码下载地址 支持&#xff1a;远程…

【Leetcode】【每日一题】【简单】2558. 从数量最多的堆取走礼物

力扣&#xff08;LeetCode&#xff09;官网 - 全球极客挚爱的技术成长平台备战技术面试&#xff1f;力扣提供海量技术面试资源&#xff0c;帮助你高效提升编程技能&#xff0c;轻松拿下世界 IT 名企 Dream Offer。https://leetcode.cn/problems/take-gifts-from-the-richest-pi…

前端移动web高级详细解析一

01-平面转换 简介 作用&#xff1a;为元素添加动态效果&#xff0c;一般与过渡配合使用 概念&#xff1a;改变盒子在平面内的形态&#xff08;位移、旋转、缩放、倾斜&#xff09; 平面转换也叫 2D 转换&#xff0c;属性是 transform 平移 transform: translate(X轴移动距…

Django 实战开发(一)项目搭建

1.项目搭建 用pycharm 编辑器可以直接 New 一个 Django 项目 2.新建应用 python manage.py startapp demo项目结构如下: 3.编写第一个Django 视图函数 /demo/views: from django.http import HttpResponse def welcome(request):return HttpResponse("welcome to dja…

大厂面试题-JVM中的三色标记法是什么?

目录 问题分析 问题答案 问题分析 三色标记法是Java虚拟机(JVM)中垃圾回收算法的一种&#xff0c;主要用来标记内存中存活和需要回收的对象。 它的好处是&#xff0c;可以让JVM不发生或仅短时间发生STW(Stop The World)&#xff0c;从而达到清除JVM内存垃圾的目的&#xff…

AutoCAD 2024 Mac中文附激活补丁 兼容M1.M2电脑

AutoCAD 2024是一款功能强大的CAD设计绘图工具&#xff0c;旨在帮助用户创建和编辑高质量的设计图纸和模型。该软件支持2D和3D设计&#xff0c;具有丰富的功能和工具&#xff0c;可用于绘图、建模、注释、标注、尺寸设置等多种操作。AutoCAD 2024还引入了智能对象捕捉、实时预览…

提升MODBUS-RTU通信数据刷新速度的常用方法

SMART PLC的MODBUS-RTU通信请参考下面文章链接: 【精选】PLC MODBUS通信优化、提高通信效率避免权限冲突(程序+算法描述)-CSDN博客MODBUS通讯非常简单、应用也非常广泛,有些老生常谈的问题,这里不再赘述,感兴趣的可以参看我的其它博文:SMART200PLC MODBUS通讯专题_RXXW…

python画气泡标尺图

目录 渐变气泡图彩色气泡图 在进行实验结果分析的时候&#xff0c;气泡标尺图能非常清晰对不同的结果进行多维度的比较&#xff0c;特别是在深度学习模型大小和精度进行比较的时候非常合适使用&#xff0c;以下是几个例子。 渐变气泡图 import seaborn as sns import matplotl…

环形链表-力扣

一、题目描述 题目链接&#xff1a;力扣&#xff08;LeetCode&#xff09;官网 - 全球极客挚爱的技术成长平台 二、题解 解题思路&#xff1a; 快慢指针&#xff0c;即慢指针一次走一步&#xff0c;快指针一次走两步&#xff0c;两个指针从链表起始位置开始运行&#xff0c;…