封装一个简单的table组件
子组件
<template> <el-table :data="tableData" :headers="tableHeaders" style="width: 100%"> <el-table-column v-for="header in tableHeaders" :key="header.prop" :label="header.label" :prop="header.prop"></el-table-column> </el-table>
</template> <script>
export default { name: 'tableComponent', props: { tableData: { type: Array, required: true }, tableHeaders: { type: Array, required: true } }
}
</script>
在这个示例中,我们添加了一个名为tableHeaders的属性,该属性是一个包含表头配置的数组。每个表头配置对象包含一个label和一个prop属性,用于显示列标题和与数据的对应关系。在模板部分,我们使用v-for指令循环渲染每个表头,并将表头配置对象的属性绑定到el-table-column组件中。通过这种方式,您可以根据需要动态更改表头。
父组件
<template> <div> <tableComponent :tableData="tableData" :tableHeaders="tableHeaders"/> </div>
</template> <script>
import tableComponent from './tableComponent.vue'; export default { name: 'ParentComponent', components: { tableComponent }, data() { return { tableData: [ { id: 1, name: '张三', age: 25, address: '北京市朝阳区' }, { id: 2, name: '李四', age: 30, address: '上海市浦东新区' }, { id: 3, name: '王五', age: 28, address: '广州市天河区' } ], tableHeaders: [ { label: '姓名', prop: 'name' }, { label: '年龄', prop: 'age' }, { label: '地址', prop: 'address' } ] }; }
}
</script>
在这个示例中,我们首先引入了tableComponent子组件。在父组件的data中,我们定义了tableData和tableHeaders两个属性,分别用于存储表格的数据和表头配置。您可以通过修改tableData和tableHeaders来更改表格的内容和外观。通过这种方式,您可以轻松地在父组件中使用可定制化的表格子组件。
相关文章:
封装一个简单的table组件
子组件 <template> <el-table :data"tableData" :headers"tableHeaders" style"width: 100%"> <el-table-column v-for"header in tableHeaders" :key"header.prop" :label"header.label" :pro…...
Avalonia UI框架介绍
Avalonia UI是一个跨平台的UI框架,它允许开发者使用XAML和C#语言创建可在多个平台上运行的应用程序,包括Windows、Linux、macOS等。Avalonia UI与WPF非常相似,但是它是开源的,并且更加灵活。 下面是一个简单的Avalonia UI应用程序…...
【入门篇】1.3 redis客户端之 jedis 高级使用示例
文章目录 0.前言1. 发布和订阅消息2. 事务操作3. 管道操作4. jedis 支持哨兵模式5. jedis 支持集群模式5. 参考链接 0.前言 Jedis是Redis的Java客户端,它支持所有的Redis原生命令,使用方便,且可以与Java项目无缝集成。 该库的最新版本支持Re…...
使用CXF调用WSDL(二)
简介 本篇文章主要解决了上篇文章中遗留的对象嵌套问题,要想全面解析无限极的对象嵌套需要使用递归去解决 上文链接: 使用CXF调用WSDL(一) 上文回顾 上文使用了单方法“ call() ”解决了List和基本类型(含String&…...
list.toArray
直接去看原文 原文链接:List的toArray()方法_list.toarray-CSDN博客 -------------------------------------------------------------------------------------------------------------------------------- toArray()介绍 toArray()方法是List接口中提供的方法ÿ…...
2013年11月10日 Go生态洞察:Go语言四周年回顾
🌷🍁 博主猫头虎(🐅🐾)带您 Go to New World✨🍁 🦄 博客首页——🐅🐾猫头虎的博客🎐 🐳 《面试题大全专栏》 🦕 文章图文…...
Ubuntu上使用SSH连接到CentOS系统
确保CentOS系统上的SSH服务器已安装并正在运行: 在CentOS上,默认情况下,SSH服务器(sshd)应该已安装并正在运行。如果不确定,可以通过以下方式检查: sudo systemctl status sshd如果未安装&…...
【知识增强】A Survey of Knowledge-Enhanced Pre-trained LM 论文笔记
A Survey of Knowledge-Enhanced Pre-trained Language Models Linmei Hu, Zeyi Liu, Ziwang Zhao, Lei Hou, Liqiang Nie, Senior Member, IEEE and Juanzi Li 2023年8月的一篇关于知识增强预训练模型的文献综述 论文思维导图 思维导图网页上看不清的话,可以存…...
shell脚本之函数
快捷查看指令 ctrlf 进行搜索会直接定位到需要的知识点和命令讲解(如有不正确的地方欢迎各位小伙伴在评论区提意见,博主会及时修改) 函数 一,什么是函数 函数是一段功能代码,用来解决shell编程中冗余代码[重复且不连续出现的功能…...
订水商城实战教程10-宫格导航
上一篇我们介绍了跑马灯的功能,这一篇就进入到我们的主体部分开发。在订水商城业务中可以按照分类查询商品信息,这就涉及到数据源的拆分。 我们在数据源的设计中区分为主子表,主表呢存储唯一的记录,子表的记录可以重复࿰…...
【C++11】lambda表达式 | 包装器
文章目录 一、 lambda表达式lambda表达式的引入lambda表达式的语法lambda表达式与函数对象lambda表达式的捕捉列表 二、包装器function包装器bind包装器 一、 lambda表达式 lambda表达式的引入 在C98中,为了替代函数指针,C设计出了仿函数,也…...
网络安全准入技术之MAC VLAN
网络准入控制作为主要保障企业网络基础设施的安全的措施,特别是对于中大型企业来说,终端类型多样数量激增、终端管理任务重难度大、成本高。 在这样的一个大背景下,拥有更灵活的动态识别、认证、访问控制等成为了企业网络安全的最核心诉求之…...
MyBatis 操作数据库
文章目录 1. 什么是MyBatis?2. 入门MyBatis2.1 准备工作2.2.1 创建springboot项目2.2.2 数据准备 2.2 配置数据库连接2.3 写持久层代码2.4 单元测试2.4.1 web测试2.4.2 自动测试 1. 什么是MyBatis? MyBatis是一种持久层框架,用于简化JDBC的开…...
设计模式 -- 建造者模式(Builder Pattern)
这个模式以前也义Android-kotlin的场景下讲过 Android 用建造者模式模式写一个Dialog-CSDN博客 不过用的是 变种的建造者模式 建造者模式: 属于创建型模式 提供了一种创建对象的最佳方式, 使用多个简单的对象一步一步构建成一个复杂的对象 。 介绍 意图…...
如何下载 Apache + PHP + Mysql 集成安装环境并结合内网穿透工具实现公网访问内网服务
🌈个人主页:聆风吟 🔥系列专栏:网络奇遇记、Cpolar杂谈 🔖少年有梦不应止于心动,更要付诸行动。 文章目录 📋前言一. WampServer下载安装二. WampServer启动三. 安装cpolar内网穿透3.1 注册账号…...
一招告别百度广告烦恼,同时效率提高100倍的几个常用搜索技巧!
《博主简介》 小伙伴们好,我是阿旭。专注于人工智能AI、python、计算机视觉相关分享研究。 ✌更多学习资源,可关注公-仲-hao:【阿旭算法与机器学习】,共同学习交流~ 👍感谢小伙伴们点赞、关注! 《------往期经典推荐--…...
文件上传 [ACTF2020 新生赛]Upload1
打开题目,发现是一道文件上传题目 随便上传个一句话木马上去 发现网站前端有白名单限制,只能上传含有jpg,png,gif的后缀文件 那我们便传个2.jpg的一句话木马上去,bp抓包 我们改成php文件后缀试试,发现重发…...
振南技术干货集:比萨斜塔要倒了,倾斜传感器快来!(1)
注解目录 1、倾斜传感器的那些基础干货 1.1 典型应用场景 (危楼、边坡、古建筑都是对倾斜敏感的。) 1.2 倾斜传感器的原理 1.2.1 滚珠式倾斜开关 1.2.2 加速度式倾斜传感器 1)直接输出倾角 2)加速度计算倾角 3)倾角精度的提高 (如果…...
手把手教你搭建属于自己的快递小程序
在数字化时代,小程序已经成为各行各业连接用户、提供服务、创造价值的重要工具。其中,快递寄件小程序因其实用性和广泛的需求,成为很多企业和开发者关注的焦点。本文将详细介绍如何快速创建快递寄件小程序,以及如何利用它实现盈利…...
C# Onnx LSTR 基于Transformer的端到端实时车道线检测
目录 效果 模型信息 项目 代码 下载 效果 端到端实时车道线检测 模型信息 lstr_360x640.onnx Inputs ------------------------- name:input_rgb tensor:Float[1, 3, 360, 640] name:input_mask tensor:Float[1, 1, 360, …...
【磁盘】每天掌握一个Linux命令 - iostat
目录 【磁盘】每天掌握一个Linux命令 - iostat工具概述安装方式核心功能基础用法进阶操作实战案例面试题场景生产场景 注意事项 【磁盘】每天掌握一个Linux命令 - iostat 工具概述 iostat(I/O Statistics)是Linux系统下用于监视系统输入输出设备和CPU使…...
(二)原型模式
原型的功能是将一个已经存在的对象作为源目标,其余对象都是通过这个源目标创建。发挥复制的作用就是原型模式的核心思想。 一、源型模式的定义 原型模式是指第二次创建对象可以通过复制已经存在的原型对象来实现,忽略对象创建过程中的其它细节。 📌 核心特点: 避免重复初…...
反射获取方法和属性
Java反射获取方法 在Java中,反射(Reflection)是一种强大的机制,允许程序在运行时访问和操作类的内部属性和方法。通过反射,可以动态地创建对象、调用方法、改变属性值,这在很多Java框架中如Spring和Hiberna…...
Yolov8 目标检测蒸馏学习记录
yolov8系列模型蒸馏基本流程,代码下载:这里本人提交了一个demo:djdll/Yolov8_Distillation: Yolov8轻量化_蒸馏代码实现 在轻量化模型设计中,**知识蒸馏(Knowledge Distillation)**被广泛应用,作为提升模型…...
视觉slam十四讲实践部分记录——ch2、ch3
ch2 一、使用g++编译.cpp为可执行文件并运行(P30) g++ helloSLAM.cpp ./a.out运行 二、使用cmake编译 mkdir build cd build cmake .. makeCMakeCache.txt 文件仍然指向旧的目录。这表明在源代码目录中可能还存在旧的 CMakeCache.txt 文件,或者在构建过程中仍然引用了旧的路…...
nnUNet V2修改网络——暴力替换网络为UNet++
更换前,要用nnUNet V2跑通所用数据集,证明nnUNet V2、数据集、运行环境等没有问题 阅读nnU-Net V2 的 U-Net结构,初步了解要修改的网络,知己知彼,修改起来才能游刃有余。 U-Net存在两个局限,一是网络的最佳深度因应用场景而异,这取决于任务的难度和可用于训练的标注数…...
通过MicroSip配置自己的freeswitch服务器进行调试记录
之前用docker安装的freeswitch的,启动是正常的, 但用下面的Microsip连接不上 主要原因有可能一下几个 1、通过下面命令可以看 [rootlocalhost default]# docker exec -it freeswitch fs_cli -x "sofia status profile internal"Name …...
从物理机到云原生:全面解析计算虚拟化技术的演进与应用
前言:我的虚拟化技术探索之旅 我最早接触"虚拟机"的概念是从Java开始的——JVM(Java Virtual Machine)让"一次编写,到处运行"成为可能。这个软件层面的虚拟化让我着迷,但直到后来接触VMware和Doc…...
DAY 45 超大力王爱学Python
来自超大力王的友情提示:在用tensordoard的时候一定一定要用绝对位置,例如:tensorboard --logdir"D:\代码\archive (1)\runs\cifar10_mlp_experiment_2" 不然读取不了数据 知识点回顾: tensorboard的发展历史和原理tens…...
【大模型】RankRAG:基于大模型的上下文排序与检索增强生成的统一框架
文章目录 A 论文出处B 背景B.1 背景介绍B.2 问题提出B.3 创新点 C 模型结构C.1 指令微调阶段C.2 排名与生成的总和指令微调阶段C.3 RankRAG推理:检索-重排-生成 D 实验设计E 个人总结 A 论文出处 论文题目:RankRAG:Unifying Context Ranking…...
