脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → Vue3+Element Plus el-table跨行显示

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

 更新时间：2023年09月11日 11:08:47   作者：凌霄玉阶非所愿  
这篇文章主要介绍了Vue3+Element Plus实现el-table跨行显示(非脚手架),本文通过示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下

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>

效果图

在这里插入图片描述

到此这篇关于Vue3+Element Plus实现el-table跨行显示（非脚手架）的文章就介绍到这了,更多相关Vue3+Element Plus el-table跨行显示内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • Vue3在css中使用v-bind绑定js/ts变量(在scss和less中使用方式)

    Vue3在css中使用v-bind绑定js/ts变量(在scss和less中使用方式)

    v-bind是Vue.js中的一个核心指令,用于在Vue组件或DOM元素上绑定数据属性,下面这篇文章主要给大家介绍了关于Vue3在css中使用v-bind绑定js/ts变量的相关资料,也可以在scss和less中使用方式,需要的朋友可以参考下
    2024-04-04
  • Vue封装全局过滤器Filters的步骤

    Vue封装全局过滤器Filters的步骤

    这篇文章主要介绍了Vue封装全局过滤器Filters的步骤，通过封装vue全局过滤器实现filters的统一管理。感兴趣的朋友可以了解下
    2020-09-09
  • 一文带你简单理解Vue的data为何只能是函数

    一文带你简单理解Vue的data为何只能是函数

    如果data是一个函数的话,这样每复用一次组件,就会返回一份新的data,下面这篇文章主要给大家介绍了关于简单理解Vue的data为啥只能是函数的相关资料,需要的朋友可以参考下
    2022-10-10
  • vue移动端模态框(可传参)的实现

    vue移动端模态框(可传参)的实现

    这篇文章主要介绍了vue移动端模态框(可传参)的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-11-11
  • Vue EventBus自定义组件事件传递

    Vue EventBus自定义组件事件传递

    这篇文章主要介绍了Vue EventBus自定义组件事件传递，组件化应用构建是Vue的特点之一，本文主要介绍EventBus进行数据消息传递 ，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-06-06
  • Vue项目服务器部署之子目录部署方法

    Vue项目服务器部署之子目录部署方法

    在本文中我们给大家整理了关于Vue项目服务器部署之子目录部署方法和具体步骤，需要的朋友们参考下。
    2019-05-05
  • 解决echart在vue中id重复问题

    解决echart在vue中id重复问题

    这篇文章主要介绍了解决echart在vue中id重复问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-03-03
  • vue中的总线机制(EventBus)解析

    vue中的总线机制(EventBus)解析

    这篇文章主要介绍了vue中的总线机制(EventBus)，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-10-10
  • 详解Vue用axios发送post请求自动set cookie

    详解Vue用axios发送post请求自动set cookie

    本篇文章主要介绍了Vue用axios发送post请求自动set cookie，非常具有实用价值，需要的朋友可以参考下
    2017-05-05
  • vue实现PC端分辨率适配操作

    vue实现PC端分辨率适配操作

    这篇文章主要介绍了vue实现PC端分辨率适配操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2020-08-08

最新评论