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

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

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
            }
        },

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