vue3封装Element Plus table表格组件

支持绝大部分Element Plus原有设置属性,支持分页,支持动态适配高度

 效果展示

 

组件代码: 
<template><div class="table-wrap" ref="tableWrap"><el-tableclass="w100 h100":data="tableInfo.tableData":height="tableHeight"v-bind="attrs"><!-- 动态生成列 --><template v-for="(item, index) in columns" :key="index"><!-- 选择列 --><el-table-columnv-if="item.type == 'selection'"type="selection"v-bind="item"></el-table-column><!-- 普通列 --><el-table-column v-else-if="!item.subColumns" v-bind="item"><template #default="scope"><slot :name="item.prop" :scope="scope">{{ scope.row[item.prop] }}</slot></template></el-table-column><!-- 嵌套列 --><el-table-column v-else v-bind="item"><el-table-columnv-for="(child, childIndex) in item.subColumns":key="childIndex"v-bind="child"><template #default="scope"><slot :name="child.prop" :scope="scope">{{ scope.row[child.prop] }}</slot></template></el-table-column></el-table-column></template></el-table><el-pagination:page-sizes="pageSizes":current-page="page.currentPage":page-size="page.pageSize"backgroundlayout="total, sizes, prev, pager, next, jumper":total="tableInfo.total"@size-change="handleChangePage({currentPage: page.currentPage,pageSize: $event,})"@current-change="handleChangePage({currentPage: $event,pageSize: page.pageSize,})"/></div>
</template><script setup>
import { ref, onMounted, onUnmounted } from "vue";// Props 接收
const { tableInfo, columns, pageSizes, ...props } = defineProps({tableInfo: {type: Object,default: () => {return {tableData: [],total: 0,};},},columns: {type: Array,default: () => [],},pageSizes: {type: Array,default: () => [10, 25, 50, 100],},
}); 
const emit =  defineEmits(["current-change"]);
// 获取其他绑定属性
const { attrs } = getCurrentInstance();// 引用
const tableWrap = ref(null);
const tableHeight = ref(50); // 默认高度
let resizeObserver = null;//分页
const page = ref({currentPage: 1,pageSize: 10,
});//函数
const handleChangePage = ({ currentPage, pageSize }) => {page.value.currentPage = currentPage;page.value.pageSize = pageSize;emit("current-change", { currentPage, pageSize});
};// 动态计算表格高度
const initResizeObserver = () => {if (!tableWrap.value) return;//   32是分页高度 10和分页的间隔resizeObserver = new ResizeObserver(() => {tableHeight.value = tableWrap.value.offsetHeight - 32 - 10 || 500;});resizeObserver.observe(tableWrap.value);
};// 生命周期
onMounted(() => initResizeObserver());
onUnmounted(() => resizeObserver?.disconnect());
</script><style scoped lang="scss">
.table-wrap {width: 100%;height: 100%;overflow: auto; /* 根据需求适配 */display: flex;flex-direction: column;gap: 10px;
}
</style>
使用方法:

 注意由于表格通过ref="tableWrap"获取的高度,然后ref="tableWrap"设置的高度百分百,所以在使用组件的时候注意组件的外层高度如下方的class="universalTable h100"。

但设置双层表头的时候注意需要把二级表头放在subColumns属性中。

table原生属性可直接加在组件上例如“ :border="true"”的写法,属性方法都可支持

<template><div class="universalTable h100"><universalTable:border="true":columns="columns":tableInfo="tableInfo"ref="refTable"@current-change="handleCurrentChange"><template #name="{ scope }"><span>{{ scope.row.name }}</span></template></universalTable></div>
</template>
<script setup name="Index">
import { ref, reactive, nextTick } from "vue";
//表头数据
const columns = ref([{type: "selection",},{label: "测试",subColumns: [{prop: "date",label: "Date",width: 100,},],},{prop: "name",label: "Name",width: 120,},{prop: "address",label: "Address",},
]);
//列表数据
const tableInfo = ref({tableData: [{date: "2016-05-03",name: "Tom",address: "No. 189, Grove St, Los Angeles",},{date: "2016-05-02",name: "Tom",address: "No. 189, Grove St, Los Angeles",},{date: "2016-05-04",name: "Tom",address: "No. 189, Grove St, Los Angeles",},{date: "2016-05-01",name: "Tom",address: "No. 189, Grove St, Los Angeles",},],total: 100,
});
//分页数据
const page = ref({currentPage: 1,pageSize: 10,
});
//获取分页数据
const handleCurrentChange = ({ currentPage, pageSize }) => {page.value.currentPage = currentPage;page.value.pageSize = pageSize;
};
</script><style scoped lang="scss">
.universalTable {
}
</style>

 

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

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

相关文章

IText创建加盖公章的pdf文件并生成压缩文件

第一、前言 此前已在文章&#xff1a;Java使用IText根据pdf模板创建pdf文件介绍了Itex的基本使用技巧&#xff0c;本篇以一个案例为基础&#xff0c;主要介绍IText根据pdf模板填充生成pdf文件&#xff0c;并生成压缩文件。 第二、案例 以下面pdf模板为例&#xff0c;生成一个p…

组会 | 大语言模型 + LoRA

目录 1 大语言模型概述1.1 模型的架构1.2 模型的细节&#xff1a;标记化和嵌入化1.3 模型的核心 2 多头注意力机制3 LoRA 概述3.1 冻结部分模型参数3.2 低秩适配&#xff08;LoRA&#xff09;3.2.1 核心工作原理&#xff1a;冻结模型参数3.2.2 核心工作原理&#xff…

对象:是什么,使用,遍历对象,内置对象

对象使用&#xff1a; 对象访问&#xff1a;&#xff08;对象每个属性之间用逗号隔开&#xff09; 补充&#xff1a;也可以通过 对象名[‘属性名’] 对象方法&#xff1a; 方法名:匿名函数 调用方法不需要控制台打印&#xff0c;只要调用就自动输出值 遍历对象&#xff1a; …

小程序24-滚动效果:scroll-view组件详解

在微信小程序中如果想实现内容滚动&#xff0c;需要使用 scroll-view 组件 scroll-view&#xff1a;可滚动视图区域&#xff0c;适用于需要滚动展示内容的场景&#xff0c;用户可以通过手指滑动或者点击滚动条滚动内容。 scroll-x允许横向滚动scroll-y允许纵向滚动 实现横向…

C++设计模式行为模式———中介者模式

文章目录 一、引言二、中介者模式三、总结 一、引言 中介者模式是一种行为设计模式&#xff0c; 能让你减少对象之间混乱无序的依赖关系。 该模式会限制对象之间的直接交互&#xff0c; 迫使它们通过一个中介者对象进行合作。 中介者模式可以减少对象之间混乱无序的依赖关系&…

AUTOSAR_EXP_ARAComAPI的7章笔记(6)

☞返回总目录 相关总结&#xff1a;ara::com 与 AUTOSAR 元模型的关系总结 7.4 ara::com 与 AUTOSAR 元模型的关系 在本文档中&#xff0c;我们一直在不涉及具体的AP元模型&#xff08;其清单部分&#xff09;的情况下解释 ara::com API的思想和机制&#xff0c;AP元模型是正…

LINUX系统编程之——环境变量

目录 环境变量 1、基本概念 2、查看环境变量的方法 三、查看PATH环境变量的內容 1&#xff09;不带路径也能运行的自己的程序 a、将自己的程序直接添加到PATH指定的路径下 b、将程序所在的路径添加到PATH环境中 四、环境变量与本地变量 1、本地变量创建 2、环境变量创…

MacOS通过X11转发远程运行virt-manager进行虚机分配

今天需要通过本地macbook机器连接远程物理机&#xff0c;执行虚机分配&#xff0c;现有文档仅提供window环境安装&#xff0c;如下整理Mac环境下的安装步骤 操作篇 前提条件 支持x11转发的terminal&#xff0c;我本地使用iTerm2&#xff1b;本地安装XQuartz&#xff0c;作为…

【AI系统】AI 基本理论奠定

虽然 AI 在今年取得了举世瞩目的进展与突破&#xff0c;但是其当前基于的核心理论神经网络等&#xff0c;在这波浪潮开始前已经基本奠定&#xff0c;并经历了多次的起起伏伏。神经网络作为 AI 的前身&#xff0c;经历了以下的发展阶段&#xff1a; 萌芽兴奋期&#xff08;约 19…

网络安全服务人才发展路线图

到2023年&#xff0c;全球网络安全支出规模将达到1512亿美元&#xff08;约合10640.4亿元人民币&#xff09;&#xff0c;并将以9.4%的年复合增长率持续增长。与火爆的产业现状相比&#xff0c;中国的网络安全服务人才面临巨大缺口。相关数据显示&#xff0c;我国网络安全人才缺…

STM32 ADC 读取模拟量

问题 我有一个调速开关&#xff0c;模拟量输入&#xff0c;因此需要使用 STM32 读取模拟量&#xff0c;并通过串口输入来调试。串口相关知识参考 STM32 串口输出调试信息。 硬件信息: CubeMX version 6.12.1Keil uVision V5.41.0.0 参考知识 【STM32】HAL库 STM32CubeMX教…

[每周一更]-(第124期):模拟面试|缓存面试思路解析

文章目录 31 为什么 Redis 不立刻删除已经过期的数据?1. Redis 是怎么删除过期 key 的?2. Redis 为什么不立刻删除已经过期的 key?3. Redis 为什么不每个 key 都启动一个定时器,监控过期时间?4. Redis 是如何执行定期删除的?5. 为什么 Redis 在定期删除的时候不一次性把所…

操作系统——揭开盖子

计算机执行时——取指执行 es:bx等于从0x9000开始&#xff0c;到0x90200结束

uni-app 认识条件编译,了解多端部署

一. 前言 在使用 uni-app 进行跨平台开发的过程中&#xff0c;经常会遇到需要针对不同平台或不同环境进行条件编译的情况。条件编译是一种在编译过程中根据指定条件选择不同代码路径的技术&#xff0c;可以帮助我们在不同平台或环境下编写不同的代码&#xff0c;以适应不同的平…

模糊控制系统的设计(取材bilibili_蓝天的季洁)

模糊控制原理和传统控制原理&#xff0c;在框图上的区别实际上只在控制器方面存在差异&#xff0c;将传统的控制器改为了模糊控制器&#xff08;fuzzy controller&#xff09;。 通过举例说明&#xff0c;将原有的[0,100]的参数通过隶属函数规则&#xff0c;&#xff08;类似于…

pytest日志总结

pytest日志分为两类&#xff1a; 一、终端&#xff08;控制台&#xff09;打印的日志 1、指定-s&#xff0c;脚本中print打印出的信息会显示在终端&#xff1b; 2、pytest打印的summary信息&#xff0c;这部分是pytest 的默认输出&#xff08;例如测试结果PASSED, FAILED, S…

向量数据库FAISS之四:向量检索和 FAISS

来自 YouTube 1.相似度搜索的传统方法(Jaccard, w-shingling, Levenshtein) 1.Jaccard 距离 公式 Jaccard ( A , B ) 1 − ∣ A ∩ B ∣ ∣ A ∪ B ∣ \text{Jaccard}(A, B) 1 - \frac{|A \cap B|}{|A \cup B|} Jaccard(A,B)1−∣A∪B∣∣A∩B∣​ 其中&#xff0c; A 和 …

深入探究蓝牙节能技术:SNIFF与HOLD模式

目录 一、概述 1.1. Sniff Mode&#xff08;嗅探模式/呼吸模式&#xff09; 1.1.1.定义与目的 1.1.2 工作原理 1.1.3 进入与退出 1.2. Hold Mode&#xff08;保持模式&#xff09; 1.2.1. 定义与目的 1.2.2. 工作原理 1.2.3. 进入 1.2.4. 通知机制 二、Sniff mode&a…

Linux驱动开发快速入门——字符设备驱动(直接操作寄存器设备树版)

Linux驱动开发快速入门——字符设备驱动 前言 笔者使用开发板型号&#xff1a;正点原子的IMX6ULL-alpha开发板。ubuntu版本为&#xff1a;20.04。写此文也是以备忘为目的。 字符设备驱动 本小结将以直接操作寄存器的方式控制一个LED灯&#xff0c;可以通过read系统调用可以…

ROS机器视觉入门:从基础到人脸识别与目标检测

前言 从本文开始&#xff0c;我们将开始学习ROS机器视觉处理&#xff0c;刚开始先学习一部分外围的知识&#xff0c;为后续的人脸识别、目标跟踪和YOLOV5目标检测做准备工作。我采用的笔记本是联想拯救者游戏本&#xff0c;系统采用Ubuntu20.04&#xff0c;ROS采用noetic。 颜…