@handsontable/vue3插件表格滑动横向滚动条时表格元素的类名和样式怎么不让其重置
时间: 2024-01-22 15:01:40 浏览: 28
@handsontable/vue3插件中,当表格滑动横向滚动条时,表格元素的类名和样式会被重置,这是因为表格的DOM结构被重新渲染。如果你想保留表格元素的类名和样式,可以使用`afterRender`钩子函数来重新应用它们。
具体实现如下:
1.在`<HotTable>`标签中添加`after-render`属性,值为一个函数名,如`afterRenderFunc`。
```html
<HotTable
:data="data"
:colHeaders="colHeaders"
:columns="columns"
:settings="settings"
after-render="afterRenderFunc"
/>
```
2.在`<script>`标签中定义`afterRenderFunc`函数。
```js
methods: {
afterRenderFunc() {
// 重新应用表格元素的类名和样式
const tdElements = document.querySelectorAll('.htCore tbody td');
tdElements.forEach((td) => {
const className = td.getAttribute('class');
if (className) {
td.classList.add(className);
}
});
},
},
```
在`afterRenderFunc`函数中,我们首先使用`document.querySelectorAll`方法获取所有表格单元格元素,然后遍历每个单元格元素,获取其类名,并重新将类名添加到元素的`classList`属性中。
这样,当表格滑动横向滚动条时,表格元素的类名和样式就不会被重置了。
相关推荐
![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_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.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)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![pptx](https://img-home.csdnimg.cn/images/20210720083543.png)