Naive UI 数据表格高级用法：排序、筛选与分页的实现

Naive UI 数据表格高级用法：排序、筛选与分页的实现

【免费下载链接】naive-ui A Vue 3 Component Library. Fairly Complete. Theme Customizable. Uses TypeScript. Fast. 项目地址: https://gitcode.com/gh_mirrors/na/naive-ui

在现代Web应用开发中，数据表格（Data Table）是展示和处理结构化数据的核心组件。Naive UI作为基于Vue 3的高质量组件库，提供了功能完备、性能优异的数据表格解决方案。本文将详细介绍如何利用Naive UI的n-data-table组件实现排序、筛选和分页等高级功能，帮助开发者快速构建专业级数据管理界面。

数据表格基础配置

Naive UI的数据表格组件n-data-table位于项目的src/data-table/目录下，其核心实现文件为src/data-table/src/DataTable.tsx。使用前需先通过columns定义表格结构，通过data提供数据源：

<template>
  <n-data-table :columns="columns" :data="data" />
</template>

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

const data = [
  { key: 0, name: '张三', age: 28, address: '北京市海淀区' },
  { key: 1, name: '李四', age: 32, address: '上海市浦东新区' }
]
</script>

排序功能实现

排序功能允许用户根据列数据调整表格展示顺序，Naive UI支持单列排序、多列排序和自定义排序逻辑。

基础排序配置

在columns中设置sorter属性即可启用排序，系统提供默认排序（字符串按字母顺序，数字按大小）：

const columns = [
  { 
    title: '姓名', 
    key: 'name',
    sorter: 'default' // 启用默认排序
  },
  { 
    title: '年龄', 
    key: 'age',
    sorter: (row1, row2) => row1.age - row2.age // 自定义数字排序
  }
]

多列排序

通过sorter配置中的multiple属性可实现多列排序，优先级通过数值指定：

const columns = [
  { 
    title: '姓名', 
    key: 'name',
    sorter: {
      multiple: 1, // 优先级1（最高）
      compare: (a, b) => a.name.localeCompare(b.name)
    }
  },
  { 
    title: '年龄', 
    key: 'age',
    sorter: {
      multiple: 2, // 优先级2
      compare: (a, b) => a.age - b.age
    }
  }
]

相关实现可参考src/data-table/demos/zhCN/multiple-sorter.demo.vue中的示例代码。

受控排序

通过sortOrder属性可实现受控排序，精确控制排序状态：

const columns = [
  { 
    title: '姓名', 
    key: 'name',
    sortOrder: 'ascend' // 强制升序排列
  }
]

筛选功能实现

筛选功能允许用户根据条件快速定位所需数据，Naive UI支持内置筛选和自定义筛选菜单。

基础筛选配置

通过filterOptions定义筛选选项，filter函数实现筛选逻辑：

const columns = [
  { 
    title: '地址', 
    key: 'address',
    filterOptions: [
      { label: '北京', value: '北京' },
      { label: '上海', value: '上海' }
    ],
    filter: (value, row) => row.address.includes(value)
  }
]

自定义筛选菜单

通过renderFilterMenu可以自定义筛选界面，满足复杂筛选需求：

const columns = [
  { 
    title: '年龄', 
    key: 'age',
    renderFilterMenu: () => {
      return h('div', [
        h('n-input', { 
          placeholder: '最小年龄',
          onInput: (value) => handleAgeFilter(value)
        })
      ])
    }
  }
]

自定义筛选实现可参考src/data-table/demos/zhCN/custom-filter-menu.demo.vue。

手动触发筛选

通过表格ref可手动调用筛选方法：

const tableRef = ref(null)

// 筛选地址为"北京"的数据
const filterBeijing = () => {
  tableRef.value.filter({
    address: ['北京']
  })
}

// 清除所有筛选
const clearFilters = () => {
  tableRef.value.filter(null)
}

分页功能实现

分页功能通过拆分大量数据提高表格性能和用户体验，Naive UI提供完整的分页控制能力。

基础分页配置

通过pagination属性配置分页参数：

const pagination = {
  pageSize: 10, // 每页显示10条
  pageCount: 10, // 总页数
  showSizePicker: true, // 显示每页条数选择器
  pageSizes: [5, 10, 20], // 可选每页条数
  showQuickJumper: true // 显示快速跳转
}

在模板中应用：

<n-data-table 
  :columns="columns" 
  :data="data" 
  :pagination="pagination"
/>

受控分页

通过监听分页事件实现受控分页，适用于后端数据加载场景：

const pagination = reactive({
  page: 1,
  pageSize: 10,
  onChange: (page) => {
    // 页码变化时触发，可用于加载新页数据
    loadData(page, pagination.pageSize)
  },
  onUpdatePageSize: (pageSize) => {
    // 每页条数变化时触发
    pagination.pageSize = pageSize
    loadData(1, pageSize) // 重置为第一页
  }
})

详细实现可参考src/data-table/demos/zhCN/controlled-page.demo.vue。

综合示例：排序、筛选与分页结合使用

以下是一个完整的综合示例，展示如何同时使用排序、筛选和分页功能：

<template>
  <n-space vertical :size="16">
    <n-data-table
      ref="tableRef"
      :columns="columns"
      :data="data"
      :pagination="pagination"
    />
  </n-space>
</template>

<script setup>
import { ref, reactive } from 'vue'

// 表格列定义
const columns = [
  {
    title: '姓名',
    key: 'name',
    sorter: 'default',
    defaultSortOrder: 'ascend'
  },
  {
    title: '年龄',
    key: 'age',
    sorter: (a, b) => a.age - b.age
  },
  {
    title: '地址',
    key: 'address',
    filterOptions: [
      { label: '北京', value: '北京' },
      { label: '上海', value: '上海' },
      { label: '广州', value: '广州' }
    ],
    filter: (value, row) => row.address.includes(value)
  }
]

// 分页配置
const pagination = reactive({
  pageSize: 5,
  pageSizes: [5, 10, 20],
  showSizePicker: true
})

// 模拟数据
const data = Array.from({ length: 50 }).map((_, i) => ({
  key: i,
  name: ['张三', '李四', '王五', '赵六'][i % 4],
  age: 20 + Math.floor(Math.random() * 20),
  address: ['北京', '上海', '广州', '深圳'][i % 4] + '市' + ['朝阳区', '海淀区', '浦东新区'][i % 3]
}))
</script>

性能优化建议

当处理大量数据时，可通过以下方式优化性能：

1. 虚拟滚动：启用virtual-scroll属性，只渲染可视区域数据
2. 懒加载：结合分页实现数据懒加载，减少初始加载时间
3. 列虚拟化：当列数较多时启用column-virtualization

相关配置可参考src/data-table/src/DataTable.tsx中的性能优化参数。

总结与扩展阅读

本文介绍了Naive UI数据表格的排序、筛选和分页功能的实现方法。通过灵活配置这些功能，可以构建出功能完备、用户体验优秀的数据管理界面。更多高级用法可参考：

• 官方文档：README.zh-CN.md
• 完整API：src/data-table/src/DataTable.tsx
• 更多示例：src/data-table/demos/

掌握这些技能后，您可以根据实际业务需求，进一步定制数据表格的外观和功能，打造符合项目特色的数据管理解决方案。

【免费下载链接】naive-ui A Vue 3 Component Library. Fairly Complete. Theme Customizable. Uses TypeScript. Fast. 项目地址: https://gitcode.com/gh_mirrors/na/naive-ui