fix(视图-表格): 修复 Echarts 表格冻结列后样式异常。

This commit is contained in:
wisonic-s 2023-12-21 15:24:42 +08:00
parent b3977e4aeb
commit 14d118ba3e

View File

@ -239,7 +239,11 @@ export default {
tableStyle() {
return {
width: '100%',
'--scroll-bar-color': this.scrollBarColor
'--scroll-bar-color': this.scrollBarColor,
'--footer-font-color': this.table_header_class.color,
'--footer-bg-color': this.table_header_class.background,
'--footer-font-size': this.table_header_class.fontSize,
'--footer-height': this.table_header_class.height
}
},
...mapState([
@ -441,16 +445,14 @@ export default {
this.table_item_class.fontSize = customAttr.size.tableItemFontSize + 'px'
this.table_header_class.height = customAttr.size.tableTitleHeight + 'px'
this.table_item_class.height = customAttr.size.tableItemHeight + 'px'
const visibleColumn = this.$refs.plxTable.getTableColumn().fullColumn
for (let i = 0, column = visibleColumn[i]; i < visibleColumn.length; i++) {
//
if (column.type === 'index' && column.visible !== customAttr.size.showIndex) {
column.visible = customAttr.size.showIndex
this.$refs.plxTable.refreshColumn()
break
}
}
this.$refs.plxTable.refreshColumn()
if (!customAttr.size.indexLabel) {
this.indexLabel = ' '
} else {
@ -506,20 +508,6 @@ export default {
this.bg_class.background = hexColorToRGBA(customStyle.background.color, customStyle.background.alpha)
}
}
// footer
const table = document.getElementsByClassName(this.chart.id)
this.$refs.plxTable.updateFooter().then(() => {
for (let i = 0; i < table.length; i++) {
const s_table = table[i].getElementsByClassName('elx-table--footer')
let s = ''
for (const i in this.table_header_class) {
s += (i === 'fontSize' ? 'font-size' : i) + ':' + this.table_header_class[i] + ';'
}
for (let i = 0; i < s_table.length; i++) {
s_table[i].setAttribute('style', s)
}
}
})
},
getRowStyle({ row, rowIndex }) {
if (rowIndex % 2 !== 0) {
@ -828,6 +816,12 @@ export default {
text-overflow: var(--text-overflow, 'ellipsis');
white-space: var(--white-space, 'nowrap');
}
::v-deep .elx-table--footer {
color: var(--footer-font-color);
background: var(--footer-bg-color);
font-size: var(--footer-font-size);
height: var(--footer-height);
}
}
</style>