修改期刊计数总量
This commit is contained in:
156
src/components/common/journalArticleTable.vue
Normal file
156
src/components/common/journalArticleTable.vue
Normal file
@@ -0,0 +1,156 @@
|
||||
<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>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user