Naive UI 的 DataTable 如何实现列宽拖动调整？

UX文瑞提问于 2026-03-18 20:41:20 阅读 4

组件

我在用 Naive UI 的 DataTable 做一个数据展示页，想让用户能手动拖动调整列宽，但文档里没找到相关配置。试了加 resizable 属性也不行，是不是不支持？

这是我的表格代码：

<n-data-table
  :columns="columns"
  :data="tableData"
  :bordered="true"
  resizable
/>

控制台没报错，但鼠标移到列边框上根本没出现拖拽图标，完全不能调整。有没有人成功实现过这个功能？

Naive UI

我来解答赞 2 收藏

反馈

1 条解答

シ增芳 Lv1

兄弟，Naive UI 的列宽拖动确实需要两个地方都配置才行，光在 table 上加 resizable 不够。

你需要在 columns 定义里也给每列加上 resizable: true，像这样：

const columns = [

  {

    title: '姓名',

    key: 'name',

    width: 150,

    resizable: true  // 这里要加

  },

  {

    title: '年龄',

    key: 'age',

    width: 120,

    resizable: true  // 这里也要加

  },

  {

    title: '地址',

    key: 'address',

    width: 200,

    resizable: true

  }

]

另外注意列宽要用具体数值，别用百分比，百分比的好像不支持拖动调整。

还有一个容易踩的坑：如果你的 columns 是用 reactive 定义的，确保 resizable 属性加进去了，我之前遇到过 ts 类型没写对导致属性没生效的情况。

改完这两处应该就能看到鼠标移到列边框变成可拖动的光标了。

2026-03-18 21:00