vue.js - 如何在 VueJS 中设置 GridJS 样式

Question

我将 Vue V.3 用于我的项目，并将 Grid.JS 用于我的表。有什么方法可以设置 Grid 的表格元素（即 th、tr 等）的样式吗？我已经检查了Vue 的 Grid.JS 文档，但是没有关于绑定样式的文档。

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