Table 表格

用于展示多条结构类似的数据。

基础用法

基础的表格展示用法。

vue

<template>
  <NTable :columns="columns" :data="data" />
</template>

<script setup>
const columns = [
  { prop: 'name', label: '姓名' },
  { prop: 'age', label: '年龄' },
  { prop: 'address', label: '地址' },
]

const data = [
  { name: '张三', age: 20, address: '北京市' },
  { name: '李四', age: 25, address: '上海市' },
  { name: '王五', age: 30, address: '广州市' },
]
</script>

带斑马纹

使用 stripe 属性来创建带斑马纹的表格。

vue

<template>
  <NTable :columns="columns" :data="data" stripe />
</template>

<script setup>
const columns = [
  { prop: 'name', label: '姓名' },
  { prop: 'age', label: '年龄' },
  { prop: 'address', label: '地址' },
]

const data = [
  { name: '张三', age: 20, address: '北京市' },
  { name: '李四', age: 25, address: '上海市' },
  { name: '王五', age: 30, address: '广州市' },
]
</script>

带边框

使用 border 属性来创建带边框的表格。

vue

<template>
  <NTable :columns="columns" :data="data" border />
</template>

<script setup>
const columns = [
  { prop: 'name', label: '姓名' },
  { prop: 'age', label: '年龄' },
  { prop: 'address', label: '地址' },
]

const data = [
  { name: '张三', age: 20, address: '北京市' },
  { name: '李四', age: 25, address: '上海市' },
  { name: '王五', age: 30, address: '广州市' },
]
</script>

固定列

使用 fixed 属性来固定列。

vue

<template>
  <NTable :columns="columns" :data="data" />
</template>

<script setup>
const columns = [
  { prop: 'name', label: '姓名', fixed: 'left', width: '120px' },
  { prop: 'age', label: '年龄' },
  { prop: 'email', label: '邮箱' },
  { prop: 'phone', label: '电话' },
  { prop: 'address', label: '地址', fixed: 'right', width: '150px' },
]

const data = [
  { name: '张三', age: 20, email: 'zhangsan@example.com', phone: '13800138000', address: '北京市' },
  { name: '李四', age: 25, email: 'lisi@example.com', phone: '13800138001', address: '上海市' },
  { name: '王五', age: 30, email: 'wangwu@example.com', phone: '13800138002', address: '广州市' },
]
</script>

列宽

使用 width 和 min-width 属性来设置列宽。

vue

<template>
  <NTable :columns="columns" :data="data" />
</template>

<script setup>
const columns = [
  { prop: 'name', label: '姓名', width: '120px' },
  { prop: 'age', label: '年龄', width: '80px' },
  { prop: 'address', label: '地址', minWidth: '200px' },
]

const data = [
  { name: '张三', age: 20, address: '北京市海淀区中关村大街1号' },
  { name: '李四', age: 25, address: '上海市浦东新区陆家嘴环路1000号' },
  { name: '王五', age: 30, address: '广州市天河区天河路385号' },
]
</script>

列对齐

使用 align 和 headerAlign 属性来设置列的对齐方式。

vue

<template>
  <NTable :columns="columns" :data="data" />
</template>

<script setup>
const columns = [
  { prop: 'name', label: '姓名', align: 'left' },
  { prop: 'age', label: '年龄', align: 'center' },
  { prop: 'address', label: '地址', align: 'right' },
]

const data = [
  { name: '张三', age: 20, address: '北京市' },
  { name: '李四', age: 25, address: '上海市' },
  { name: '王五', age: 30, address: '广州市' },
]
</script>

排序

设置 sortable 属性来启用排序。

vue

<template>
  <NTable :columns="columns" :data="data" />
</template>

<script setup>
const columns = [
  { prop: 'name', label: '姓名' },
  { prop: 'age', label: '年龄', sortable: true },
  { prop: 'address', label: '地址' },
]

const data = [
  { name: '张三', age: 20, address: '北京市' },
  { name: '李四', age: 25, address: '上海市' },
  { name: '王五', age: 30, address: '广州市' },
]
</script>

多选

设置 type="selection" 来启用多选。

vue

<template>
  <NTable :columns="columns" :data="data" @selection-change="handleSelectionChange" />
</template>

<script setup>
const columns = [
  { type: 'selection' },
  { prop: 'name', label: '姓名' },
  { prop: 'age', label: '年龄' },
  { prop: 'address', label: '地址' },
]

const data = [
  { name: '张三', age: 20, address: '北京市' },
  { name: '李四', age: 25, address: '上海市' },
  { name: '王五', age: 30, address: '广州市' },
]

const handleSelectionChange = (selection) => {
  console.log('选中的行:', selection)
}
</script>

索引

设置 type="index" 来显示索引。

vue

<template>
  <NTable :columns="columns" :data="data" />
</template>

<script setup>
const columns = [
  { type: 'index' },
  { prop: 'name', label: '姓名' },
  { prop: 'age', label: '年龄' },
  { prop: 'address', label: '地址' },
]

const data = [
  { name: '张三', age: 20, address: '北京市' },
  { name: '李四', age: 25, address: '上海市' },
  { name: '王五', age: 30, address: '广州市' },
]
</script>

展开行

设置 type="expand" 和 #expand 插槽来实现展开行。

vue

<template>
  <NTable :columns="columns" :data="data">
    <template #expand="{ row }">
      <div style="padding: 16px;">
        <p>姓名: {{ row.name }}</p>
        <p>年龄: {{ row.age }}</p>
        <p>地址: {{ row.address }}</p>
      </div>
    </template>
  </NTable>
</template>

<script setup>
const columns = [
  { type: 'expand' },
  { prop: 'name', label: '姓名' },
  { prop: 'age', label: '年龄' },
  { prop: 'address', label: '地址' },
]

const data = [
  { name: '张三', age: 20, address: '北京市' },
  { name: '李四', age: 25, address: '上海市' },
  { name: '王五', age: 30, address: '广州市' },
]
</script>

高亮行

设置 highlight-current-row 属性来高亮当前行。

vue

<template>
  <NTable :columns="columns" :data="data" highlightCurrentRow @current-change="handleCurrentChange" />
</template>

<script setup>
const columns = [
  { prop: 'name', label: '姓名' },
  { prop: 'age', label: '年龄' },
  { prop: 'address', label: '地址' },
]

const data = [
  { name: '张三', age: 20, address: '北京市' },
  { name: '李四', age: 25, address: '上海市' },
  { name: '王五', age: 30, address: '广州市' },
]

const handleCurrentChange = (currentRow, oldCurrentRow) => {
  console.log('当前行:', currentRow)
}
</script>

固定表头

设置 height 属性来固定表头。

vue

<template>
  <NTable :columns="columns" :data="data" height="200" />
</template>

<script setup>
const columns = [
  { prop: 'name', label: '姓名' },
  { prop: 'age', label: '年龄' },
  { prop: 'address', label: '地址' },
]

const data = [
  { name: '张三', age: 20, address: '北京市' },
  { name: '李四', age: 25, address: '上海市' },
  { name: '王五', age: 30, address: '广州市' },
  { name: '赵六', age: 35, address: '深圳市' },
  { name: '钱七', age: 40, address: '杭州市' },
  { name: '孙八', age: 45, address: '成都市' },
]
</script>

隐藏表头

设置 show-header 为 false 来隐藏表头。

vue

<template>
  <NTable :columns="columns" :data="data" :showHeader="false" />
</template>

<script setup>
const columns = [
  { prop: 'name', label: '姓名' },
  { prop: 'age', label: '年龄' },
  { prop: 'address', label: '地址' },
]

const data = [
  { name: '张三', age: 20, address: '北京市' },
  { name: '李四', age: 25, address: '上海市' },
  { name: '王五', age: 30, address: '广州市' },
]
</script>

空数据

当没有数据时，会显示默认的空数据提示。

vue

<template>
  <NTable :columns="columns" :data="[]" />
  <div style="margin-top: 20px;">
    <NTable :columns="columns" :data="[]" emptyText="暂无数据，请先添加" />
  </div>
</template>

<script setup>
const columns = [
  { prop: 'name', label: '姓名' },
  { prop: 'age', label: '年龄' },
  { prop: 'address', label: '地址' },
]
</script>

表格尺寸

使用 size 属性来设置表格大小。

vue

<template>
  <div style="margin-bottom: 20px;">
    <NRadioGroup v-model="size">
      <NRadio value="large">大型</NRadio>
      <NRadio value="default">默认</NRadio>
      <NRadio value="small">小型</NRadio>
    </NRadioGroup>
  </div>
  <NTable :columns="columns" :data="data" :size="size" />
</template>

<script setup>
import { ref } from 'vue'
const size = ref('default')
const columns = [
  { prop: 'name', label: '姓名' },
  { prop: 'age', label: '年龄' },
  { prop: 'address', label: '地址' },
]

const data = [
  { name: '张三', age: 20, address: '北京市' },
  { name: '李四', age: 25, address: '上海市' },
  { name: '王五', age: 30, address: '广州市' },
]
</script>

超长文本提示

设置 show-overflow-tooltip 属性来在内容过长时显示提示。

vue

<template>
  <NTable :columns="columns" :data="data" />
</template>

<script setup>
const columns = [
  { prop: 'name', label: '姓名' },
  { prop: 'age', label: '年龄' },
  { prop: 'address', label: '地址', showOverflowTooltip: true },
]

const data = [
  { name: '张三', age: 20, address: '北京市海淀区中关村大街1号百度大厦' },
  { name: '李四', age: 25, address: '上海市浦东新区陆家嘴环路1000号恒生银行大厦' },
  { name: '王五', age: 30, address: '广州市天河区天河路385号太古汇' },
]
</script>

API

Props

属性	说明	类型	默认值
data	显示的数据	`any[]`	`[]`
columns	列配置	`TableColumn[]`	`[]`
height	Table 的高度，固定表头	`string \| number`	—
stripe	是否为斑马纹	`boolean`	`false`
border	是否带有纵向边框	`boolean`	`false`
size	Table 的尺寸	`'large' \| 'default' \| 'small'`	`'default'`
showHeader	是否显示表头	`boolean`	`true`
highlightCurrentRow	是否要高亮当前行	`boolean`	`false`
emptyText	空数据时显示的文本内容	`string`	`'暂无数据'`

TableColumn

属性	说明	类型	默认值
prop	字段名称	`string`	—
label	列标题	`string`	—
width	列宽度	`string \| number`	—
minWidth	列最小宽度	`string \| number`	—
fixed	列是否固定	`boolean \| 'left' \| 'right'`	`false`
sortable	对应列是否可以排序	`boolean \| 'custom'`	`false`
align	对齐方式	`'left' \| 'center' \| 'right'`	`'left'`
headerAlign	表头对齐方式	`'left' \| 'center' \| 'right'`	—
showOverflowTooltip	当内容过长被隐藏时显示 tooltip	`boolean`	`false`
type	列类型	`'selection' \| 'index' \| 'expand'`	—

Events

事件名	说明	类型
select	当用户手动勾选数据行的 Checkbox 时触发的事件	`(selection: any[], row: any) => void`
selectAll	当用户手动勾选全选 Checkbox 时触发的事件	`(selection: any[]) => void`
selectionChange	当选择项发生变化时会触发该事件	`(selection: any[]) => void`
cellClick	当某个单元格被点击时会触发该事件	`(row: any, column: any, cell: any, event: Event) => void`
cellDblclick	当某个单元格被双击击时会触发该事件	`(row: any, column: any, cell: any, event: Event) => void`
rowClick	当某一行被点击时会触发该事件	`(row: any, column: any, event: Event) => void`
rowDblclick	当某一行被双击时会触发该事件	`(row: any, column: any, event: Event) => void`
headerClick	当某一列的表头被点击时会触发该事件	`(column: any, event: Event) => void`
currentChange	当表格的当前行发生变化的时候会触发该事件	`(currentRow: any, oldCurrentRow: any) => void`
sortChange	当表格的排序条件发生变化的时候会触发该事件	`(args: { column: any; prop: string; order: any }) => void`

Slots

插槽名	说明	作用域
empty	空数据时的内容	—
expand	展开行的内容	`{ row, $index }`

Table 表格 ​

基础用法 ​

带斑马纹 ​

带边框 ​

固定列 ​

列宽 ​

列对齐 ​

排序 ​

多选 ​

索引 ​

展开行 ​

高亮行 ​

固定表头 ​

隐藏表头 ​

空数据 ​

表格尺寸 ​

超长文本提示 ​

API ​

Props ​

TableColumn ​

Events ​

Slots ​