当前位置： 首页 > news >正文

Vue3+Element Plus实现el-table跨行显示（非脚手架）

news 2026/4/1 10:25:21

Vue3+Element Plus实现el-table跨行显示

  • app组件内容
    • 使用:span-method="objectSpanMethod"自定义方法实现跨行显示
    • 查询方法
    • 初始化挂载
    • 新建一个html即可进行测试，完整代码如下
    • 效果图

app组件内容

 <div id="app"><!-- 远程搜索 --><el-form :inline="true" :model="formInline" class="demo-form-inline"><el-form-item label="任务名称：" style="margin-left:30px;"><el-select v-model="value" filterable remote clearable reserve-keyword placeholder="Please enter a keyword" :remote-method="remoteMethod" :loading="loading"><el-option v-for="item in options" :key="item.CODE" :label="item.NAME" :value="item.CODE" /></el-select></el-form-item><el-form-item><el-button type="primary" @click="onSubmit">查询</el-button></el-form-item></el-form><!-- 表格数据 --><el-table :data="tableData" stripe border style="width: 98%;" :span-method="objectSpanMethod" max-height="650"><el-table-column fixed prop="CODE" label="编码" width="60"></el-table-column><el-table-column prop="NAME" label="名称"></el-table-column><el-table-column prop="FREQUENCY" label="频次" width="80"></el-table-column><el-table-column prop="FNAME" label="执行科室" width="150"></el-table-column><el-table-column prop="FILENAME" label="文件名称"></el-table-column><el-table-column prop="STATUS" label="状态" width="80"></el-table-column><el-table-column prop="CREATEID" label="上传人" width="80"></el-table-column><el-table-column prop="CREATEDATE" label="上传时间"></el-table-column></el-table></div>

使用:span-method="objectSpanMethod"自定义方法实现跨行显示

const objectSpanMethod = ({row,column,rowIndex,columnIndex}) => {const columnsToSpan = ['CODE', 'NAME', 'FNAME', 'FREQUENCY']; // 列名数组if (columnsToSpan.includes(column.property)) {if (rowIndex === 0 || row[column.property] !== tableData.value[rowIndex - 1][column.property]) {// 如果是相同 "NAME" 的第一行，则返回正确的 rowspan 和 colspanlet rowspan = 1;for (let i = rowIndex + 1; i < tableData.value.length; i++) {if (tableData.value[i][column.property] === row[column.property]) {rowspan++;tableData.value[i]._rowspan = 0; // 隐藏后续行的 "NAME"} else {break;}}return {rowspan,colspan: 1};}return {rowspan: 0,colspan: 0}; // 隐藏相同 "NAME" 的后续行}return {rowspan: 1,colspan: 1};}

查询方法

const onSubmit = (boolen) => {// 在这里获取输入的值const inputValue = value.value;if ((inputValue !== null && inputValue !== undefined && inputValue !== '') || boolen) {// console.log("Input Value:", inputValue);// axios.get(UJCAjaxBaseUrl + "/请求地址", {//     params: {//         TaskId: inputValue//     }// }).then((response) => {//     console.log("response:" + response.data.data);//     tableData.value = response.data.data;//     return true;// }).catch((error) => {//     console.error('发生错误：', error);//     return false;// });} else {showErrorMessage('请搜索并选择您要查询的细则编码或细则名称!');return false;}

初始化挂载

  //初始化挂载onMounted(() => {list.value = states.map((item) => {return {value: item};});onSubmit(true);});

新建一个html即可进行测试，完整代码如下

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Vue 3 回车键示例</title><!-- 引入 Vue 3 和 Element Plus --><!-- 包含 Vue 3 库 --><script src="https://cdn.jsdelivr.net/npm/vue@3.3.4/dist/vue.global.min.js"></script><!-- 包含 Element Plus 的 CSS 样式 --><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-plus@2.3.9/dist/index.min.css"><!-- 包含 Element Plus 的 JavaScript 文件 --><script src="https://cdn.jsdelivr.net/npm/element-plus@2.3.9/dist/index.full.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/axios/1.5.0/axios.min.js"></script></head><body><div id="app"><!-- 远程搜索 --><el-form :inline="true" :model="formInline" class="demo-form-inline"><el-form-item label="任务名称：" style="margin-left:30px;"><el-select v-model="value" filterable remote clearable reserve-keyword placeholder="Please enter a keyword" :remote-method="remoteMethod" :loading="loading"><el-option v-for="item in options" :key="item.CODE" :label="item.NAME" :value="item.CODE" /></el-select></el-form-item><el-form-item><el-button type="primary" @click="onSubmit">查询</el-button></el-form-item></el-form><!-- 表格数据 --><el-table :data="tableData" stripe border style="width: 98%;" :span-method="objectSpanMethod" max-height="650"><el-table-column fixed prop="CODE" label="编码" width="60"></el-table-column><el-table-column prop="NAME" label="名称"></el-table-column><el-table-column prop="FREQUENCY" label="频次" width="80"></el-table-column><el-table-column prop="FNAME" label="执行科室" width="150"></el-table-column><el-table-column prop="FILENAME" label="文件名称"></el-table-column><el-table-column prop="STATUS" label="状态" width="80"></el-table-column><el-table-column prop="CREATEID" label="上传人" width="80"></el-table-column><el-table-column prop="CREATEDATE" label="上传时间"></el-table-column></el-table></div><script>const {createApp,reactive,ref,onMounted,onBeforeMount,onUpdated,ElMessage} = Vue;const vue3DepartFileStatis = {setup() {//定义响应数据const list = ref([]);const options = ref([]);const value = ref([]);const loading = ref(false);const tableData = ref([]); //表格响应式let formInline = reactive({keyword: ""});const isMessageShowing = ref(false);//初始化挂载onMounted(() => {list.value = states.map((item) => {return {value: item};});onSubmit(true);});//远程搜索const remoteMethod = (query) => {//if (query) {//    loading.value = true;//    setTimeout(() => {//        loading.value = false;//        options.value = list.value.filter((item) => {//            return item.value.toLowerCase().includes(query.toLowerCase())//        });//    }, 200);//} else {//    options.value = [];//}if (query) {loading.value = true;console.log(query);// 发送 Axios 请求axios.get(UJCAjaxBaseUrl + "/请求地址", {params: {TaskName: query}}).then((response) => {loading.value = false;options.value = response.data.data;console.log(response.data.data);}).catch((error) => {console.error('发生错误：', error);loading.value = false;});} else {options.value = [];}}//封装错误提示const showErrorMessage = (message = 'Oops, this is a error message.') => {if (!isMessageShowing.value) {isMessageShowing.value = true;ElementPlus.ElMessage({showClose: true,message: message,type: 'error',onClose: () => {isMessageShowing.value = false;},});}};//查询const onSubmit = (boolen) => {// 在这里获取输入的值const inputValue = value.value;if ((inputValue !== null && inputValue !== undefined && inputValue !== '') || boolen) {// console.log("Input Value:", inputValue);// axios.get(UJCAjaxBaseUrl + "/请求地址", {//     params: {//         TaskId: inputValue//     }// }).then((response) => {//     console.log("response:" + response.data.data);//     tableData.value = response.data.data;//     return true;// }).catch((error) => {//     console.error('发生错误：', error);//     return false;// });} else {showErrorMessage('请搜索并选择您要查询的细则编码或细则名称!');return false;}//模拟数据tableData.value = [{CODE: '001',NAME: 'Item A',FREQUENCY: 'Daily',FNAME: 'Department A',FILENAME: 'File A',STATUS: 'Active',CREATEID: 'User 1',CREATEDATE: '2023-09-06'}, {CODE: '002',NAME: 'Item A',FREQUENCY: 'Weekly',FNAME: 'Department B',FILENAME: 'File B',STATUS: 'Inactive',CREATEID: 'User 2',CREATEDATE: '2023-09-07'}, {CODE: '003',NAME: 'Item B',FREQUENCY: 'Monthly',FNAME: 'Department C',FILENAME: 'File C',STATUS: 'Active',CREATEID: 'User 3',CREATEDATE: '2023-09-08'}, {CODE: '004',NAME: 'Item B',FREQUENCY: 'Daily',FNAME: 'Department A',FILENAME: 'File D',STATUS: 'Inactive',CREATEID: 'User 4',CREATEDATE: '2023-09-09'}]}//模拟数据const states = [];const objectSpanMethod = ({row,column,rowIndex,columnIndex}) => {const columnsToSpan = ['CODE', 'NAME', 'FNAME', 'FREQUENCY']; // 列名数组if (columnsToSpan.includes(column.property)) {if (rowIndex === 0 || row[column.property] !== tableData.value[rowIndex - 1][column.property]) {// 如果是相同 "NAME" 的第一行，则返回正确的 rowspan 和 colspanlet rowspan = 1;for (let i = rowIndex + 1; i < tableData.value.length; i++) {if (tableData.value[i][column.property] === row[column.property]) {rowspan++;tableData.value[i]._rowspan = 0; // 隐藏后续行的 "NAME"} else {break;}}return {rowspan,colspan: 1};}return {rowspan: 0,colspan: 0}; // 隐藏相同 "NAME" 的后续行}return {rowspan: 1,colspan: 1};}return {list,options,value,loading,remoteMethod,onSubmit,tableData,formInline,objectSpanMethod}}}createApp(vue3DepartFileStatis).use(ElementPlus).mount("#app"); // 挂载应用到指定元素上</script></body></html>

效果图

在这里插入图片描述

相关文章：

Vue3+Element Plus实现el-table跨行显示（非脚手架）

Vue3Element Plus实现el-table跨行显示 app组件内容使用:span-method"objectSpanMethod"自定义方法实现跨行显示查询方法初始化挂载新建一个html即可进行测试&#xff0c;完整代码如下效果图 app组件内容 <div id"app"><!-- 远程搜索 --><e…...

编程日记 2023/9/8 14:17:33

生成订单30分钟未支付，则自动取消，该怎么实现？

今天给大家上一盘硬菜&#xff0c;并且是支付中非常重要的一个技术解决方案&#xff0c;有这块业务的同学注意自己试一把了哈&#xff01; 在开发中&#xff0c;往往会遇到一些关于延时任务的需求。例如 生成订单30分钟未支付&#xff0c;则自动取消 生成订单60秒后,给用户…...

编程日记 2023/9/8 14:16:32

WebGIS外包开发流程

WebGIS开发流程需要综合考虑前端和后端开发、地理信息数据处理、用户需求和安全性等多个方面。成功的WebGIS应用程序需要不断地进行更新和维护&#xff0c;以适应变化的需求和技术。WebGIS开发是一个复杂的过程&#xff0c;通常包括以下主要步骤。北京木奇移动技术有限公司&…...

编程日记 2023/9/8 14:15:31

pytorch学习——LSTM和GRU

参考书籍&#xff1a;https://zh-v2.d2l.ai/chapter_recurrent-modern/lstm.html 参考论文&#xff1a; https://colah.github.io/posts/2015-08-Understanding-LSTMs/ 简介&#xff1a; LSTM&#xff08;长短期记忆网络&#xff09;和GRU&#xff08;门控循环单元&#xff09;…...

编程日记 2023/9/8 14:14:30

【Python】Python 利用模块实现单例模式

Python 利用模块实现单例模式 在GOF的23种设计模式中&#xff0c;单例是最常使用的模式&#xff0c;通过单例模式可以保证系统中 一个类只有一个实例而且该实例易于被外界访问&#xff0c;从而方便对实例个数的控制并节约系统资 源。每当大家想要实现一个名为XxxMangcr的类时&…...

编程日记 2023/9/8 14:13:29

雅思写作 三小时浓缩学习顾家北 笔记总结（四）

目录 The company should provide maternity leave and other assistance to female employees with children. Community redevelopment provides opportunities for offenders to acquire vocational skills. The law should classify drunk driving as a criminal offens…...

编程日记 2023/9/8 14:12:27

深入学习与探索：高级数据结构与复杂算法

文章目录 学习高级数据结构B树&#xff1a;数据库引擎的骨干线段树&#xff1a;高效的区间查询Trie树&#xff1a;高效的字符串检索 探索复杂算法领域图算法&#xff1a;解决复杂网络问题字符串匹配算法&#xff1a;处理文本搜索近似算法&#xff1a;在NP难题上取得近似解 结论…...

编程日记 2023/9/8 14:11:26

CV：计算机视觉CV运用领域

计算机视觉是一项涉及大量算法和技术的跨学科领域&#xff0c;已经在众多领域得到广泛的应用。以下是计算机视觉的一些主要应用领域&#xff1a; 图像处理和图像分析&#xff1a;计算机视觉技术可以用于图像处理和图像分析&#xff0c;识别和检测特定的图像特征&#xff0c;例如…...

编程日记 2023/9/8 14:10:24

开源机密计算平台：蓬莱-OpenHarmony

演讲嘉宾 | 杜 东 回顾整理 | 廖 涛 排版校对 | 李萍萍 嘉宾简介 杜东&#xff0c;上海交通大学助理研究员。中国计算机学会CCF会员&#xff0c;ACM会员。研究兴趣为操作系统与体系结构、服务器无感知&#xff08;Serverless&#xff09;计算、系统安全。在包括ASPLOS、ISC…...

编程日记 2023/9/8 14:09:22

大一大二一心学算法的利弊

学习算法是现代计算机科学和软件工程领域中的重要组成部分。它们是解决复杂问题、优化资源利用以及提高效率的关键。学习算法的过程可以帮助培养系统性思维、分析问题能力和创造性解决方案的能力。然而&#xff0c;学习算法也有一些利弊&#xff0c;我们将在下文中详细探讨。 …...

编程日记 2023/9/8 14:08:21

c#using关键字的作用

https://blog.csdn.net/Mona_Zhao/article/details/91363446 using关键字的三种作用&#xff1a; 1. 引用命名空间&#xff1b; 2. 为命名空间或者类型创建别名&#xff1b; 3. 使用using语句。 &#xff08;1&#xff09;引用命名空间 类似于c和c的#include<>, pyt…...

编程日记 2023/9/8 14:07:20

只依赖OPENCV的工作服安全帽检测YOLOV8S

工地安全帽工作服检测Y8S&#xff0c;采用YOLOV8S训练模型&#xff0c;然后使用OPENCV的DNN调用&#xff0c;彻底拜托PYTORCH依赖&#xff0c;可以在C,PYTHON,ANDROID上跑。附件是C生成的效果测试&#xff08;只需解压将图片或者视频放入VIDEOS文件夹&#xff0c;文件夹没图片或…...

编程日记 2023/9/8 14:06:19

MFC|选择获取文件路径

参考&#xff1a;mfc按钮选择文件或者文件夹&#xff08;https://blog.csdn.net/qq_39433050/article/details/130261518&#xff09; 点击按钮槽函数&#xff0c;选择文件 void CMFCStartGrabDlg::OnBnClickedSelectfile() {// TODO: Add your control notification handler…...

编程日记 2023/9/8 14:05:18

实时操作系统Freertos开坑学习笔记：(七）：队列

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言一、队列是什么&#xff1f;而在freertos中&#xff0c;队列是什么呢&#xff1f;①如果要进行中断、任务的交流&#xff0c;那我用全局变量行吗&#xff1f;②…...

编程日记 2023/9/8 14:04:17

专业游戏翻译公司怎么选择比较合适

近年来&#xff0c;游戏行业持续繁荣&#xff0c;市场需求也在不断扩大&#xff0c;其中游戏翻译的需求越来越旺盛。无论是引进游戏还是让游戏走向国际市场&#xff0c;都需要专业的翻译公司来帮忙。那么&#xff0c;怎么选择合适的游戏翻译公司呢&#xff1f;让我们一起来看看…...

编程日记 2023/9/8 14:03:14

阿里云Maven和Gradle仓库最新配置

文章目录 一、简介二、仓库地址三、如何配置1、Maven配置2、Gradle配置 一、简介 阿里云云效 Maven 是什么&#xff1f;    阿里云Maven中央仓库为 阿里云云效 提供的公共代理仓库&#xff0c;帮助研发人员提高研发生产效率&#xff0c;使用阿里云Maven中央仓库作为下载源&am…...

编程日记 2023/9/8 14:02:13

尚硅谷大数据项目《在线教育之离线数仓》笔记007

视频地址&#xff1a;尚硅谷大数据项目《在线教育之离线数仓》_哔哩哔哩_bilibili 目录 第12章 报表数据导出 P112 01、创建数据表 02、修改datax的jar包 03、ads_traffic_stats_by_source.json文件 P113 P114 P115 P116 P117 P118 P119 P120 P121 P122【122_在…...

编程日记 2023/9/8 14:01:10

python考研志愿填报模拟系统vue

本系统提供给管理员对学生、院校、研究生信息、专业信息、学院信息等诸多功能进行管理。本系统对于学生输入的任何信息都进行了一定的验证&#xff0c;为管理员操作提高了效率&#xff0c;也使其数据安全性得到了保障。本考研志愿填报模拟系统以Django作为框架&#xff0c;B/S模…...

编程日记 2023/9/8 14:00:09

【LeetCode-面试经典150题-day20】

目录 70.爬楼梯 198.打家劫舍 139.单词拆分 322.零钱兑换 300.最长递增子序列 70.爬楼梯 题意&#xff1a; 假设你正在爬楼梯。需要 n 阶你才能到达楼顶。 每次你可以爬 1 或 2 个台阶。你有多少种不同的方法可以爬到楼顶呢&#xff1f; 提示&#xff1a; 1 < n < …...

编程日记 2023/9/8 13:59:08

回归与聚类算法系列②：线性回归

目录 1、定义与公式 2、应用场景 3、特征与目标的关系分析 线性回归的损失函数 为什么需要损失函数 损失函数 ⭐如何减少损失 4、优化算法 正规方程 梯度下降 优化动态图 偏导 正规方程和梯度下降比较 5、优化方法GD、SGD、SAG 6、⭐线性回归API 7、实例&#…...

编程日记 2023/9/8 13:58:06

AQS深度探索：以ReentrantLock看Java并发编程的高效实现

在技术领域&#xff0c;我们常常被那些闪耀的、可见的成果所吸引。今天&#xff0c;这个焦点无疑是大语言模型技术。它们的流畅对话、惊人的创造力&#xff0c;让我们得以一窥未来的轮廓。然而&#xff0c;作为在企业一线构建、部署和维护复杂系统的实践者&#xff0c;我们深知…...

编程新知 2026/4/1 9:27:58

解决tiktoken离线使用难题：手动下载cl100k_base.tiktoken并配置本地缓存的保姆级教程

突破网络限制&#xff1a;tiktoken离线部署全流程实战指南 在自然语言处理领域&#xff0c;token切分是模型处理文本的第一步关键操作。对于依赖GPT系列模型的开发者而言&#xff0c;tiktoken作为OpenAI官方推出的高效tokenizer&#xff0c;其重要性不言而喻。然而&#xff0c;…...

编程新知 2026/4/1 9:19:42

intv_ai_mk11保姆级教学：输入‘你好’→追问第2点→指定表格输出，完整交互链路演示

intv_ai_mk11保姆级教学&#xff1a;输入你好→追问第2点→指定表格输出&#xff0c;完整交互链路演示 1. 快速了解intv_ai_mk11 intv_ai_mk11是一款基于Llama架构的AI对话助手&#xff0c;拥有7B参数规模&#xff0c;运行在GPU服务器上。它能帮助你完成各种任务&#xff0c;…...

编程新知 2026/4/1 8:55:12

ms-swift多模态训练：图文视频语音混合训练，速度提升100%+

ms-swift多模态训练&#xff1a;图文视频语音混合训练&#xff0c;速度提升100% 1. 多模态训练的新选择 在AI模型开发领域&#xff0c;多模态训练一直是个技术难题。传统方法需要分别处理文本、图像、视频和语音数据&#xff0c;然后手动对齐不同模态的特征表示&#xff0c;整…...

编程新知 2026/4/1 7:49:37

March7thAssistant：崩坏：星穹铁道企业级自动化解决方案

March7thAssistant&#xff1a;崩坏&#xff1a;星穹铁道企业级自动化解决方案 【免费下载链接】March7thAssistant 崩坏&#xff1a;星穹铁道全自动 三月七小助手 项目地址: https://gitcode.com/gh_mirrors/ma/March7thAssistant 【核心价值定位】游戏工作室效率倍增引…...

编程新知 2026/4/1 7:29:14

PyTorch 2.8镜像法律科技：庭审音视频→AI摘要+关键帧提取+证据链可视化

PyTorch 2.8镜像法律科技&#xff1a;庭审音视频→AI摘要关键帧提取证据链可视化 1. 镜像概述与法律科技应用场景 在司法数字化进程中&#xff0c;庭审音视频处理正面临三大挑战&#xff1a;海量数据难以快速消化、关键信息提取效率低下、证据呈现方式单一。PyTorch 2.8深度学…...

编程新知 2026/4/1 6:15:26

开源可部署！PyTorch 2.8 RTX 4090D镜像在企业AIGC生产环境落地实践

开源可部署&#xff01;PyTorch 2.8 RTX 4090D镜像在企业AIGC生产环境落地实践 1. 为什么选择这个深度学习镜像 在当今AI技术快速发展的背景下&#xff0c;企业面临的最大挑战之一是如何快速搭建稳定高效的AI开发环境。传统方式需要手动配置CUDA、PyTorch和各种依赖库&#x…...

编程新知 2026/4/1 5:26:59

Phi-4-mini-reasoning效果展示：同参数量级中推理准确率超Llama3-8B实测对比

Phi-4-mini-reasoning效果展示&#xff1a;同参数量级中推理准确率超Llama3-8B实测对比 1. 开篇亮点&#xff1a;小模型的大智慧 Phi-4-mini-reasoning这款仅有3.8B参数的轻量级开源模型&#xff0c;正在重新定义我们对小模型能力的认知。作为专为数学推理、逻辑推导和多步解…...

编程新知 2026/4/1 5:12:54

AutoGen Studio效果展示：看Qwen3-4B如何协作完成网页设计

AutoGen Studio效果展示&#xff1a;看Qwen3-4B如何协作完成网页设计 1. AutoGen Studio简介 AutoGen Studio是一个基于微软AutoGen框架开发的低代码界面工具&#xff0c;它让构建和组合AI代理变得简单直观。通过这个平台&#xff0c;你可以快速创建多个AI代理&#xff0c;为…...

编程新知 2026/4/1 4:23:54

超级障碍马术联赛(PJL)正式启动，设立创纪录的3亿美元保底奖金池，开启障碍马术运动新纪元

• PJL助力骑手以全职职业运动员身份参赛&#xff0c;同时为这项运动构建可持续的经济模式。 • PJL由McCourt Global支持&#xff0c;核心管理团队拥有数十年马术赛事、体育和娱乐行业经验&#xff0c;为顶级障碍马术赛事树立全新、可持续且具备全球影响力的标准。 • 2027年3…...

编程新知 2026/4/1 4:01:41