动态修改vxe-table表头border

代码研究员

已于 2023-09-12 16:58:20 修改

阅读量785

点赞数

分类专栏： js 文章标签： javascript 前端 vue.js

于 2023-09-12 16:51:15 首次发布

本文链接：https://blog.csdn.net/qq_30596783/article/details/132835784

版权

js 专栏收录该内容

22 篇文章 1 订阅 ¥19.90 ¥99.00

订阅专栏

超级会员免费看

本文记录了在开发透视表时遇到的挑战，特别是如何通过JS操作DOM来实现vxe-table表头边框样式的动态修改。重点在于onMounted中调用方法，并用watch监听数据变化，再在nextTick中执行。由于vxe-table在Vue环境中不支持直接通过document.getElementsByClassName获取元素，因此使用ref获取VXE-Table根元素，并用querySelectorAll选择特定类名的元素进行样式调整。

摘要由CSDN通过智能技术生成

今天在开发公司的透视表的过程中，遇到很多坑特此记录一下，样式更改这一块除了通过header-cell-style等方法已经无法满足样式修改的问题，最终选择通过通过js操作dom实现样式的更改。

 // TODO: 表格边框 需要获取元素并监听
        const changeTableBorder = () => {
            const tableEl = (instance?.$refs.vxeTable as Vue).$el as HTMLDivElement;
            const el = tableEl.querySelector('.vxe-table--border-line') as HTMLD