vue.js 制表器标题颜色

rn0zuynd  于 2023-02-24  发布在  Vue.js
关注(0)|答案(1)|浏览(133)

制表程序不接受标题颜色更改
通过下面的css,我试图改变我所有列的标题颜色,但是我没有得到这个调整
我试着这样做,但它不去。我用vue3 + vite +制表符5.4

<style scoped>
   .tabulator {
     font-size: 12px;
     width: 100%;
   }
   .tabulator .tabulator-header,
   .tabulator-col .headerBackgroundColor {
     background-color: #acacac;
   }
</style>

这是我的制表机

tabulator.value = new Tabulator('#tabulator', {
     data: dataRelatorio.value,
     layout: 'fitColumns',
     autoResize: true,
     pagination: 'local',
     paginationSize: 20,
     rowHeight: 25,
     paginationSizeSelector: [10, 20, 30, 50, 100, 200, 500, 1000],
     movableColumns: true,
     paginationCounter: 'rows',
     responsiveLayout: 'hide',
     placeholder: 'No record found',
     locale: 'pt-BR',
     langs: {
       'pt-BR': {
         pagination: {
           page_title: 'Show page',
           first: 'First',
           first_title: 'First page',
           last: 'Next',
           last_title: 'Next page',
           prev: 'Previous',
           prev_title: 'Previous page',
           next: 'Next',
           next_title: 'Next Page',
           all: 'All',
         },
       },
     },
     columns: columns,
     rowFormatter: function (row) {
       //console.log(row.getData());
       if (row.getData().in_delayed === 'delayed') {
         const children = row.getElement().childNodes;
         children.forEach((child) => {
           child.style.backgroundColor = '#FFFACD';
         });
       }
     },
   });
mklgxw1f

mklgxw1f1#

这应该行得通:

<style>
.tabulator .tabulator-header .tabulator-col {
  background-color: #acacac;
}
</style>

注:

  • 我没有在<style>标记上使用scoped指令。
  • 一个组件中可以有多个<style>标签,一些是scoped标签,一些是常规标签。常规标签是 “normal” CSS,它们适用于整个DOM。
  • 你也可以在一个scoped样式标签中应用上面的样式。选择器很可能是.tabulator :deep(.tabulator-header .tabulator-col),但是我不能确定,除非你提供一个 runnable 最小的例子,这样我可以检查它。

相关问题