when vue uses elementUI, to customize the scroll bar, there is a gap between the table fixed column and the scroll bar.
just started to directly override the "el-table__fixed" attribute of table to remove the gap, but the interface is dynamically adapted, that is, the height is not fixed, how to solve it?
in fact, you only need to overwrite the style to fix it
mounted
mounted() {
window.onresize = () => {
return (() => {
window.screenWidth = document.body.clientWidth
this.tableHeight = window.innerHeight - 165
if (this.widowHeight !== window.innerHeight) {
this.handleSuitTableHigh()
}
})()
}
setTimeout(() => {
this.handleSuitTableHigh()
}, 1000)
}
// table
handleSuitTableHigh() {
this.widowHeight = window.innerHeight
const tables = document.getElementsByClassName('el-table__fixed')
for (const item of tables) {
setTimeout(() => {
item.style.height = parseInt(item.style.height) + 7 + 'px'
}, 100)
const wrappers = item.getElementsByClassName('el-table__fixed-body-wrapper')
for (const wrap of wrappers) {
setTimeout(() => {
wrap.style.height = parseInt(wrap.style.height) + 7 + 'px'
}, 100)
}
}
},
element Ui paging size-change event triggers also initiates current-change event, resulting in two calls to the interface <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page....
this is an example given by the official of ele.me: this.$alert( , , { confirmButtonText: , callback: action => { this.$message({ type: info , message: `action: ${ action }` ...