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.rhkb.cn/news/123522.html

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

相关文章

stable diffusion实践操作-复制-清空-保存提示词

stable diffusion实践操作-复制-清空-保存提示词

系列文章目录 stable diffusion实践操作 stable diffusion实践操作-webUI教程 提示&#xff1a;写完文章后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 系列文章目录前言一、右上生成图标附近按钮介绍1. 箭头介绍&#xff08;复现别人的…
阅读更多...
这可能是最全面的Python入门手册了！

这可能是最全面的Python入门手册了！

无论是学习任何一门语言&#xff0c;基础知识一定要扎实&#xff0c;基础功非常的重要&#xff0c;找到一个合适的学习方法和资料会让你少走很多弯路&#xff0c; 你的进步速度也会快很多&#xff0c;无论我们学习的目的是什么&#xff0c;不得不说Python真的是一门值得付出时间…
阅读更多...
vue使用百度地图实现地点查询

vue使用百度地图实现地点查询

效果 代码 首先在index.html中引入script&#xff1a; <head><meta charset"utf-8"><meta http-equiv"X-UA-Compatible" content"IEedge"><meta name"viewport" content"widthdevice-width,initial-scal…
阅读更多...
java八股文面试[数据库]——主键的类型自增还是UUID

java八股文面试[数据库]——主键的类型自增还是UUID

auto_increment的优点&#xff1a; 字段长度较uuid小很多&#xff0c;可以是bigint甚至是int类型&#xff0c;这对检索的性能会有所影响。 在写的方面&#xff0c;因为是自增的&#xff0c;所以主键是趋势自增的&#xff0c;也就是说新增的数据永远在后面&#xff0c;这点对于…
阅读更多...
vue3组件通信学习笔记

vue3组件通信学习笔记

1、Prop 父组件 <template><div class"parent"><h1>我是父元素</h1><Child :msg"msg"></Child></div> </template><script setup> import Child from ./Child.vue let msg ref(我是父组件的数据…
阅读更多...
探讨前后端分离开发的优势、实践以及如何实现更好的用户体验？

探讨前后端分离开发的优势、实践以及如何实现更好的用户体验？

随着互联网技术的迅猛发展&#xff0c;前后端分离开发已经成为现代软件开发的一种重要趋势。这种开发模式将前端和后端的开发工作分开&#xff0c;通过清晰的接口协议进行通信&#xff0c;旨在优化开发流程、提升团队协作效率&#xff0c;并最终改善用户体验。本文将深入探讨前…
阅读更多...
申威芯片UOS中opencv DNN推理

申威芯片UOS中opencv DNN推理

Cmake&#xff0c;opencv&#xff0c;opencv-contribute安装 #apt可能需要更新apt update apt install -y wget unzip apt-get install build-essential libgtk2.0-dev libgtk-3-dev libavcodec-dev libavformat-dev libjpeg-dev libswscale-dev libtiff5-dev#安装cmake apt i…
阅读更多...
ES6的面向对象编程以及ES6中的类和对象

ES6的面向对象编程以及ES6中的类和对象

一、面向对象 1、面向对象 &#xff08;1&#xff09;是一种开发思想&#xff0c;并不是具体的一种技术 &#xff08;2&#xff09;一切事物均为对象&#xff0c;在项目中主要是对象的分工协作 2、对象的特征 &#xff08;1&#xff09;对象是属性和行为的结合体 &#x…
阅读更多...
设计模式行为型-模板模式

设计模式行为型-模板模式

文章目录 一&#xff1a;模板方法设计模式概述1.1 简介1.2 定义和目的1.3 关键特点1.4 适用场景 二&#xff1a;模板方法设计模式基本原理2.1 抽象类2.1.1 定义和作用2.1.2 模板方法2.1.3 具体方法 2.2 具体类2.2.1 定义和作用2.2.2 实现抽象类中的抽象方法2.2.3 覆盖钩子方法 …
阅读更多...
27.CSS粒子特效

27.CSS粒子特效

效果 源码 <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Vanilla JS Particles</title><link rel="stylesheet" href="style.css"> </head> <body>…
阅读更多...
使用半导体材料制作霍尔元件的优点

使用半导体材料制作霍尔元件的优点

霍尔元件是一种基于霍尔效应的传感器&#xff0c;可以测量磁场强度和电流等物理量。霍尔效应是指&#xff0c;当电流通过一块导体时&#xff0c;如果该导体置于垂直于电流方向的磁场中&#xff0c;就会在导体两侧出现一定的电势差&#xff0c;这就是霍尔效应。霍尔元件可以利用…
阅读更多...
分享一下怎么做微信营销活动

分享一下怎么做微信营销活动

微信营销活动是商家利用微信平台进行宣传和推广的一种重要方式。通过精心策划的微信营销活动&#xff0c;商家可以吸引更多的潜在客户&#xff0c;提高品牌知名度和销售额。本文将介绍如何策划和实施一次成功的微信营销活动。 一、明确目标 在策划微信营销活动之前&#xff0c…
阅读更多...
@PostConstruct使用

@PostConstruct使用

PostConstruct是Java自带的注解&#xff0c;在方法上加该注解会在项目启动的时候执行该方法&#xff0c;也可以理解为在spring容器初始化的时候执行该方法。 从Java EE5规范开始&#xff0c;Servlet中增加了两个影响Servlet生命周期的注解&#xff0c;PostConstruc
阅读更多...
Linux的LVM磁盘扩容

Linux的LVM磁盘扩容

目录 引子环境扩容步骤结束 引子 最近因为有个服务器的磁盘和内容太小了&#xff0c;连按tab都要提示No space left on device了&#xff0c;实在受不了了&#xff0c;更何况服务器的项目也因为没有空间直接崩了&#xff0c;在领导申请到了内存和磁盘后立马着手去扩硬盘&#…
阅读更多...
Redis-Cluster集群的部署（详细步骤）

Redis-Cluster集群的部署（详细步骤）

一、环境准备 本次实操为三台机器&#xff0c;关闭防火墙和selinux 注:规划架构两种方案&#xff0c;一种是单机多实例&#xff0c;这里我们采用多机器部署 三台机器&#xff0c;每台机器上面两个redis实例&#xff0c;一个master一个slave&#xff0c;第一列做主库&#xff…
阅读更多...
Tomcat详解 一：tomcat的部署

Tomcat详解 一：tomcat的部署

文章目录 1. Tomcat的基本介绍1.1 Tomcat是什么1.2 Tomcat的构成组件1.2.1 Web容器1.2.2 Servlet容器1.2.3 JSP容器&#xff08;JAVA Scripts page&#xff09; 1.3 核心功能1.3.1 Container 结构分析 1.4 配置文件1.5 Tomcat常用端口号1.6 启动和关闭Tomcat 2. 部署Tomcat服务…
阅读更多...
OLED透明屏模块：引领未来显示技术的突破

OLED透明屏模块：引领未来显示技术的突破

OLED透明屏模块作为一项引领未来显示技术的突破&#xff0c;以其独特的特点和卓越的画质在市场上引起了广泛关注。 根据行业报告&#xff0c;预计到2025年&#xff0c;OLED透明屏模块将占据智能手机市场的20%份额&#xff0c;并在汽车导航系统市场中占据30%以上份额。 那么&am…
阅读更多...
从一到无穷大 #13 How does Lindorm TSDB solve the high cardinality problem?

从一到无穷大 #13 How does Lindorm TSDB solve the high cardinality problem?

本作品采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可。 本作品 (李兆龙 博文, 由 李兆龙 创作)&#xff0c;由 李兆龙 确认&#xff0c;转载请注明版权。 文章目录 引言优势挑战系统架构细节/优化存储引擎索引写入查询 经验Ablation Study总结 引言 …
阅读更多...
springboot + activiti实现activiti微服务化

springboot + activiti实现activiti微服务化

概述 本文介绍如何将springbootactiviti进行整合,并配合eureka,zuul和feign实现activiti的微服务化,将流程控制和业务逻辑分离. 并实现了几个比较特殊的功能,比如时间段委托(某人请假或出差,出差时间内,所有待办交给被委托人处理),比如节点的无限级加签功能(流程本身有不确定性…
阅读更多...
java八股文面试[数据库]——explain

java八股文面试[数据库]——explain

使用 EXPLAIN 关键字可以模拟优化器来执行SQL查询语句&#xff0c;从而知道MySQL是如何处理我们的SQL语句的。分析出查询语句或是表结构的性能瓶颈。 MySQL查询过程 通过explain我们可以获得以下信息&#xff1a; 表的读取顺序 数据读取操作的操作类型 哪些索引可以被使用 …
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023