如何在VueJS中设置GridJS样式

Question

我在我的项目中使用Vue V.3，在我的表中使用Grid.JS。有没有办法样式化Grid的表元素(如th、tr等)？我已经检查了Grid.JS documentation for Vue，但是没有关于绑定样式的文档。

Answer 1

使用className对象并绑定类名

 <template>
  <grid
   :auto-width="autoWidth"
   :class-names="classNames"
   :width="width"
  ></grid>
 </template>

这将出现在脚本标记中

<script>
import Grid from 'gridjs-vue'

export default {
  name: 'MyTable',
  components: {
    Grid
  },
  data() {
    return {
      cols: ['col 1', 'col 2', 'col 3' ],
      rows: [
       ['John', 'john@example.com', '(353) 01 222 3333'],
       ['Mark', 'mark@gmail.com',   '(01) 22 888 4444']
     ],
     classNames: {
       td: 'my-td-class',
       table: 'custom-table-class' 
       }
     }
   }
</script>

然后在样式部分或样式表中添加CSS样式

.my-td-class {
  background-color: red;
  }

或使用样式对象

似乎您还可以添加一个样式对象https://gridjs.io/docs/examples/css-style