关于 elementui table组件 的特定行合并参考思路

目录

• 关于 elementui table组件 的特定行合并参考思路
  • 铺垫 原生table标签合并是这么写的
  • 重点 elementui 也按照table的规则显示就可以
  • 参考文章
    • elementUI table组件

关于 elementui table组件 的特定行合并参考思路

• 只提供思路, 再多的我也不会了
• 注意: 当前elementui版本是2.13.2, 请注意自己的ElementUI的版本

铺垫 原生table标签合并是这么写的

• 合并内容占据的位置是当前行和被合并行
• 被合并内容不占位置

<table border="1">
    <thead>
          <tr>
                <th>id</th>
                <th>name</th>
                <th>size</th>
                <th>time</th>
           </tr>
     </thead>
     <tbody>
           <tr>
                <td rowspan="2">111111</td>
                <td>yichi</td>
                <td>12</td>
                <td>22:33</td>
           </tr>
           <tr>
                <!-- <td>111111</td> -->
                <td>yichi</td>
                <td>12</td>
                <td>22:33</td>
           </tr>
           <tr>
                <td rowspan="3">22222</td>
                <td>yichi</td>
                <td>12</td>
                <td>22:33</td>
            </tr>
            <tr>
                <!-- <td>22222</td> -->
                <td>yichi</td>
                <td>12</td>
                <td>22:33</td>
            </tr>
            <tr>
                <!-- <td>22222</td> -->
                <td>yichi</td>
                <td>12</td>
                <td>22:33</td>
          </tr>
    </tbody>
</table>

重点 elementui 也按照table的规则显示就可以

• 模板部分

<el-table
    :data="tableData"
    :span-method="arraySpanMethod"
    border
    row-key="id"
    style="width: 100%"
>
    <el-table-column prop="id" label="ID" width="180">
    </el-table-column>
    <el-table-column prop="name" label="name">
    </el-table-column>
    <el-table-column prop="size" label="size">
    </el-table-column>
    <el-table-column prop="time" label="time">
    </el-table-column>
</el-table>

• js部分

const formData = {
    name: ''
};
export default {
    data() {
        return {
            tableData: [
                {
                    id: '12987122',
                    name: 'yichi',
                    size: '234',
                    time: '22:33',
                },
                {
                    id: '12987122',
                    name: 'yichi',
                    size: '234',
                    time: '22:33',
                },
                {
                    id: '12987125',
                    name: 'yichi',
                    size: '234',
                    time: '22:33',
                },
                {
                    id: '12987125',
                    name: 'yichi',
                    size: '234',
                    time: '22:33',
                },
                {
                    id: '12987125',
                    name: 'yichi',
                    size: '234',
                    time: '22:33',
                }
            ]
        };
    },
    methods: {
        arraySpanMethod({ row, column, rowIndex, columnIndex }) {
            if (columnIndex === 0) {
                // 不同时, 修改 formData.name
                if (formData.name !== row.id) {
                    formData.name = row.id;
                    // 查询当前相同id 的 rowspan 需要合并的数量, 占位置
                    return {
                        rowspan: this.getCompareId(row.id, rowIndex),
                        colspan: 1
                    }
                
                  // 相同时, 表示当前是被合并行, 隐藏
                } else {        
                    return {
                        rowspan: 0,
                        colspan: 0
                    }
                }
            }
        },
        getCompareId(id, rowIndex) {
            let num = 0;
            const tableData = this.tableData.slice(rowIndex);
            for(let i = 0; i < tableData.length; i++) {
                if (tableData[i].id !== id) { break; }
                if (tableData[i].id === id) { num+= 1; }
            }
            return num;
        }
    }
};

• 注意: 建议把判断相同id的变量放到非Vue实例, 如果放到Vue实例上, 会提示[Vue warn]: You may have an infinite update loop in a component render function., 具体原因我也不清楚

参考文章

elementUI table组件