Naive UI 的 DataTable 表格列宽为啥不生效？

Air-涵菲提问于 2026-02-27 11:09:20 阅读 11

组件

我在用 Naive UI 的 DataTable 组件，想通过 CSS 控制某一列的宽度，但加了样式完全没反应，是不是哪里写错了？

我试过在 table 的 class 里加自定义样式，也试过直接用 :deep() 深度选择器，但列宽还是自动撑开，根本不受控。

.custom-table .n-data-table th:nth-child(2),
.custom-table .n-data-table td:nth-child(2) {
  width: 80px !important;
  min-width: 80px !important;
  max-width: 80px !important;
}

我来解答赞 3 收藏

反馈

1 条解答

慕容馨阳 Lv1

我之前这样搞的，Naive UI 的 DataTable 列宽得在 columns 配置里直接写 width 属性，CSS 硬写死 class 是压根不管用的，因为它的内部结构会动态生成表格结构，你写的 nth-child 根本对不上实际 DOM。正确做法是：



const columns = [

  { title: '名字', key: 'name', width: 120 },

  { title: '年龄', key: 'age', width: 80 },

]

2026-02-27 11:14