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

news2024/10/2 10:43:29

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 和 colspan
                            let 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 和 colspan
                            let 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.coloradmin.cn/o/983323.html

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

相关文章

Consul学习笔记之-初识Consul

Consul学习笔记之-初识Consul

文章目录 1. What is consul?2. Consul能干什么3. Consul的架构3.1 概念 4. Consul VS Eureka4.1 CAP4.2 对比 1. What is consul? 根据官方文档的定义&#xff1a; HashiCorp Consul is a service networking solution that enables teams to manage secure network connec…
阅读更多...
无涯教程-JavaScript - CONVERT函数

无涯教程-JavaScript - CONVERT函数

描述 CONVERT功能将数字从一种测量系统转换为另一种。 如,CONVERT可以将以英里为单位的距离表转换为以公里为单位的距离表。 语法 CONVERT (number,from_unit,to_unit)争论 Argument描述Required/OptionalNumberThe value in from_units to convert.RequiredFrom_unitThe …
阅读更多...
无涯教程-JavaScript - WEEKNUM函数

无涯教程-JavaScript - WEEKNUM函数

描述 WEEKNUM函数返回特定日期的星期数。数字代表一年中数字所在的星期。 有两个系统用于此功能- 系统1 -包含1月1日的一周是一年的第一周,并编号为第1周。 系统2 -包含一年中第一个星期四的那一周是一年中的第一周,并编号为第1周。此系统是ISO 8601中指定的方法,这就是欧洲…
阅读更多...
云原生Kubernetes：Yaml文件编写

云原生Kubernetes：Yaml文件编写

目录 一、理论 1.Kubernetes与yaml文件 二、实验 1.Kubernetes与yaml文件 三、问题 1.kubectl create 和 kubectl apply区别 四、总结 一、理论 1.​​​​​​​Kubernetes与yaml文件 &#xff08;1&#xff09;Kubernetes支持管理资源对象的文件格式 Kubernetes支持…
阅读更多...
RabbitMQ：work结构

RabbitMQ：work结构

> 只需要在消费者端&#xff0c;添加Qos能力以及更改为手动ack即可让消费者&#xff0c;根据自己的能力去消费指定的消息&#xff0c;而不是默认情况下由RabbitMQ平均分配了&#xff0c;生产者不变&#xff0c;正常发布消息到默认的exchange > 消费者指定Qoa和手动ack …
阅读更多...
图床项目详解

图床项目详解

文章目录 一、图床项目介绍二、图床项目架构三、图床功能实现3.1 注册功能3.2 登录功能3.3 用户文件列表3.4 上传文件3.5 上传文件之秒传3.6 获取共享文件列表或下载榜3.7 分享/ 删除文件/ 更新下载数3.8 取消分享/ 转存/ 更新下载计数3.9 图床分享图片 一、图床项目介绍 实现…
阅读更多...
感应型静电消除器的组成和工作原理

感应型静电消除器的组成和工作原理

感应型静电消除器是一种常用于消除物体表面静电的设备。它通过感测周围环境的静电电荷变化&#xff0c;并采取相应的措施来中和或消除这些电荷&#xff0c;以防止静电造成的问题。 感测型静电消除器通常由以下几个关键组件组成&#xff1a; 1. 静电感测器&#xff1a;用于检测…
阅读更多...
CUDA相关知识科普

CUDA相关知识科普

显卡 显卡&#xff08;Video card&#xff0c;Graphics card&#xff09;全称显示接口卡&#xff0c;又称显示适配器&#xff0c;是计算机最基本配置、最重要的配件之一。就像电脑联网需要网卡&#xff0c;主机里的数据要显示在屏幕上就需要显卡。因此&#xff0c;显卡是电脑进…
阅读更多...
ChatGPT是如何辅助高效撰写论文及使用ChatGPT注意事项

ChatGPT是如何辅助高效撰写论文及使用ChatGPT注意事项

ChatGPT发布近1年&#xff0c;各大高校对它的态度也发生了极大转变&#xff0c;今年3月发布ChatGPT禁令的牛剑等世界顶级名校也在近期解除了ChatGPT禁令&#xff0c;发布了生成式人工智能使用指南。 ChatGPT一定程度上可以解放科研人员的劳动力&#xff0c;与其直接禁止不如教…
阅读更多...
【深入理解Linux内核锁】六、信号量

【深入理解Linux内核锁】六、信号量

我的圈子： 高级工程师聚集地 我是董哥，高级嵌入式软件开发工程师，从事嵌入式Linux驱动开发和系统开发，曾就职于世界500强企业！ 创作理念：专注分享高质量嵌入式文章，让大家读有所得！ 文章目录 1、信号量介绍2、信号量的API3、API实现3.1 semaphore3.2 sema_init3.3 down…
阅读更多...
口袋参谋：高流量权重标题，都是利用了这套工具玩法！

口袋参谋：高流量权重标题，都是利用了这套工具玩法！

​近来无事&#xff0c;与几位电商大佬们一起喝茶聊天。在谈到提升宝贝流量最直接的方式&#xff0c;大家异口同声的说到&#xff1a;“搜索流量&#xff01;” 根据我近十年的电商经验&#xff0c;一个好的标题&#xff0c;不仅要契合宝贝核心关键词&#xff0c;同时也要契合…
阅读更多...
网络技术十：交换机端口安全技术

网络技术十：交换机端口安全技术

交换机端口安全技术 802.1X 定义 起源于WLAN协议802.11&#xff0c;解决局域网终端的接入认证问题 认证方式 本地认证&#xff1a;由设备端内置本地服务器对客户端进行认证 远程集中认证&#xff1a;由远程的认证服务器对客户端进行认证 端口接入控制方式 基于端口认证…
阅读更多...
配电房智能化系统

配电房智能化系统

配电房智能化系统依托电易云-智慧电力物联网&#xff0c;综合利用现代先进技术&#xff0c;通过对配电房的监控、数据采集、自动控制和管理&#xff0c;实现对配电房的安全、可靠、高效、节能和环保监控的综合管理系统。 配电房智能化系统功能&#xff1a; 1.运行状态实时监测…
阅读更多...
【C++漂流记】简易理解引用的基本语法和使用及其注意实现

【C++漂流记】简易理解引用的基本语法和使用及其注意实现

引用是C中的一种数据类型&#xff0c;它允许我们使用一个已经存在的变量来创建一个新的名称或别名&#xff0c;以便可以通过这个别名来访问和修改原始变量的值。引用的本质是一个别名或者一个变量的别名。 文章目录 基本语法引用的注意事项引用做函数参数引用的本质常量引用 基…
阅读更多...
04 卷积神经网络搭建

04 卷积神经网络搭建

一、数据集 MNIST数据集是从NIST的两个手写数字数据集&#xff1a;Special Database 3 和Special Database 1中分别取出部分图像&#xff0c;并经过一些图像处理后得到的[参考]。 MNIST数据集共有70000张图像&#xff0c;其中训练集60000张&#xff0c;测试集10000张。所有图…
阅读更多...
vue表格不显示列号123456

vue表格不显示列号123456

我在网上找了半天&#xff0c;都是如何添加列号123456的&#xff0c;没有找到不显示列号的参考&#xff0c;现在把这个解决了&#xff0c;特此记录一下。 没有加右边的就会显示&#xff0c;加上右边的就隐藏了
阅读更多...
python+django协同过滤算法的音乐推荐系统研究vue

python+django协同过滤算法的音乐推荐系统研究vue

本系统提供给管理员对用户、音乐分类、歌手、热门歌曲等诸多功能进行管理。本系统对于用户输入的任何信息都进行了一定的验证&#xff0c;为管理员操作提高了效率&#xff0c;也使其数据安全性得到了保障。本音乐推荐研究以Django作为框架&#xff0c;B/S模式以及MySql作为后台…
阅读更多...
QtCreator CMakeLists.txt添加模块(Modules)

QtCreator CMakeLists.txt添加模块(Modules)

find_package(QT NAMES Qt6 Qt5 REQUIRED COMPONENTS Widgets Sql) find_package(Qt${QT_VERSION_MAJOR} REQUIRED COMPONENTS Widgets Sql) target_link_libraries(HookeViscometer PRIVATE Qt${QT_VERSION_MAJOR}::Widgets Qt${QT_VERSION_MAJOR}::Sql) 蓝色部分为添加的Q…
阅读更多...
13分钟聊聊并发包中常用同步组件并手写一个自定义同步组件

13分钟聊聊并发包中常用同步组件并手写一个自定义同步组件

本篇文章通过AQS自己来实现一个同步组件&#xff0c;并从源码级别聊聊JUC并发包中的常用同步组件 本篇文章需要的前置知识就是AQS&#xff0c;阅读本篇文章大概需要13分钟 自定义同步组件 为了更容易理解其他同步组件&#xff0c;我们先来使用AQS自己来实现一个常用的可重入…
阅读更多...
（数字图像处理MATLAB+Python）第十二章图像编码-第三、四节：有损编码和JPEG

（数字图像处理MATLAB+Python）第十二章图像编码-第三、四节：有损编码和JPEG

文章目录 一&#xff1a;有损编码&#xff08;1&#xff09;预测编码A&#xff1a;概述B&#xff1a;DM编码C&#xff1a;最优预测器 &#xff08;2&#xff09;变换编码A&#xff1a;概述B&#xff1a;实现变换编码的主要问题 二&#xff1a;JPEG 一&#xff1a;有损编码 &am…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023