tougao_web/src/components/common/journalArticleTable.vue

<template>
    <!-- 关于表格的操作 -->
    <div v-if="tableData.length > 0">
        <!-- 行的合并 列的合并 表头添加斜线 -->
        <el-table :data="tableData" style="width: 100%" :header-cell-style="{ height: '22px !important' }" class="tableBox">
           
            <el-table-column :label="this.$t(`journalArticleTable.time`)" align="right" width="130" fixed>
                <el-table-column prop="name" :label="this.$t(`journalArticleTable.title`)" width="120">
                    <template slot-scope="scope">
                        <el-tooltip class="item" effect="dark" :content="scope.row.jabbr" placement="top-start">
                            <div>
                                {{ scope.row.abbr }}
                            </div>
                        </el-tooltip>
                    </template>
                </el-table-column>
            </el-table-column>
            <el-table-column prop="fenopda" v-for="(v, i) in timeData" :label="v" align="center" :prop="v" min-width="70"></el-table-column>
        </el-table>
    </div>
</template>
  
  <script>
export default {
    data() {
        return {
            tableInfo: {},
            timeData: [],
            tableData: []
        };
    },
    created() {
        // 调用计算需要合并的行
        this.getSpanArr(this.content);
    },
    methods: {
        getTableInfo(type, data) {
            this.tableData = data.tableData;
            this.timeData = data.timeData;
        },
        getSpanArr(data) {
            this.spanObj.oneArray = [];
            let concatOne = 0;
            data.forEach((item, index) => {
                if (index === 0) {
                    this.spanObj.oneArray.push(1);
                } else {
                    // 判断依据
                    // 前一个的code和后一个的code相同，则进行 行的合并
                    if (item.code === data[index - 1].code) {
                        this.spanObj.oneArray[concatOne] += 1;
                        this.spanObj.oneArray.push(0);
                    } else {
                        this.spanObj.oneArray.push(1);
                        concatOne = index;
                    }
                }
            });
        },
        // 注意：横向合并列 纵向合并行
        objectSpanMethod({ row, column, rowIndex, columnIndex }) {
            if (columnIndex === 0) {
                if (row.code === 'wlgzcd' || row.code === 'nlgzcd') {
                    return {
                        rowspan: 1,
                        colspan: 6
                    };
                } else {
                    const _row = this.spanObj.oneArray[rowIndex];
                    const _col = _row ? 1 : 0;
                    return {
                        rowspan: _row,
                        colspan: _col
                    };
                }
            }
            // 要将其余的列给清除，否则其还会占用空间
            if (
                (row.code === 'wlgzcd' || row.code === 'nlgzcd') &&
                (columnIndex === 1 || columnIndex === 2 || columnIndex === 3 || columnIndex === 4 || columnIndex === 5)
            ) {
                // 1和2列被合并,不清除的话,则后面的单元格都会错位
                return {
                    rowspan: 0,
                    colspan: 0
                };
            }
        },
        // 第二行表头的隐藏
        headMerge({ row, column, rowIndex, columnIndex }) {
            if (rowIndex === 2) {
                return {
                    display: 'none'
                };
            }
        }
    }
};
</script>

<style  scoped>
::v-deep .el-table thead.is-group th {
    /* background: none !important; */
}
::v-deep .el-table thead.is-group tr:first-of-type th:first-of-type {
    border-bottom: none !important;
}
::v-deep .el-table thead.is-group tr:first-of-type th:first-of-type:before {
    content: '' !important;
    position: absolute !important;
    width: 1px !important;
    height: 85px !important; /*这里需要自己调整，根据td的宽度和高度*/
    top: 0 !important;
    left: 0 !important;
    background-color: #fff !important;
    opacity: 0.8 !important;
    display: block !important;
    transform: rotate(-56deg) !important; /*这里需要自己调整，根据线的位置*/
    transform-origin: top !important;
}
::v-deep .el-table thead.is-group tr:last-of-type th:first-of-type:before {
    content: '' !important;
    position: absolute !important;
    width: 1px !important;
    height: 105px !important; /*这里需要自己调整，根据td的宽度和高度*/
    bottom: 0 !important;
    right: 0 !important;
    background-color: #fff !important;
    opacity: 0.8 !important;
    display: block !important;
    transform: rotate(-57deg) !important; /*这里需要自己调整，根据线的位置*/
    transform-origin: bottom !important;
}
::v-deep .el-table tr:nth-child(2n) {
    background: #dcf3ff !important;
}

::v-deep .el-table .el-table__body-wrapper::-webkit-scrollbar {
    width: 10px; /*滚动条宽度*/
    height: 10px; /*滚动条高度*/
}
/*定义滚动条轨道 内阴影+圆角*/
::v-deep .el-table .el-table__body-wrapper::-webkit-scrollbar-track {
    /* box-shadow: 0px 1px 3px #071e4a inset;  */
    border-radius: 10px; /*滚动条的背景区域的圆角*/
    background-color: #f0f0f0; /*滚动条的背景颜色*/
}
/*定义滑块 内阴影+圆角*/
::v-deep .el-table .el-table__body-wrapper::-webkit-scrollbar-thumb {
    box-shadow: 0px 1px 3px #bababa inset; /*滚动条的内阴影*/
    border-radius: 10px; /*滚动条的圆角*/
    background-color: #bababa; /*滚动条的背景颜色*/
}
</style>