Vue3:封装Table 表格组件

news/2024/7/21 5:19:42/文章来源:https://blog.csdn.net/qq_45061461/article/details/139061741

  组件官网 elementPlus : 点击跳转

封装组件 

创建新的组件文件: Table.vue

<!-- PropTableS : 父组件传递过来的数据 (对象)PropTableS.tables : 父组件传递的对象中 存放表格每行显示的数据PropTableS.keyS : 父组件传递过来的对象,里面就是表头的列数据显示
--><el-tableclass="singleTableRef"ref="singleTableRef":data="PropTableS.tables"borderhighlight-current-row@selection-change="handleSelectionChange"row-key="id":header-cell-style="{background:'#f0f2f7'}":scrollbar-always-on="true":default-sort="{ prop: 'date', order: 'descending' }"max-height="644"> <template v-for="(child,key) in PropTableS.keyS"><el-table-column  :prop="key" :type="child.type" :label="child.title" :sortable="child.sortable"  :width="child.width" :show-overflow-tooltip="child.show_overflow_tooltip" >//是否点击跳转<template v-if="child.link" v-slot="scope" ><el-link  type="primary"  @click="Selectuser(scope.row)">{{scope.row.order_sn}}</el-link></template></el-table-column></template><el-table-column label="操作" fixed="right"  width="180"><template #default="scope"><el-button size="small" @click="handleEdit(scope.$index, scope.row)">Edit</el-button><el-buttonsize="small"type="danger"@click="handleDelete(scope.$index, scope.row)">Delete</el-button></template></el-table-column></el-table>

2.接收父组件传递过来的数据

<script setup lang="ts">import {defineProps,onMounted,ref} from 'vue'//接收父组件传递的数据  const props = defineProps({PropTableS:{type:Object,}})onMounted(()=>{//props.PropTableS.tableStyle f父组件传递过来的表格css样式let TabDom = document.querySelector('.singleTableRef')for (const item in props.PropTableS.tableStyle) {TabDom.style[item] = props.PropTableS.tableStyle[item]}})
</script>

3.父组件代码

<template><!-- v-if 控制组件显示,如果不控制会导致组件  :PropTableS(子组件接收的名称)="PropTableS(这是我传递的值)" --><Table v-if="ShiwTable"  :PropTableS="PropTableS"  ></Table>
</template>//引入组件
import {Table} from "@/components";let PropTableS = ref(null)//点击查询按钮
function Receive_Data(params:any) {console.log('表单传递过来的查询参数',params);GetTabList(params.value).then(result =>{PropTableS.value = result}).catch(error=>{})
}function GetTabList(params:boject) {  //调用团购接口测试数据return new Promise((resolve,reject)=>{let pageParams = {page_size:20,page:1}axios.GetGoodsList(params||pageParams).then(res=>{//自己定义的表头信息let data = {selection:{type:'selection',width:50,custom:true // 是否标识自定义},index:{type:'index',title:'ID',width:50,custom:true // 是否标识自定义},goods_name:{title:'商品名称',},sku:{title:'商品SKU',},goods_sn:{title:'商品货号',},store_name:{title:'店铺',},goods_img:{title:'商品图片',},color_name:{title:'颜色',},size_name:{title:'尺码',},goods_stock:{title:'库存',},goods_status_text:{title:'商品状态',},}let list = {}list.keyS = data//后端返回的表格显示数据list.tables = res.list//表格的样式list.tableStyle = {width : '99%',margin : 'auto',height : '645px',}resolve(list); }).catch(error => {reject(error);});})
}GetTabList().then(result =>{PropTableS.value = result if(PropTableS.value){ShiwTable.value = true}}).catch(error=>{console.error('获取表格数据失败:', error);})

效果:

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

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

相关文章

Golang实现递归复制文件夹

代码 package zdpgo_fileimport ("errors""os""path/filepath""strings" )// CopyDir 复制文件夹 // param srcPath 源文件夹 // param desPath 目标文件夹 // return error 错误信息 func CopyDir(srcPath, desPath string) error {…

6岁开始学习打字,10岁学懂文字编程

​你们有没有想过打字速度会影响Coding 编程能力&#xff1f; 疫情期间&#xff0c;全国中小学均不定期停止面授课程&#xff0c;改为网上教学。顷刻之间&#xff0c;电脑、智能手机等即时通讯软件成为每日学习的「良师益友」&#xff0c;常伴左右。 同时&#xff0c;学生也由…

每天五分钟深度学习框架PyTorch:创建具有特殊值的tensor张量

本文重点 tensor张量是一个多维数组,本节课程我们将学习一些pytorch中已经封装好的方法,使用这些方法我们可以快速创建出具有特殊意义的tensor张量。 创建一个值为空的张量 import torch import numpy as np a=torch.empty(1) print(a) print(a.dim()) print(s.shape) 如图…

本地部署 MiniCPM-Llama3-V 2.5

本地部署 MiniCPM-Llama3-V 2.5 0. 引言1. 性能评估2. 典型示例3. 本地部署4. 运行 WebUI Demo5. vLLM 部署 0. 引言 MiniCPM-Llama3-V 2.5 是 MiniCPM-V 系列的最新版本模型&#xff0c;基于 SigLip-400M 和 Llama3-8B-Instruct 构建&#xff0c;共 8B 参数量&#xff0c;相较…

Linux java jni调用C++封装动态库

由于项目中java需要调用第三方提供的C动态库&#xff1b;由于第三方动态库传入的参数较多&#xff0c;还伴随着指针传入操作&#xff0c;导致java调用极为不便&#xff01;因此催生出对于第三方的C动态库进行二次封装。java调用只需按结构传入一个结构化的string即可。话不多说…

CSS文本粒子动画特效之爱心粒子文字特效-Canvas

1. 效果图 2.完整代码 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><style>body,html {margin: 0;paddin…

嵌入式学习——3——UDP TFTP简易文件传输

tftp协议概述 简单文件传输协议&#xff0c;适用于在网络上进行文件传输的一套标准协议&#xff0c;使用UDP传输 特点&#xff1a; 是应用层协议 基于UDP协议实现 数据传输模式 octet&#xff1a;二进制模式&#xff08;常用&#xff09; mail&#xff1a;已经不再支持 TFTP通信…

【Spring】深入学习AOP编程思想的实现原理和优势

【切面编程】深入学习AOP编程思想的实现原理和优势 前言AOP的由来及AOP与代理的关系AOP的实现方式详解静态代理动态代理 AOP的应用场景记录日志权限控制数据库事务控制缓存处理异常处理监控管理 AOP的底层实现全流程解析Spring AOP的简介动态代理的实现原理Spring AOP的实现原理…

易查分小程序 学生成绩管理小程序

亲爱的老师们&#xff0c;是不是每次成绩公布后&#xff0c;家长们的连环夺命call让你头大&#xff1f;担心孩子们的成绩信息安全&#xff0c;又想快速分享给家长&#xff0c;这可咋整&#xff1f;别急&#xff0c;易查分小程序来帮忙啦&#xff01; 安全有保障 智能验证码&a…

K8S集群监控方案之Prometheus+kube-state-metrics+Grafana

序言 | Prometheus 中文文档 方案简单架构图 一、部署kube-state-metrics 1、部署文件下载 地址 kube-state-metrics/examples/standard at main kubernetes/kube-state-metrics GitHub 2、修改下载的文件 2.1、修改镜像 原镜像可能下载不了&#xff0c;这里修改deploy…

43、Flink 的 Window Join 详解

1.Window Join a&#xff09;概述 Window join 作用在两个流中有相同 key 且处于相同窗口的元素上&#xff0c;窗口可以通过 window assigner 定义&#xff0c;并且两个流中的元素都会被用于计算窗口的结果。 两个流中的元素在组合之后&#xff0c;会被传递给用户定义的 Joi…

数据结构算法题day03

数据结构算法题day03 题目 题目 2.设计一个高效算法&#xff0c;将顺序表L的所有元素逆置&#xff0c;要求算法的空间复杂度为O(1)算法思想&#xff1a; 1、常规的解法&#xff1a; Void reverse (sqlist &L){Elemtype temp; //辅助变量for(i 0,i < L.length; i){temp…

Java RMI

RMI - 安全篇 RMI分为三个主体部分&#xff1a; *Client-客户端*&#xff1a;客户端调用服务端的方法 *Server-服务端*&#xff1a;远程调用方法对象的提供者&#xff0c;也是代码真正执行的地方&#xff0c;执行结束会返回给客户端一个方法执行的结果。 *Registry-注册中心…

【Python小案例】Python+mysql+PyQt5健康体检报告查询

下载安装Python3.7.8 python官网&#xff1a;https://www.python.org/ PyQt5配置 安装PyQt5 pip install PyQt5pip install qt5_toolspytcharm创建项目 配置外部工具 QTDesigner的Arguments语句不用填 QTDesigner的Working directory语句:$ProjectFileDir$ Pyuic的Argume…

OpenCV学习 基础图像操作(十四):直方图均衡化和直方图规定化

基础原理 直方图操作是基于像素统计的基础图像操作,被广泛运用于调整图像的对比度,并由此衍生出很多变种和该经的方式. 图像相直方图 直方图(Histogram)&#xff0c;又称质量分布图&#xff0c;是一种统计报告图&#xff0c;由一系列高度不等的纵向条纹或线段表示数据分布的…

GPT-4o和GPT-4有什么区别?我们还需要付费开通GPT-4?

GPT-4o 是 OpenAI 最新推出的大模型&#xff0c;有它的独特之处。那么GPT-4o 与 GPT-4 之间的主要区别具体有哪些呢&#xff1f;今天我们就来聊聊这个问题。 目前来看&#xff0c;主要是下面几个差异。 响应速度 GPT-4o 的一个显著优势是其处理速度。它能够更快地回应用户的查…

gin框架精通篇(二)

原生数据库使用 导入模块&#xff1a;go get -u github.com/go-sql-driver/mysql 安装 mysql 数据库 安装数据库可能遇到的问题&#xff1a;&#xff08;网上的方法基本可以解决&#xff09; ERROR 1045 (28000): Access denied for user ‘-root’‘localhost’ (using passwo…

模拟量4~20mA电流传感器接线方式

一、模拟量4~20mA电流传感器接线方式 无源双线制是常见的电流型传感器接线方式&#xff0c;它具有简单、经济的特点。其接线方式如下&#xff1a; 传感器的“”接到数据采集器的电源“”上&#xff0c; 传感器的“-”端子连接到数据采集器的“AI”端子上&#xff0c; 数据采集器…

深入分析C#中的“编写器”概念——代码修改、注解与重构

文章目录 1. 编写器&#xff08;Writer&#xff09;的概念2. 编写器的作用和工作原理3. 编写器的重要性4. 写入器常用方法5. 写入器示例6. 编写器示例——使用Fody进行代码注解和重构7. 总结 在软件开发过程中&#xff0c;代码的维护和更新是至关重要的。C#作为一种流行的编程语…

【RK3288 Android10 T8pro usb hid-multitouch idc配置】

【RK3288 Android10 T8pro usb hid-multitouch idc配置】 文章目录 【RK3288 Android10 T8pro usb hid-multitouch idc配置】背景代码分析1. 读取配置文件2. 标志内外置屏幕3. 设置输入设备4. findviewport()5. 根据对应的viewport来计算相应的mapping的参数 结论 背景 T8pro …