element 动态合并表格

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<div >
    <el-table style="421px" :data="historyData" :span-method="objectSpanMethod" :border="true">
        <el-table-column prop="checkRoom" label="科室" align="center" width="140">
        </el-table-column>
        <el-table-column prop="checkProject" label="检查项目" align="center" width="140">
        </el-table-column>
        <el-table-column prop="attention" label="注意事项" align="center" width="140">
        </el-table-column>
    </el-table>
</div>

<body>
    <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: function () {
                return {
                    historyData: [],
                }
            },
            mounted() {
                let dataArr = [{
                    checkRoom: 'CTROOM',
                    checkProject: '颈椎MRICT',
                    attention: '检查前空腹',
                }, {
                    checkRoom: 'CTROOM',
                    checkProject: '颈椎MRICT1',
                    attention: '检查前空腹',
                }, {
                    checkRoom: 'CTROOM',
                    checkProject: '颈椎MRICT1',
                    attention: '检查前空腹',
                }, {
                    checkRoom: 'CTROOM',
                    checkProject: '颈椎MRICT1',
                    attention: '检查前空腹',
                }, {
                    checkRoom: 'CTROOM',
                    checkProject: '颈椎MRICT3',
                    attention: '检查前空腹',
                }, {
                    checkRoom: 'DR',
                    checkProject: '鼻骨',
                    attention: '检查前空腹',
                }, {
                    checkRoom: 'DR',
                    checkProject: '鼻骨',
                    attention: '检查前空腹',
                }, {
                    checkRoom: 'DR',
                    checkProject: '头骨',
                    attention: '检查前空腹',
                }];
                let dataSolve = this.mergeTableRow(dataArr, ["checkRoom", "checkProject"])
                this.historyData = dataArr;
            },
            methods: {
                // 合并表格函数
                mergeTableRow(data, merge) {
                    if (!merge || merge.length === 0) {
                        return data;
                    }
                    merge.forEach((m) => {
                        const mList = {};
                        data = data.map((v, index) => {
                            const rowVal = v[m];
                            if (mList[rowVal] && mList[rowVal].newIndex === index) {
                                mList[rowVal]["num"]++;
                                mList[rowVal]["newIndex"]++;
                                data[mList[rowVal]["index"]][m + "-span"].rowspan++;
                                v[m + "-span"] = {
                                    rowspan: 0,
                                    colspan: 0,
                                };
                            } else {
                                mList[rowVal] = {
                                    num: 1,
                                    index: index,
                                    newIndex: index + 1,
                                };
                                v[m + "-span"] = {
                                    rowspan: 1,
                                    colspan: 1,
                                };
                            }
                            return v;
                        });
                    });
                    return data;
                },
                objectSpanMethod({ row, column, rowIndex, columnIndex }) {
                    const span = column["property"] + "-span";
                    if (row[span]) {
                        return row[span];
                    }
                },
            }
        })
    </script>
</body>

</html>
element 动态合并表格

相关推荐
