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

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>

效果图

在这里插入图片描述

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

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

相关文章

算法训练day43|动态规划 part05：0-1背包 (LeetCode 1049. 最后一块石头的重量 II、494. 目标和、474.一和零)

算法训练day43|动态规划 part05：0-1背包 (LeetCode 1049. 最后一块石头的重量 II、494. 目标和、474.一和零)

文章目录 1049. 最后一块石头的重量 II思路分析代码实现 494. 目标和思路分析动规方法代码实现总结思考 474.一和零思路分析代码实现思考总结 var code "57a5e730-4e5e-43ad-b567-720d69f0371a"1049. 最后一块石头的重量 II 题目链接&#x1f525;&#x1f525; 有…
阅读更多...
揭秘拼多多API接口：让商家和用户实现高效连接与便捷操作

揭秘拼多多API接口：让商家和用户实现高效连接与便捷操作

随着电商行业的飞速发展&#xff0c;拼多多作为一家新兴电商平台&#xff0c;近年来已逐渐成为市场的焦点。为了满足商家和用户的需求&#xff0c;拼多多不断创新&#xff0c;推出了智能化的API接口&#xff0c;以实现更加高效、便捷的操作和管理。本文将深入探讨拼多多API接口…
阅读更多...
提高使用VS Code工作效率的技巧

提高使用VS Code工作效率的技巧

提高使用VS Code工作效率的技巧 时间轴视图&#xff1a;本地源代码控制 时间轴视图为我们提供了内置的源代码控制。 我们中的许多人都知道 Git 和其他源代码控制工具有多么有用&#xff0c;它们可以帮助我们轻松跟踪文件更改并在需要时恢复到之前的状态。 因此&#xff0c;…
阅读更多...
MySQL数据库——基础篇总结（概述、SQL、函数、约束、多表查询、事务）

MySQL数据库——基础篇总结（概述、SQL、函数、约束、多表查询、事务）

目录 概述 概念 MySQL启动与停止 客户端连接 关系型数据库&#xff08;RDBMS&#xff09; SQL 数据类型 DDL DML DQL DCL 函数 字符串函数 数值函数 日期函数 流程函数 约束 多表查询 多表关系 笛卡尔积 内连接 外连接 自连接 联合查询 子查询 事…
阅读更多...
LeetCode 面试题 03.05. 栈排序

LeetCode 面试题 03.05. 栈排序

文章目录 一、题目二、C# 题解 一、题目 栈排序。 编写程序&#xff0c;对栈进行排序使最小元素位于栈顶。最多只能使用一个其他的临时栈存放数据&#xff0c;但不得将元素复制到别的数据结构&#xff08;如数组&#xff09;中。该栈支持如下操作&#xff1a;push、pop、peek 和…
阅读更多...
go基础08-map的内部实现

go基础08-map的内部实现

和切片相比&#xff0c;map类型的内部实现要复杂得多。Go运行时使用一张哈希表来实现抽象的map类型。运行时实现了map操作的所有功能&#xff0c;包括查找、插入、删除、遍历等。在编译阶段&#xff0c;Go编译器会将语法层面的map操作重写成运行时对应的函数调用。 下面是大致的…
阅读更多...
YOLOV7改进-添加Deformable Conv V2

YOLOV7改进-添加Deformable Conv V2

可变形卷积link class DCNv2(nn.Module):def __init__(self, in_channels, out_channels, kernel_size, stride1,padding1, groups1, actTrue, dilation1, deformable_groups1):super(DCNv2, self).__init__()self.in_channels in_channelsself.out_channels out_channelsse…
阅读更多...
QT for andriod

QT for andriod

QT for andriod 开发 apk软件&#xff0c;因为一些特殊的原因&#xff0c;在这里简单的记录一哈自己开发apk的流程和心得。 首先说明我采用的环境有哪些&#xff1f; 1、QT的版本&#xff0c;个人建议5.15.2的版本及以上&#xff0c;我是用的5.15.2。 2、andriod studio 可以…
阅读更多...
3D数据导出工具HOOPS Publish：3D数据查看、生成标准PDF或HTML文档！

3D数据导出工具HOOPS Publish：3D数据查看、生成标准PDF或HTML文档！

HOOPS中文网http://techsoft3d.evget.com/ 一、3D导出SDK HOOPS Publish是一款功能强大的SDK&#xff0c;可以创作丰富的工程数据并将模型文件导出为各种行业标准格式&#xff0c;包括PDF、STEP、JT和3MF。HOOPS Publish核心的3D数据模型是经过ISO认证的PRC格式(ISO 14739-1:…
阅读更多...
STM32移植FAT文件系统

STM32移植FAT文件系统

所谓“移植”&#xff0c;就是打通FAT源码和物理设备之间的软件接口。 FAT源码早就被公益组织给写好了&#xff0c;直接下载源码。但是FAT作为顶层应用程序&#xff0c;它需要面对的底层物理设备是不确定的&#xff0c;那么底层的物理设备驱动程序就需要程序员来自己写。物理设…
阅读更多...
Docker的初级使用

Docker的初级使用

Docker的初级使用 Docker的安装1.1 如果之前安装过旧版本的Docker，可以使用下面命令卸载：1.2.安装docker1.3.启动docker1.4.配置镜像加速2.CentOS7安装DockerCompose2.1.下载2.2.修改文件权限2.3.Base自动补全命令：3.Docker镜像仓库3.1.简化版镜像仓库3.2.带有图形化界面版本…
阅读更多...
Java中的值传递与引用传递 含面试题

Java中的值传递与引用传递 含面试题

面试题分享 点我直达 2023最新面试合集链接 2023大厂面试题PDF 面试题PDF版本 java、python面试题 项目实战:AI文本 OCR识别最佳实践 AI Gamma一键生成PPT工具直达链接 玩转cloud Studio 在线编码神器 玩转 GPU AI绘画、AI讲话、翻译,GPU点亮AI想象空间 史上最全文档…
阅读更多...
Android：基于mvvm框架使用viewPage

Android：基于mvvm框架使用viewPage

一、前言&#xff1a; 最近在学习viewpage的使用&#xff0c;加上一直以来用mvvm框架。就想着记录一下。 二、代码展示&#xff1a; 1.引入依赖 //viewPage2引用(微信左右滑动页面)implementation androidx.viewpager2:viewpager2:1.0.0 2.在xml中的使用 3.在代码中找到vie…
阅读更多...
脚本：python实现樱花树

脚本：python实现樱花树

文章目录 代码效果 代码 from turtle import * from random import * from math import * def tree(n, l):pd () # 下笔# 阴影效果t cos ( radians ( heading () 45 ) ) / 8 0.25pencolor ( t, t, t )pensize ( n / 3 )forward ( l ) # 画树枝if n > 0:b random () *…
阅读更多...
【前沿】数据目录是什么？您为何需要它？

【前沿】数据目录是什么？您为何需要它？

简而言之&#xff0c;数据目录就是关于企业数据资产的一个有序清单。它可以使用元数据来帮助企业管理数据&#xff0c;帮助数据专业人员收集、组织、访问和充实元数据&#xff0c;从而为数据发现和治理提供支持。 01 数据目录的定义和类比 在上文我们简单介绍数据目录的定义&a…
阅读更多...
算法通关村第12关【黄金】| 字符串冲刺题

算法通关村第12关【黄金】| 字符串冲刺题

1.最长公共前缀 思路&#xff1a;纵向比较&#xff0c;每个字符串从头挨个比较 class Solution {public String longestCommonPrefix(String[] strs) {StringBuilder sb new StringBuilder();for(int i 0;i<strs[0].length();i){char c strs[0].charAt(i);for(int j 1;j…
阅读更多...
Qt实现图书管理系统(C++)

Qt实现图书管理系统(C++)

文章目录 数据库表的实现创建表将powerDesigner里面的表导出成xxx.sql脚本将SQL文件导入数据库创建表 图书管理系统思维导图创建工程开发阶段创建Dlg_login登录页面login页面样式主页页面布局主函数测试login设置logo打包程序子页面的样子将子页面放到StackedWidget里面按钮直接…
阅读更多...
Linux 查看属于某个组（例如docker组）的所有用户

Linux 查看属于某个组（例如docker组）的所有用户

要查看属于某个组&#xff08;例如docker组&#xff09;的所有用户&#xff0c;可以使用getent命令。getent命令用于从Name Service Switch库中获取条目。 要列出docker组下的所有用户&#xff0c;可以执行&#xff1a; getent group docker这会返回类似下面的输出&#xff1…
阅读更多...
Python学习 -- logging模块

Python学习 -- logging模块

logging 模块是 Python 中用于记录日志的标准库&#xff0c;它提供了丰富的功能&#xff0c;可以帮助开发者进行日志记录和管理。以下是关于logging模块的详细使用方式&#xff0c;包括日志级别、处理流程、Logger 类、Handler 类、Filter 类、Formatter 类以及模块中常用函数等…
阅读更多...
zookeeper搭建分布式集群启动失败(Error contacting service. It is probably not running.)

zookeeper搭建分布式集群启动失败(Error contacting service. It is probably not running.)

文章目录 1.排查2.解决 1.排查 1.启动zookeeper后查看状态/bin/zkServer.sh status发现报错Error contacting service. It is probably not running. [rootzookeeper01 apache-zookeeper-3.8.2-bin]# ./bin/zkServer.sh status /usr/bin/java ZooKeeper JMX enabled by defau…
阅读更多...
最新文章

Copyright @ 2022~2023