如何在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', '[e-mail]', '(353) 01 222 3333'],
['Mark', '[e-mail]',   '(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