@handsontable/vue3插件表格滑动横向滚动条时表格元素的类名和样式怎么不让其重置
时间: 2024-01-22 17:01:40 浏览: 27
@handsontable/vue3插件基于Handsontable表格库开发,当你滑动表格的横向滚动条时,表格元素的类名和样式可能会被重置,这是因为Handsontable默认使用虚拟渲染技术,只渲染可视区域内的单元格,当你滑动横向滚动条时,新的单元格会被加载,旧的单元格会被卸载,导致之前的类名和样式被重置。
要解决这个问题,可以通过设置`fixedColumnsLeft`和`fixedRowsTop`属性来固定表格的前几列和前几行,这样这些单元格就不会被卸载,类名和样式也就不会被重置。另外,你还可以使用`afterRender`钩子函数,在该函数中重新添加类名和样式。例如:
```javascript
<template>
<div ref="hotTable"></div>
</template>
<script>
import Handsontable from 'handsontable';
import 'handsontable/dist/handsontable.full.css';
export default {
mounted() {
const hot = new Handsontable(this.$refs.hotTable, {
data: getData(),
colHeaders: getColHeaders(),
rowHeaders: getRowHeaders(),
columns: getColumns(),
fixedColumnsLeft: 2, // 固定前2列
fixedRowsTop: 1, // 固定前1行
afterRender: function() {
const tbody = this.view.TBODY;
for (let i = 0; i < tbody.childNodes.length; i++) {
const tr = tbody.childNodes[i];
tr.classList.add('my-tr-class');
for (let j = 0; j < tr.childNodes.length; j++) {
const td = tr.childNodes[j];
td.classList.add('my-td-class');
}
}
}
});
}
}
</script>
<style>
.my-tr-class {
background-color: #fff;
}
.my-td-class {
font-weight: bold;
}
</style>
```
在这个例子中,我固定了表格的前两列和前一行,这些单元格就不会被卸载,类名和样式也就不会被重置。同时,我也使用了`afterRender`钩子函数,在该函数中重新添加了类名和样式,确保当新的单元格被加载时,它们仍然具有之前的类名和样式。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![xlsx](https://img-home.csdnimg.cn/images/20210720083732.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)