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;…
阅读更多...
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;那么底层的物理设备驱动程序就需要程序员来自己写。物理设…
阅读更多...
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 () *…
阅读更多...
算法通关村第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里面按钮直接…
阅读更多...
Python学习 -- logging模块

Python学习 -- logging模块

logging 模块是 Python 中用于记录日志的标准库&#xff0c;它提供了丰富的功能&#xff0c;可以帮助开发者进行日志记录和管理。以下是关于logging模块的详细使用方式&#xff0c;包括日志级别、处理流程、Logger 类、Handler 类、Filter 类、Formatter 类以及模块中常用函数等…
阅读更多...
shell入门运算符操作、条件判断

shell入门运算符操作、条件判断

♥️作者&#xff1a;小刘在C站 ♥️个人主页&#xff1a; 小刘主页 ♥️努力不一定有回报&#xff0c;但一定会有收获加油&#xff01;一起努力&#xff0c;共赴美好人生&#xff01; ♥️学习两年总结出的运维经验&#xff0c;以及思科模拟器全套网络实验教程。专栏&#xf…
阅读更多...
PCIe 5.0验证实战，经常遇到的那些问题？

PCIe 5.0验证实战，经常遇到的那些问题？

PCIe 5.0是当前最新的PCI Express规范&#xff0c;提供了更高的数据传输速率和更大的带宽。 PCIe是连接两个芯片的接口&#xff0c;负责两个芯片通信, 连接芯片的通路为高速SerDes, 称之为链路。PCIe确保通路正常-链路训练状态机。PCIe在芯片内部是非常重要的一个大的模块&…
阅读更多...
YOLOv5改进算法之添加CA注意力机制模块

YOLOv5改进算法之添加CA注意力机制模块

目录 1.CA注意力机制 2.YOLOv5添加注意力机制 送书活动 1.CA注意力机制 CA&#xff08;Coordinate Attention&#xff09;注意力机制是一种用于加强深度学习模型对输入数据的空间结构理解的注意力机制。CA 注意力机制的核心思想是引入坐标信息&#xff0c;以便模型可以更好地…
阅读更多...
大数据课程K20——Spark的SparkSQL概述

大数据课程K20——Spark的SparkSQL概述

文章作者邮箱：yugongshiye@sina.cn 地址：广东惠州 ▲ 本章节目的 ⚪ 了解Spark的SparkSQL由来； ⚪ 了解Spark的SparkSQL特点； ⚪ 了解Spark的SparkSQL优势； ⚪ 掌握Spark的SparkSQL入门； 一、SparkSQL概述 1. 概述 Spark为结构化数据处理引入了一个称…
阅读更多...
STM32单片机OLED贪吃蛇游戏记分计时

STM32单片机OLED贪吃蛇游戏记分计时

实践制作DIY- GC00165---OLED贪吃蛇游戏 一、功能说明&#xff1a; 基于STM32单片机设计---OLED贪吃蛇游戏 二、功能说明&#xff1a; STM32F103C系列最小系统板0.96寸OLED显示器上、下、左、右4个按键 1.通过OLED配合按键实现贪吃蛇游戏 2.可以上下左右移动。 3.可以统计显…
阅读更多...
golang-bufio 缓冲写

golang-bufio 缓冲写

1. 缓冲写 在阅读这篇博客之前&#xff0c;请先阅读上一篇&#xff1a;golang-bufio 缓冲读 // buffered output// Writer implements buffering for an io.Writer object. // If an error occurs writing to a Writer, no more data will be // accepted and all subsequent…
阅读更多...
搭建vue3项目并git管理

搭建vue3项目并git管理

搭建vue3项目 采用vue3的create-vue脚手架搭建项目&#xff0c;底层是vite&#xff0c;要求环境 node 16.0及以上&#xff08;node -v检查node版本&#xff09; 在文件夹右键->终端-> npm init vuelatest&#xff0c;输入项目名称&#xff0c;根据需要选择是否装包 src…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023