Element 表格合并单元格

原理

1、getData方法是从后台拿到的数据，通常返回的是一个数组；

2、spanArr是一个空的数组，用于存放每一行记录的合并数；
3、 pos是spanArr的索引。
如果是第一条记录（索引为0），向数组中加入１，并设置索引位置；
如果不是第一条记录，则判断它与前一条记录是否相等，
如果相等，则向spanArr中添入元素0，并将前一位元素＋１，表示合并行数＋１，
以此往复，得到所有行的合并数，0即表示该行不显示

<script setup>
let tableData = ref([]);
let spanArr = ref([]);
const getData = () => {
    let pos = ref(0);
    perceptionInfo({ id: id.value })
        .then((res) => {
            tableData.value = res.data.data;
            // 合并单元格数据处理
            tableData.value.forEach((n, i) => {
                if (i == 0) {
                    spanArr.value.push(1);
                    pos = 0;
                } else {
                    if (n.category == tableData.value[i - 1].category) {
                        spanArr.value[pos] += 1;
                        spanArr.value.push(0);
                    } else {
                        spanArr.value.push(1);
                        pos = i;
                    }
                }
            });
        })
};
// 合并单元格;
const spanMethod = (row, column, rowIndex, columnIndex) => {
    if (row.columnIndex === 0) {
        const _row = spanArr.value[row.rowIndex];
        const _col = _row > 0 ? 1 : 0;
        console.log(`rowspan:${_row} colspan:${_col}`);
        return {
            // [0,0] 表示这一行不显示， [2,1]表示行的合并数
            rowspan: _row,
            colspan: _col,
        };
    }
};
</script>

　效果如下：