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

这篇具有很好参考价值的文章主要介绍了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跨行显示(非脚手架),前端,Vue,Element,vue.js,elementui,前端文章来源地址https://www.toymoban.com/news/detail-699559.html

到了这里,关于Vue3+Element Plus实现el-table跨行显示(非脚手架)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • vue中数据滚动显示 实现Element-UI中el-table内数据的懒加载

    工作中我们经常会用到element-ui组件库中的le-table组件来展示数据,但当table的数据源数量过大的时候统一展示可能会出现页面卡顿,且会影响用户体验,为此我们可以尝试对el-table中的数据做懒加载的效果展示: 1. 挂在阶段监听el-table的scroll滚动事件 2. 当table表格滚动条的位置

    2023年04月08日
    浏览(55)
  • vue使用element-ui,el-table不显示

    例如:新增了一个表格,按官网代码贴过来的,结果一直不显示 代码如下一模一样,其他数据正常显示,就表格不显示 其实版本库不一致导致的,贼坑,又不提示 先卸载element-ui安装一个低版本的element-ui就可以解决``

    2024年02月11日
    浏览(60)
  • 一个比官网更好的el-table 实现跨行展示的例子

    el-table 实现跨行展示的例子,好吧,这个问题好像挺容易的,官网文档就有例子,用的是span-method,不过官网给的例子其实实现起来有时候并不容易,而且也不是很灵活,这里给出一种比官网更好的实现方式。以跨行为例,跨列其实是类似的。 效果如图 1、使用的还是官方的

    2024年01月18日
    浏览(48)
  • Vue - Element el-table 表头、行、列合并,底部或顶部显示汇总行

    GitHub Demo 地址 在线预览 使用 el-table 的 span-method 方法合并行和列 使用 el-table 的 header-cell-style 方法合并表头 使用 el-table 的 cell-class-name 方法配合css样式隐藏Checkbox 使用 el-table 的 show-summary 、 summary-method 方法配合css样式设置汇总行和汇总行样式

    2024年02月14日
    浏览(44)
  • #vue3# el-table-horizontal-scroll 让 el-table 在底部显示横向滚动条

    一、需求: 当 el-table 的宽度超出浏览器宽度时,尽管 el_table 底部会出现滚动条,但使用起来不太便捷,因为每次需要先滚动到底部才能使用 el-table 的滚动体,这显得相当繁琐。 为了提升体验,希望在 el-table 的 宽度超出屏幕宽度时,即使没有滚动到底部,也能够在可视范围

    2024年01月18日
    浏览(34)
  • vue element ui el-table单元格里面显示多张图片点击并放大

    效果图: 一个单元格里面显示三张图片,并且点击图片可以放大。 1.将图片v-for渲染出来,具体上代码 注:el-popover的属性   2.单元格里能够展示多张图片,需要在请求的接口里面做处理 以上两步,就可以实现上面的功能。

    2024年02月07日
    浏览(48)
  • Vue3 - Element Plus 表格组件 “手动“ 取消/选中勾选列,并同步更新表格复选框 UI 状态(el-table 表格组件中,通过代码手动控制某个列的选中与取消勾选,并且复选框跟着变)

    网上基本上都是全部取消勾选的教程,没有仅对单独列操作的教程。 本文 实现了在 vue3 + element plus 组件库中,对 “某一个” 或 “几个单独” 列进行勾选/取消(手动操作表格复选框),并且让表格复选框自动同步选中状态, 完美解决删除表格列勾选的数据后,选中和取消

    2024年02月03日
    浏览(82)
  • 解决vue-electron element-UI中el-table表格不显示

    问题:element-UI官网上el-table组件,引入自己项目的时候表格不显示。 解决方案: 修改.electron-vuewebpack.renderer.config.js 将 修改为 即可解决。

    2024年02月16日
    浏览(50)
  • element plus el-table 添加滚动监听

    项目上使用 el-table 加载1000 条数据,同时有三个列的数据需要实时更新,而数据更新时会导致页面不响应,表现为拖动过程中突然卡顿。为了解决卡顿问题提出了两个解决办法:一个是滚动时清除定时器,不再刷新表格,滚动结束后恢复定时器;另一个是只刷新视口数据,更

    2024年02月06日
    浏览(37)
  • Vue+element实现el-table行内编辑并校验

    el-table行内编辑情况情况概要:之前在开发过程中对于element数据的新增,修改,删除。一般直接结合el-form使用。也就是新增的时候点新增然后出来一个弹框,里面嵌套一个表单,然后保存就好了。这次项目中要求所有的新增,修改,删除功能加在表格中,实现行内编辑功能。

    2024年02月15日
    浏览(45)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包