【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会让写表格…

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

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

相关文章

iOS安全加固方法及实现

​ 目录 iOS安全加固方法及实现 摘要 引言 iOS安全加固方法及实现 一、字符串加密 二、类名方法名混淆 三、程序代码混淆 四、加入安全SDK 总结 参考资料 摘要 本文介绍了iOS平台下的应用安全保护方法&#xff0c;包括字符串加密、类名方法名混淆、程序代码混淆和加入…

杂牌行车记录仪特殊AVI结构恢复案例

最近遇到一个杂牌的行车记录仪需要恢复数据&#xff0c;其使用AVI格式&#xff0c;但是在扫描恢复的过程中却发现厂家对其AVI结构进行了“魔改”致程序无法正常识别 故障存储:16G SD卡 fat32文件系统 故障现象: 16G的SD卡&#xff0c;在发生事故后客户尝试自行接到手机上读…

项目进度延误,危机管理5大注意事项

项目延误危机管理的重要性是不可忽视的。项目延误可能会导致资源浪费、成本增加、客户不满、信誉受损等一系列问题&#xff0c;严重影响项目的成功与效益。因此&#xff0c;有效地进行项目延误危机管理是至关重要的&#xff0c;一般主要是从以下5个方面进行管理&#xff1a; 1、…

《动手学深度学习 Pytorch版》 10.6 自注意力和位置编码

在注意力机制中&#xff0c;每个查询都会关注所有的键&#xff0d;值对并生成一个注意力输出。由于查询、键和值来自同一组输入&#xff0c;因此被称为 自注意力&#xff08;self-attention&#xff09;&#xff0c;也被称为内部注意力&#xff08;intra-attention&#xff09;…

竞赛 深度学习人体跌倒检测 -yolo 机器视觉 opencv python

0 前言 &#x1f525; 优质竞赛项目系列&#xff0c;今天要分享的是 &#x1f6a9; **基于深度学习的人体跌倒检测算法研究与实现 ** 该项目较为新颖&#xff0c;适合作为竞赛课题方向&#xff0c;学长非常推荐&#xff01; &#x1f947;学长这里给一个题目综合评分(每项满…

npm改变npm缓存路径和改变环境变量

在安装nodejs时&#xff0c;系统会自动安装在系统盘C&#xff0c; 时间久了经常会遇到C盘爆满&#xff0c;有时候出现红色&#xff0c;此时才发现很多时候是因为npm 缓存保存在C盘导致的&#xff0c;下面就介绍下如何改变npm缓存路径。 1、首先找到安装nodejs的路径&#xff0c…

JVM(Java Virtual Machine)G1收集器篇

前言 本文参考《深入理解Java虚拟机》&#xff0c;本文主要介绍G1收集器的收集思想和具体过程&#xff08;填上一篇文章留下的坑&#xff09; 本系列其他文章链接&#xff1a; JVM&#xff08;Java Virtual Machine&#xff09;内存模型篇 JVM&#xff08;Java Virtual Machi…

SQL sever中函数(2)

目录 一、函数分类及应用 1.1标量函数&#xff08;Scalar Functions&#xff09;&#xff1a; 1.1.1格式 1.1.2示例 1.1.3作用 1.2表值函数&#xff08;Table-Valued Functions&#xff09;&#xff1a; 1.2.1内联表值函数&#xff08;Inline Table-Valued Functions&am…

Linux shell编程学习笔记15:定义数组、获取数组元素值和长度

一、 Linux shell 脚本编程中的数组概述 数组是一种常见的数据结构。跟大多数编程语言一样&#xff0c;大多数Linux shell脚本支持数组&#xff0c;但对数组的支持程度各不相同&#xff0c;比如数组的维度&#xff0c;是支持一维数组还是多维数组&#xff1f;再如&#xff0c;…

Redis为什么变慢了

一、Redis为什么变慢了 1.Redis真的变慢了吗? 对 Redis 进行基准性能测试 例如,我的机器配置比较低,当延迟为 2ms 时,我就认为 Redis 变慢了,但是如果你的硬件配置比较高,那么在你的运行环境下,可能延迟是 0.5ms 时就可以认为 Redis 变慢了。 所以,你只有了解了你的…

蓝桥杯每日一题2023.10.27

题目描述 快速排序 - 蓝桥云课 (lanqiao.cn) #include <stdio.h>int quick_select(int a[], int l, int r, int k) {int p rand() % (r - l 1) l;int x a[p];{int t a[p]; a[p] a[r]; a[r] t;}int i l, j r;while(i < j) {while(i < j && a[i] &…

Python轮廓追踪【OpenCV形态学操作】

文章目录 概要代码运行结果 概要 一些理论知识 OpenCV形态学操作理论1 OpenCV形态学操作理论2 OpenCV轮廓操作|轮廓类似详解 代码 代码如下&#xff0c;可以直接运行 import cv2 as cv# 定义结构元素 kernel cv.getStructuringElement(cv.MORPH_RECT, (3, 3)) # print kern…

【Linux】rpm和yum的使用

不知道是不是有和我一样的宝子们&#xff0c;在rpm上卡了老久老久&#xff0c;但其实搞通了&#xff0c;理解了原理之后&#xff0c;不难的&#xff0c;所以不管你现在遇到的困难是什么&#xff0c;都不要放弃&#xff0c;一定要坚持&#xff0c;加油。 一、rpm 1.rpm rpm的…

On Moving Object Segmentation from Monocular Video with Transformers 论文阅读

论文信息 标题&#xff1a;On Moving Object Segmentation from Monocular Video with Transformers 作者&#xff1a; 来源&#xff1a;ICCV 时间&#xff1a;2023 代码地址&#xff1a;暂无 Abstract 通过单个移动摄像机进行移动对象检测和分割是一项具有挑战性的任务&am…

使用vue-cli搭建spa项目,vue项目结构说明,开发示例,如何修改端口号

目录 1. vue-cli安装 1.1 安装前提 1.2 什么是vue-cli 1.3 安装vue-cli 2. 使用vue-cli构建项目 2.1 使用脚手架创建项目骨架 2.2 到新建项目目录&#xff0c;安装需要的模块 2.3 如何修改端口号 2.4 添加element-ui模块 2.5 package.json详解 3. install命令中的-g…

目标检测技术概述

什么是目标检测&#xff1f; 在计算机视觉众多的技术领域中&#xff0c;目标检测&#xff08;Object Detection&#xff09;也是一项非常基础的任务&#xff0c;图像分割、物体追踪、关键点检测等通常都要依赖于目标检测。在目标检测时&#xff0c;由于每张图像中物体的数量、…

云游数智农业世界,体验北斗时空智能

今日&#xff0c;2023年中国国际农业机械展览会在武汉正式拉开帷幕&#xff0c;众多与会者云集&#xff0c;各类农机产品纷呈&#xff0c;盛况空前。 千寻位置作为国家北斗地基增强系统的建设与运营方&#xff0c;在中国国际农业机械展览会上亮相&#xff0c;以「北斗时空智能 …

代码审计及示例

简介&#xff1a; 代码安全测试是从安全的角度对代码进行的安全测试评估。 结合丰富的安全知识、编程经验、测试技术&#xff0c;利用静态分析和人工审核的方法寻找代码在架构和编码上的安全缺陷&#xff0c;在代码形成软件产品前将业务软件的安全风险降到最低。 方法&#x…

合成数据的好处和用途

在不断变化的数据科学和人工智能环境中&#xff0c;合成数据集的概念成为具有多种用途的强大工具。 假设您是一名数据科学家&#xff0c;并分配了为电子商务网站创建尖端推荐系统的任务。为此&#xff0c;您需要大量的用户交互数据。但是&#xff0c;您面临着保护用户隐私和处…