vue3 element plus el-table封装(二)

上文是对el-table的基本封装,只能满足最简单的应用,本文主要是在上文的基础上增加slot插槽,并且对col插槽进行拓展,增加通用性

// BaseTable.vue

<template><el-table><template v-for="name in tableSlots" :key="name" #[name]><slot :name="name"></slot></template><el-table-column v-for="(col,index) in $attrs.config" :key="index" v-bind="col"><template v-if="col.slot" #[getColSlot(col)]="scope" ><slot :name="col.slot" v-bind="scope"></slot></template></el-table-column></el-table>
</template>
<script lang="ts" setup>
const slots=useSlots();
const tableSlots=computed(()=>{// 原生el-table插槽只有default,append,empty// 原生el-table-column插槽只有table插槽只有default,header// 这里将header单独处理,认为是col的插槽,从table插槽中排除return Object.keys(slots).filter(name=>name!=='header')
})
const getColSlot=(col)=>{return col.slot==='header'?'header':'default'
}
</script>

//index.vue

<template><BaseTable :config="config" :data="tableData" :style="{width:'800px'}"><template #status="scope"><el-text :type="scope.row.status.type ">{{ scope.row.status.content }}</el-text></template><template #btn="scope"><el-button type="primary">{{ scope.row.btn }}</el-button></template><!-- 如有多个类似slot,也可以用如下方式渲染 --><!-- <template  v-for="(col,index) in config.filter(item=>item.slot && item.slot!=='header')" :key="index" #[col.slot]="scope"><el-button type="primary">{{ scope.row.btn }}</el-button></template> --><template #header="scope"><el-button type="primary">{{ scope.column.label }}</el-button></template></BaseTable>
</template><script lang="ts" setup>
import BaseTable from './BaseTable.vue'
const config=[{type:'selection'},{prop: 'date',label:'日期',width:'180'},{prop: 'name',label:'姓名',},{prop: 'status',label:'状态',slot:'status',width:'180'},{prop: 'btn',label:'操作',slot:'btn',width:'180'},{prop: 'header',label:'按钮header',slot:'header',width:'180'},
];
const tableData = [{date: '2016-05-03',name: '张三',status:{content:'工作',type:'success'},btn: 'confirm',},{date: '2016-05-02',name: '李四',status:{content:'出差',type:'primary'},btn: 'confirm',},{date: '2016-05-04',name: '王五',status:{content:'休假',type:'danger'},btn: 'confirm',},
]
</script>
![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/dad5e7be52c84c12997da0829cdf9178.png)

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

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

相关文章

Hadoop安装笔记1单机/伪分布式配置_Hadoop3.1.3——备赛笔记——2024全国职业院校技能大赛“大数据应用开发”赛项——任务2:离线数据处理

将下发的ds_db01.sql数据库文件放置mysql中 12、编写Scala代码&#xff0c;使用Spark将MySQL的ds_db01库中表user_info的全量数据抽取到Hive的ods库中表user_info。字段名称、类型不变&#xff0c;同时添加静态分区&#xff0c;分区字段为etl_date&#xff0c;类型为String&am…

年度总结 | 回味2023不平凡的一年

目录 前言1. 平台成就2. 自我提升3. Bug连连4. 个人展望 前言 每年CSDN的总结都不能落下&#xff0c;回顾去年&#xff1a;年度总结 | 回味2022不平凡的一年&#xff0c;在回忆今年&#xff0c;展望下年 1. 平台成就 平台造就我&#xff08;我也造就平台哈哈&#xff09; 每…

MATLAB中./和/,.*和*,.^和^的区别

MATLAB中./和/&#xff0c;.*和*&#xff0c;.^ 和^ 的区别 MATLAB中./和/&#xff0c;.*和*&#xff0c;.^ 和^ 的区别./ 和 / 的区别.//实验实验结果 .* 和 * 的区别.**实验实验结果 .^ 和^ 的区别.^n^n实验运行结果 MATLAB中./和/&#xff0c;.和&#xff0c;.^ 和^ 的区别 …

Plantuml之JSON数据语法介绍(二十五)

简介&#xff1a; CSDN博客专家&#xff0c;专注Android/Linux系统&#xff0c;分享多mic语音方案、音视频、编解码等技术&#xff0c;与大家一起成长&#xff01; 优质专栏&#xff1a;Audio工程师进阶系列【原创干货持续更新中……】&#x1f680; 优质专栏&#xff1a;多媒…

设计模式(4)--对象行为(11)--访问者

1. 意图 表示一个作用于某对象结构中的各元素的操作。 使你可以在不改变各元素的类的前提下定义于作用于这些元素的新操作。 2. 五种角色 抽象访问者(Visitor)、具体访问者(Concrete Visitor)、抽象元素(Element)、 具体元素(Concrete Element)、对象结构(ObjectStructure) 3…

学习笔记15——前端和http协议

学习笔记系列开头惯例发布一些寻亲消息&#xff0c;感谢关注&#xff01; 链接&#xff1a;https://baobeihuijia.com/bbhj/ 关系 客户端&#xff1a;对连接访问到的前端代码进行解析和渲染&#xff0c;就是浏览器的内核服务器端&#xff1a;按照规则编写前端界面代码 解析标准…

python操作mysql数据库

说明&#xff1a;这里仅仅为了演示python操作MySQL数据库&#xff0c;真实环境中&#xff0c;最好把CURD分别封装为对应的方法。并将这些方法在类中封装&#xff0c;体现python面向对象的特征。python链接MySQL数据库 建表 create database mydb; use mydb; create table EMP…

ThinkPHP如何防止SQL注入攻击

ThinkPHP 5.1版本默认采用了预处理机制来防止SQL注入攻击&#xff0c;开发者只需要按照ThinkPHP的编码规范来编写数据库查询语句&#xff0c;就能有效地防止SQL注入攻击。 在ThinkPHP中&#xff0c;通过使用Query对象来执行数据库查询操作。Query对象会自动对用户输入的数据进…

Mysql 高级语句

目录 高阶查询select语句&#xff1a; 显示表格中一个或数个字段的所有数据记录&#xff1a; 不显示重复的数据记录&#xff1a;distinct and且&#xff0c;or或 显示已知的值的数据记录&#xff1a;in 显示两个值范围内的数据记录&#xff1a;between 通配符&#xff1…

UE蓝图 RPG动作游戏(一) day15

角色状态制作 制作角色动画混合空间 创建一个动混合空间 添加动作在混合空间 动画蓝图 创建一个动画蓝图 先使用混合空间进行移动&#xff0c;后续优化后再使用状态机 编写垂直水平速度逻辑初始化&#xff0c;获取到此动画的角色组件 获取Horizontal与Vertical的速度逻辑 …

CDH 6.3.2集成flink 1.18 zookeeper版本不匹配Flink-yarn启动失败

CDH 6.3.2集成flink 1.18 zookeeper版本不匹配Flink-yarn不能正常启动&#xff0c;而在CHD Web页面&#xff0c;flink日志报错提示不明确&#xff0c;不能定位具体错误。CM WEB启动失败错误日志如下图所示&#xff1a; CM查看完成错误日志 [31/Dec/2023 10:45:09 0000] 26000…

wpf ComboBox绑定数据及变更事件

定义ComboBox&#xff0c;以及SelectionChanged事件 <ComboBox x:Name"cmb_radius" Height"30" Width"65" FontSize"15" DisplayMemberPath"Value" SelectedValuePath"Key" HorizontalAlignment"Center&…

MySQL安装与配置

文章目录 MySQL 是应用最广泛的开源关系数据库&#xff0c;是许多常见网站、应用程序和商业产品使用的主要关系数据存储。MySQL是一种可靠、稳定而安全的基于 SQL 的数据库管理系统。MySQL 数据库适用于各种使用案例&#xff0c;包括任务关键型应用程序、动态网站以及用于软件、…

osg::DrawElements*系列函数及GL_QUAD_STRIP、GL_QUADS绘制四边形效率对比

目录 1. 前言 2. osg::DrawElements*系列函数用法说明 3. GL_QUADS、GL_QUAD_STRIP用法及不同点 4. 效率对比 5. 总结 6. 参考资料 1. 前言 利用osg绘制图元&#xff0c;如&#xff1a;三角形、四边形等&#xff0c;一般用osg::PrimitiveSet类。其派生出了很多子类&#…

使用docker build构建image

文章目录 环境步骤准备例1&#xff1a;基本用法例2&#xff1a;缓存layer例3&#xff1a;Multi-stage例4&#xff1a;Mountcache mountbind mount 例5&#xff1a;参数例6&#xff1a;Export文件例7&#xff1a;测试 参考 环境 RHEL 9.3Docker Community 24.0.7 步骤 在Dock…

Cookie、Session

一、会话管理 1、什么是会话&#xff1f; 会话是客户端和服务端之间进行多次的请求和响应。 相当于两个人聊天&#xff0c;进行了多次的问答。 对多次问答的管理叫做会话管理&#xff0c;管理的东西是通信状态。 2、什么是状态&#xff1f; 举例&#xff1a; 小明去校园食堂…

常用设计模式全面总结版(JavaKotlin)

这篇文章主要是针对之前博客的下列文章的总结版本: 《设计模式系列学习笔记》《Kotlin核心编程》笔记:设计模式【Android知识笔记】FrameWork中的设计模式主要为了在学习了 Kotlin 之后,将 Java 的设计模式实现与 Kotin 的实现放在一起做一个对比。 一、创建型模式 单例模…

使用Vite创建React + TypeScript(node版本为16.17.0,含资源下载)

PC端 安装指令&#xff1a; npm create vitelatest react-ts-pro -- --template react-tsVite是一个框架无关的前端工具链&#xff0c;可以快速的生成一个React TS的开发环境&#xff0c;并且可以提供快速的开发体验说明&#xff1a; 1. npm create vitelatest固定写法&#…

以太网二层交换机实验

实验目的&#xff1a; &#xff08;1&#xff09;理解二层交换机的原理及工作方式&#xff1b; &#xff08;2&#xff09;利用交换机组建小型交换式局域网。 实验器材&#xff1a; Cisco packet 实验内容&#xff1a; 本实验可用一台主机去ping另一台主机&#xff0c;并…

Baumer工业相机堡盟工业相机如何通过NEOAPI SDK设置相机的图像剪切(ROI)功能(C++)

Baumer工业相机堡盟工业相机如何通过NEOAPI SDK设置相机的图像剪切&#xff08;ROI&#xff09;功能&#xff08;C&#xff09; Baumer工业相机Baumer工业相机的图像剪切&#xff08;ROI&#xff09;功能的技术背景CameraExplorer如何使用图像剪切&#xff08;ROI&#xff09;功…