Vue3中PrimeVue DataTable配置showGridlines后网格线不显示

问题代码 #

模板部分：

<template>
  <div class="tableView">
    <DataTable :value="data" showGridlines responsiveLayout="scroll" >
    <Column v-for="col in columns" :field="col.field" :header="col.header" :key="col.field"></Column>
  </DataTable>
  <el-button type="warning" round @click="togtab">Toggle-Table</el-button>
</div>
</template>

脚本部分：

<script>
import DataTable from '../../node_modules/primevue/datatable';
import Column from '../../node_modules/primevue/column';
import ColumnGroup from '../../node_modules/primevue/columngroup';     
import Row from '../../node_modules/primevue/row';  

export default {
  name: 'TableComp',
  props:['data'],
  data() {
      return {
        columns:[]
      };
    },
  components: {
    DataTable,
    Column
  },
  methods: {
 togtab(){
   for (let i=0; i< Object.keys(this.data).length ;i++ ){
      this.columns[i] = {field: Object.keys(this.data[0])[i], header: Object.keys(this.data[0])[i]}
    }
    console.log(this.columns)
 }  
}
}
</script>

实际渲染效果（仅显示无网格线的基础表格）：

本次开发参照PrimeVue官方动态列示例实现。

错误原因 #

• 未引入PrimeVue主题CSS文件：showGridlines属性依赖主题内置CSS规则渲染边框，仅在组件上添加属性、不加载对应样式时，网格线没有对应的样式支撑，无法显示，这是核心问题。
• 组件引入路径不规范：直接从node_modules深层路径引入组件，易引发样式依赖、组件实例加载异常。代码中引入的ColumnGroup、Row未实际使用，属于冗余引入。
• 数组赋值不符合Vue2响应式规则：通过索引直接给columns数组项赋值的写法，Vue2无法检测到数组变更，会导致列渲染异常，虽不是网格线失效的直接原因，但会影响组件正常功能。

修复步骤 #

1. 在项目入口文件（通常为main.js/main.ts）引入PrimeVue必需的样式文件：

// 核心组件样式
import 'primevue/resources/primevue.min.css'
// 主题样式，可根据项目需求替换为其他官方主题，此处以默认lara浅蓝主题为例
import 'primevue/resources/themes/lara-light-blue/theme.css'

2. 修正组件引入路径，删除冗余引入，PrimeVue支持直接从包名路径引入组件：

import DataTable from 'primevue/datatable';
import Column from 'primevue/column';

3. 修正togtab方法的列赋值逻辑，使用Vue2可检测的响应式赋值方式：

togtab(){
  if (!Array.isArray(this.data) || !this.data.length) return
  const dataKeys = Object.keys(this.data[0])
  this.columns = dataKeys.map(key => ({
    field: key,
    header: key
  }))
}

完成以上操作后重启开发服务，showGridlines属性即可正常生效，渲染出带网格线的表格。

内容的提问来源于stack exchange，提问作者harsh panday