使用原生table实现相同数据进行合并

最新推荐文章于 2024-07-26 20:51:40 发布

cyndi_超努力

最新推荐文章于 2024-07-26 20:51:40 发布

阅读量969

点赞数 1

分类专栏：工作积累文章标签：数据库 java 服务器 Powered by 金山文档

本文链接：https://blog.csdn.net/m0_66722601/article/details/129138433

版权

工作积累专栏收录该内容

39 篇文章 1 订阅

订阅专栏

在前端开发中，针对具有相同类别的表格数据，可以通过在渲染时为元素添加自定义属性（如zyvalue），然后在JavaScript中检查这些属性来决定是否合并单元格。文章提供了一段Vue.js的示例代码，展示了如何在HTML和JS中操作，通过遍历和比较属性值来实现表格单元格的合并。

摘要由CSDN通过智能技术生成

需求:在开发中经常会遇到表格的使用,遇到相同的类目前端页面需要合并进行显示

思路就是:当拿到数据,去渲染数据的时候可以给元素加上一个自定义的属性,这个属性是通过后端返回来的,后面我们在做处理的时候就可以去判断这个属性是否相等,相等的话我们就把这两个单元格做合并处理,如:

html代码

 <table id="tableBody" cellspacing="0">
                <tbody>
                    <tr v-for="(item,index) in TableData.list" :key="index">
                        <td :zyvalue=item.hyml>{{item.hymlText}} </td>
                        <td :zyvalue=item.hyml>{{item.hymlTotal}} </td>
                        <td :zyvalue=item.yjzy>{{item.yjzyText}}</td>
                        <td :zyvalue=item.yjzy>{{item.yjzyTotal}}</td>
                        <td :zyvalue=item.ejzy>{{item.ejzyText}}</td>
                        <td :zyvalue=item.ejzy>{{item.ejzyTotal}}</td>
                        <td :zyvalue=item.sjzy>{{item.sjzyText}}</td>
                        <td :zyvalue=item.sjzy>{{item.sjzyTotal}}</td>
                    </tr>
                </tbody>
            </table>

js部分

     // table的id  需要合并的列（从0开始算）
        mergeCell(tableId, cols) {
            let that = this
            var table = document.getElementById(tableId);
            if (table && table.rows) {
                var table_rows = table.rows;
                // 需要合并的列的数组
                cols.forEach((v, k) => {
                    // 循环table每⼀⾏
                    for (let i = 0; i < table_rows.length - 1; i++) {
                        // row
                        let now_row = table_rows[i];
                        let next_row = table_rows[i + 1];
                        // col
                        let now_col = now_row.cells[v];
                        let next_col = next_row.cells[v];
                        if (($(now_col).attr('zyvalue') != "" || $(next_col).attr('zyvalue') != "") && $(now_col).attr('zyvalue') === $(next_col).attr('zyvalue')) {
                            // 标记为需要删除
                            $(next_col).addClass('remove')
                            // 递归判断当前对象是否已经被删除
                            this.setParentSpan(table, i, v)
                        }
                    }
                })
                $(".remove").remove();
            }

        },

        // (递归⽅法，⽤于多⾏统计) pram => table表格当前⾏对应的列
        setParentSpan(table, row, col) {
            var col_item = table.rows[row].cells[col]
            if ($(col_item).hasClass('remove')) {
                this.setParentSpan(table, --row, col)
            } else {
                col_item.rowSpan += 1
            }
        },

数据拿到以后我们再去调用合并表格单元格的方法.