Handsontable/vue3 滑动横向滚动条时表格元素的类名会被重置,怎么不重置
时间: 2024-03-08 22:49:40 浏览: 88
快速解决Vue、element-ui的resetFields()方法重置表单无效的问题
可以在 Handsontable 的 Vue3 组件中使用 `afterScrollHorizontally` 回调函数,在滑动横向滚动条时重新设置表格元素的类名,从而避免被重置。具体实现可以参考以下代码:
```vue
<template>
<div ref="hotTable"></div>
</template>
<script>
import { createApp } from 'vue';
import Handsontable from 'handsontable';
export default {
mounted() {
const app = createApp({});
app.config.globalProperties.$hot = Handsontable;
const hot = this.$refs.hotTable;
this.hotInstance = app.mount(hot, {
mounted() {
this.$hot(hot, {
// ...其他设置...
afterScrollHorizontally: function() {
const tdElements = this.view.TBODY.querySelectorAll('td');
for (let i = 0; i < tdElements.length; i++) {
tdElements[i].classList.add('my-class');
}
}
});
}
});
}
};
</script>
```
在这个示例中,我们在滑动横向滚动条时,重新为表格中所有的`td`元素添加一个名为`my-class`的类名。您可以根据自己的需要修改类名和添加的方式。
阅读全文