使用ElementPlus实现内嵌表格和内嵌分页

前言

有时遇到这样的需求,就是在表格里面嵌入一个表格,以及要求带有分页,这样在ElementPlus中很好实现。以下使用Vue2语法实现一个简单例子,毕竟Vue3兼容Vue2语法,若想要Vue3版本例子,简单改改就OK了。

一、示例代码

(1)/src/views/Example/InlineTable/index.vue

<template><div class="index" v-loading="elementLoading" element-loading-text="数据正在加载中..."><!-- 外层表格 --><div class="outer-table-container"><el-tablebordersize="small"row-key="id"ref="outerTableRef"height="100%"highlight-current-row:data="outerData.list":expand-row-keys="outerData.expandedKeys"@expand-change="handleOuterDataExpandChange"><el-table-column fixed prop="id" label="游戏服务器ID" width="200" align="center"><template #default="scope"><p>{{ scope.row.id }}</p></template></el-table-column><el-table-column fixed prop="id" label="玩家列表" type="expand" width="200" align="center"><template #default="scope"><div class="outer-table-container-td__playerList" v-loading="scope.row.loading"><!-- ^ 内嵌表格 --><div class="inner-table-container"><el-tablebordersize="small"row-key="id"height="100%"highlight-current-row:data="scope.row.list"><el-table-column fixed prop="id" label="玩家ID" width="200" align="center"><template #default="scope"><p>{{ scope.row.id }}</p></template></el-table-column><el-table-column prop="power" label="玩家战力" width="auto" align="center" show-overflow-tooltip><template #default="scope"><p style="text-align: left; text-indent: 10px; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">{{ scope.row.power }}</p></template></el-table-column><el-table-column fixed="right" label="操作" align="center" width="150"><template #default="scope"><div class="inner-table-container-td__operation"><el-row><el-col :span="24"><!-- ^ 查看详情 --><el-tooltip effect="dark" content="查看详情" placement="top" :enterable="false" :hide-after="0"><el-button size="small" type="" style="border: unset" plain circle @click="() => {log('查看详情 =>', scope.row)}"><el-icon :size="16"><View /></el-icon></el-button></el-tooltip><!-- / 查看详情 --></el-col></el-row></div></template></el-table-column></el-table></div><!-- / 内嵌表格 --><!-- ^ 内嵌分页 --><div class="inner-pagger-container"><el-paginationv-if="scope.row.total > 0"smallbackgroundv-model:current-page="scope.row.pageNumber"v-model:page-size="scope.row.pageSize":total="scope.row.total":page-sizes="[10, 20, 50, 100]"layout="total, sizes, prev, pager, next, jumper"@size-change="handleInnerTableSizeChange(scope.row)"@current-change="handleInnerTableCurrentChange(scope.row)"/></div></div></template></el-table-column><el-table-column prop="host" label="游戏服务器名称" width="auto" min-width="400" align="center" show-overflow-tooltip><template #default="scope"><p class="outer-table-container-td__name">{{ scope.row.host }}</p></template></el-table-column><el-table-column label="创建时间" width="400" align="center"><template #default="scope"><div>{{ scope.row.createTime ? scope.row.createTime : '-' }}</div></template></el-table-column></el-table></div><!-- / 外层表格 --><!-- 外层分页 --><div class="outer-pagger-container"><el-paginationsmallbackground:current-page="outerData.pageNumber":page-size="outerData.pageSize":page-sizes="[20, 30, 50, 100]":total="outerData.total"layout="total, sizes, prev, pager, next, jumper"@size-change="handleOuterTableSizeChange"@current-change="handleOuterTableCurrentChange"></el-pagination></div><!-- / 外层分页 --></div>
</template><script>
export default {data: () => ({// 加载标志elementLoading: true,// 外层数据outerData: {list: [], // 列表selectedList: [], // 已选列表expandedKeys: [], // 已展开键集合expandedList: [], // 已展开列表total: 521, // 总数pageNumber: 1, // 当前页pageSize: 20, // 页码大小},// 打印日志log: console.log}),created() {this.init()},mounted() {},methods: {// ---- ---- ---- ---- ^ 事件调用方法 ---- ---- ---- ----/*** 初始化外层表格*/init() {const list = []for (let i = 0; i < this.outerData.pageSize; i++) {const number = parseInt(Math.random() * 10000) + iconst row = {id: number,host: `游戏服务器 - ${number}`,createTime: new Date()}list.push(row)}this.outerData.list = listthis.outerData.total = this.outerData.totalthis.elementLoading = false},/*** 外层表格 - 页码改变方法*/handleOuterTableSizeChange(val) {this.elementLoading = truethis.outerData.pageNumber = 1this.outerData.pageSize = valconst frontRecords = this.outerData.pageSize * (this.outerData.pageNumber - 1)const remainRecords = this.outerData.total - frontRecordslet list = []if (remainRecords >= this.outerData.pageSize) {  for (let i = 0; i < this.outerData.pageSize; i++) {const number = parseInt(Math.random() * 10000) + iconst row = {id: number,host: `游戏服务器 - ${number}`,createTime: new Date()}list.push(row)}} else {for (let i = 0; i < remainRecords; i++) {const number = parseInt(Math.random() * 10000) + iconst row = {id: number,host: `游戏服务器 - ${number}`,createTime: new Date()}list.push(row)}}setTimeout(() => {this.outerData.list = listthis.outerData.total = this.outerData.totalthis.elementLoading = false}, 200)},/*** 外层表格 - 当前页改变方法*/handleOuterTableCurrentChange(val) {this.elementLoading = truethis.outerData.pageNumber = valconst frontRecords = this.outerData.pageSize * (this.outerData.pageNumber - 1)const remainRecords = this.outerData.total - frontRecordslet list = []if (remainRecords >= this.outerData.pageSize) {for (let i = 0; i < this.outerData.pageSize; i++) {const number = parseInt(Math.random() * 10000) + iconst row = {id: number,host: `游戏服务器 - ${number}`,createTime: new Date()}list.push(row)}} else {for (let i = 0; i < remainRecords; i++) {const number = parseInt(Math.random() * 10000) + iconst row = {id: number,host: `游戏服务器 - ${number}`,createTime: new Date()}list.push(row)}}setTimeout(() => {this.outerData.list = listthis.outerData.total = this.outerData.totalthis.elementLoading = false}, 200)},/*** 外层表格 - 展开/收起某一行事件句柄方法*/async handleOuterDataExpandChange(row, expandedRows) {this.outerData.expandedList = expandedRowsconst index = this.outerData.expandedList.findIndex((item) => item.id === row.id)if (index != -1) {// 展开this.getPlayerList(row)} else {// 收起row.loading = true}},/*** 根据游戏服务器获取玩家列表*/async getPlayerList(row) {for (let vo of this.outerData.list) {// 匹配游戏服务器if (vo.id == row.id) {vo.loading = falsevo.list = [] // 列表vo.total = 25 // 总数vo.pageNumber = 1 // 当前页vo.pageSize = 10 // 页码大小const list = []for (let i = 0; i < vo.pageSize; i++) {const number = parseInt(Math.random() * 100000000) + iconst row = {id: number,power: Math.pow(number, 5),}list.push(row)}vo.list = list}}},/*** 内嵌表格 - 页码改变方法*/handleInnerTableSizeChange(row) {row.loading = truerow.pageNumber = 1const frontRecords = row.pageSize * (row.pageNumber - 1)const remainRecords = row.total - frontRecordslet list = []if (remainRecords >= row.pageSize) {for (let i = 0; i < row.pageSize; i++) {const number = parseInt(Math.random() * 100000000) + iconst row = {id: number,power: Math.pow(number, 5),}list.push(row)}} else {for (let i = 0; i < remainRecords; i++) {const number = parseInt(Math.random() * 100000000) + iconst row = {id: number,power: Math.pow(number, 5),}list.push(row)}}setTimeout(() => {row.list = listrow.total = row.totalrow.loading = false}, 200)},/*** 内嵌表格 - 当前页改变方法*/handleInnerTableCurrentChange(row) {row.loading = trueconst frontRecords = row.pageSize * (row.pageNumber - 1)const remainRecords = row.total - frontRecordslet list = []if (remainRecords >= row.pageSize) {for (let i = 0; i < row.pageSize; i++) {const number = parseInt(Math.random() * 100000000) + iconst row = {id: number,power: Math.pow(number, 5),}list.push(row)}} else {for (let i = 0; i < remainRecords; i++) {const number = parseInt(Math.random() * 100000000) + iconst row = {id: number,power: Math.pow(number, 5),}list.push(row)}}setTimeout(() => {row.list = listrow.total = row.totalrow.loading = false}, 200)},}
}
</script><style lang="less" scoped>.index {display: flex;flex-direction: column;width: 100%;height: 100%;overflow: hidden;// ---- ---- ---- ---- ^ 外层表格 样式 ---- ---- ---- ----:deep(.outer-table-container) {flex: 1;position: relative;overflow: hidden;.el-table {th {.cell {color: #000;font-weight: normal;font-size: 13px;}}td {padding: 2.5px 0;.cell {// color: #000;font-size: 13px;padding: 0;}}.outer-table-container-td__playerList {height: auto;overflow: auto;padding: 4px 7px;/* ^ 内嵌表格 */.inner-table-container {position: relative;overflow: hidden;.el-table {th {.cell {color: #000;font-weight: normal;font-size: 13px;}}td {padding: 2.5px 0;.cell {// color: #000;font-size: 13px;padding: 0;}}.el-table__cell {// background-color: #f8f8f8;}}/* 操作 */.inner-table-container-td__operation {.el-button {position: relative;margin: 0px 1px;}}/* / 操作 */}/* / 内嵌表格 *//* ^ 内嵌分页 */.inner-pagger-container {position: relative;width: 100%;height: 26px;margin-top: 7px;.el-pagination {position: absolute;top: 0;// left: 0;right: 0;bottom: 0;margin: 0 auto;width: fit-content;.btn-prev, .btn-next, .el-pager li {border: 1px solid #dcdfe6;}.el-pager li.is-active {border-color: #5e7ce0;}}}/* / 内嵌分页 */}/* 操作 */.operation {.el-button {position: relative;margin: 0px 1px;}}/* / 操作 */}}// ---- ---- ---- ---- / 外层表格 样式 ---- ---- ---- ----// ---- ---- ---- ---- ^ 外层分页 样式 ---- ---- ---- ----:deep(.outer-pagger-container) {padding: 7px 0;width: 100%;height: 26px;position: relative;.el-pagination {position: absolute;top: 0;left: 0;right: 0;bottom: 0;margin: 0 auto;width: fit-content;.btn-prev, .btn-next, .el-pager li {border: 1px solid #dcdfe6;}.el-pager li.is-active {border-color: #5e7ce0;}}}// ---- ---- ---- ---- / 外层分页 样式 ---- ---- ---- ----}
</style>

二、运行效果

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

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

相关文章

快递、外卖、网购自动定位及模糊检索收/发件地址功能实现

概述 目前快递、外卖、团购、网购等行业 &#xff1a;为了简化用户在收发件地址填写时的体验感&#xff0c;使用辅助定位及模糊地址检索来丰富用户的体验 本次demo分享给大家&#xff1b;让大家理解辅助定位及模糊地址检索的功能实现过程&#xff0c;以及开发出自己理想的作品…

IDEA中创建Java Web项目方法2

以下过程使用IntelliJ IDEA 2021.3 一、创建Maven项目 1. File -> New -> Projects... 2. 选择Maven&#xff0c;点击Next 3. 输入项目名称&#xff0c;Name: WebDemo3。点击 Finish&#xff0c;生成新的项目 二、添加框架支持 1. 在项目名上右键&#xff0c;选择 A…

云服务部署:AWS、Azure和GCP比较

&#x1f337;&#x1f341; 博主猫头虎&#xff08;&#x1f405;&#x1f43e;&#xff09;带您 Go to New World✨&#x1f341; &#x1f984; 博客首页——&#x1f405;&#x1f43e;猫头虎的博客&#x1f390; &#x1f433; 《面试题大全专栏》 &#x1f995; 文章图文…

线性代数基础-矩阵

八、矩阵的基础概念 1.矩阵 我们忘掉之前行列式的一切&#xff0c;列一种全新的数表&#xff0c;虽然长得很像&#xff0c;但是大不相同&#xff0c;首先一个区别就是矩阵不能展开成一个值&#xff0c;这里不讨论矩阵的空间意义 { a 11 x 1 a 12 x 2 a 13 x 3 . . . a 1…

【C#】【源码】直接可用的远程桌面应用

【背景】 封闭环境无法拷贝外来的远程桌面软件&#xff0c;所以就直接自己用C#写一个。 【效果】 【说明】 本篇会给出完整的编程步骤&#xff0c;照着写就能拥有你自己的远程桌面应用&#xff0c;直接可以运行在局域网。 如果不想自己敲代码&#xff0c;也可以选择直接下载…

Redis环境配置

【Redis解压即可】链接&#xff1a;https://pan.baidu.com/s/1y4xVLF8-8PI8qrczbxde9w?pwd0122 提取码&#xff1a;0122 【Redis桌面工具】 链接&#xff1a;https://pan.baidu.com/s/1IlsUy9sMfh95dQPeeM_1Qg?pwd0122 提取码&#xff1a;0122 Redis安装步骤 1.先打开Redis…

OPENCV实现DNN图像分类

使用步骤1 使用步骤2 使用步骤3 使用步骤4 使用步骤5 使用步骤6 完整代码如下: import numpy as np

线程的方法(未完成)

线程的方法 1、sleep(long millis) 线程休眠&#xff1a;让执行的线程暂停一段时间&#xff0c;进入计时等待状态。 static void sleep(long millis):调用此方法后&#xff0c;当前线程放弃 CPU 资源&#xff0c;在指定的时间内&#xff0c;sleep 所在的线程不会获得可运行的机…

解决MySQL8.0本地计算机上的MySQL服务启动后停止没有报告任何错误

1.启动MySQL的错误信息如下 &#xff08;1&#xff09;“本地计算机上的MySQL服务启动后停止。某些服务在未由其他服务或程序使用时将自动停止。” &#xff08;2&#xff09;又在PowerShell中运行"net start MySQL"&#xff0c;服务启动失败。“MySQL 服务无法启…

The Importance of Reliability for Startup Success

Performance might not be a problem for your startup,but reliability probably is Customers don’t like paying for services that go offline.I know this from personal experience,I’ve been on both sides of that situation.I’ve maintained some really unreliabl…

MyBatis初级

文章目录 一、mybatis1、概念2、JDBC缺点2.1、之前jdbc操作2.2 、原始jdbc操作的分析 3、mybatis的使用3.1、导入maven依赖3.2、新建表3.3、实体类3.4、编写mybatis的配置文件3.5、编写接口 和 映射文件3.6、编写测试类3.7、注意事项 4、代理方式开发5、mybatis和spring整合5.1…

Linux Arm64修改页表项属性

文章目录 前言一、获取pte1.1 pgd_offset1.2 pud_offset1.3 pmd_offset1.4 pte_offset_kernel 二、修改pte属性2.1 set/clear_pte_bit2.2 pte_wrprotect2.3 pte_mkwrite2.4 pte_mkclean2.5 pte_mkdirty 三、set_pte_at四、__flush_tlb_kernel_pgtable五、demo参考资料 前言 在…

二进制 Deploy Kubernetes v1.23.17 超级详细部署

文章目录 1. 预备条件2. 基础配置2.1 配置root远程登录2.2 配置主机名2.3 安装 ansible2.4 配置互信2.5 配置hosts文件2.6 关闭防firewalld火墙2.7 关闭 selinux2.8 关闭交换分区swap2.9 修改内核参数2.10 安装iptables2.11 开启ipvs2.12 配置limits参数2.13 配置 yum2.14 配置…

不可变集合的详细概述

1.不可变集合 1.1 什么是不可变集合 是一个长度不可变&#xff0c;内容也无法修改的集合 1.2 使用场景 如果某个数据不能被修改&#xff0c;把它防御性地拷贝到不可变集合中是个很好的实践。 当集合对象被不可信的库调用时&#xff0c;不可变形式是安全的。 简单理解&…

基于Spring Boot+vue的酒店管理系统

文章目录 项目介绍主要功能截图:前台后台部分代码展示设计总结项目获取方式🍅 作者主页:超级无敌暴龙战士塔塔开 🍅 简介:Java领域优质创作者🏆、 简历模板、学习资料、面试题库【关注我,都给你】 🍅文末获取源码联系🍅 项目介绍 基于Spring Boot+vue的酒店管理…

什么是 BSD 协议?

BSD开源协议是一个给于使用者很大自由的协议。可以自由的使用&#xff0c;修改源代码&#xff0c;也可以将修改后的代码作为开源或者专有软件再发布。当你发布使用了BSD协议的代码&#xff0c;或者以BSD协议代码为基础做二次开发自己的产品时&#xff0c;需要满足三个条件&…

Git的ssh方式如何配置,如何通过ssh方式拉取和提交代码

git的ssh配置 HTTPS和SSH的区别设置SSH方式配置单个仓库配置账户公钥 大家通过git拉取代码的时候&#xff0c;一般都是通过http的方式&#xff0c;简单方便。但是细心的童鞋肯定也注意到Git也是支持ssh方式的。可能很多人也试过使用这个方式&#xff0c;但是好像没有那么简单。…

Python爬虫实战案例——第五例

文章中所有内容仅供学习交流使用&#xff0c;不用于其他任何目的&#xff01;严禁将文中内容用于任何商业与非法用途&#xff0c;由此产生的一切后果与作者无关。若有侵权&#xff0c;请联系删除。 目标&#xff1a;采集三国杀官网的精美壁纸 地址&#xff1a;aHR0cHM6Ly93d3…

IDEA2023.2.1中创建第一个Tomcat的web项目

首先&#xff0c;创建一个普通的java项目。点击【file】-【new】-【project】 创建一个TomcatDemo项目 创建如下图 添加web部门。点击【file】-【project structure】 选择【modules】-选中项目“TomcatDemo” 点击项目名上的加号【】&#xff0c;添加【web】模块 我们就会发现…

网络协议学习地图分享

最近在回顾网络知识点的时候&#xff0c;发现华为数通有关报文格式及网络协议地图神仙网站&#xff0c;这里涵盖了各个协议层及每个协议层对应的协议内容&#xff0c;最人性的化的一点是点击每个单独的协议可以跳转到该协议详细报文格式页面&#xff0c;有对应的说明和解释&…