VUE3组件分析：CRUDTable 表格组件

徐福记c

于 2025-05-05 22:26:47 发布

阅读量971

点赞数 14

分类专栏： fast-soy-admin-dev 开发脚手架文章标签：状态模式

本文链接：https://blog.csdn.net/xuukai/article/details/147723765

版权

fast-soy-admin-dev 开发脚手架专栏收录该内容

167 篇文章

订阅专栏

CRUDTable 组件集成了表格展示、查询、分页、数据加载、行选择等功能。适用于多种需要展示数据列表并进行 CRUD 操作的场景，如用户管理、角色管理、资源管理等，只需根据具体的业务需求配置相应的属性和插槽内容即可。

数据展示

表格形式呈现数据 ：通过 n-data-table 组件将数据以表格的形式展示出来，能够清晰、直观地呈现多条数据记录及其各个字段的信息，方便用户查看和浏览数据列表。

灵活的列配置 ：可以根据不同的业务需求，通过 columns 属性自定义表格的列，包括列的标题、对应的数据字段、列宽、是否可排序等，以展示所需的数据字段和格式。

查询功能

查询条件构建 ：结合 QueryBar 组件，允许用户在查询栏中输入查询条件，如关键词、日期范围等，通过 queryItems 属性接收和管理这些查询条件，用于对数据进行筛选。

查询操作 ：提供查询和重置按钮，用户点击查询按钮时，触发 handleSearch 方法，根据当前的查询条件获取并展示符合查询条件的数据；点击重置按钮时，调用 handleReset 方法，清空查询条件并重新获取数据，恢复到初始展示状态。

分页功能

分页展示数据 ：支持分页展示大量数据，通过 isPagination 属性控制是否启用分页，避免一次性加载过多数据导致页面性能问题。

分页配置灵活 ：pagination 属性提供了丰富的分页配置选项，如当前页码、每页大小、可选的每页大小列表等，用户可以根据需要调整分页参数来查看不同页的数据。

后端与前端分页 ：通过 remote 属性区分后端分页和前端分页模式，在后端分页时将分页参数传递给后端接口，由后端返回对应页的数据和总条数；在前端分页时，先获取所有数据，然后在前端进行分页处理。

数据加载与状态管理

数据加载状态显示 ：使用 loading 属性控制数据加载状态的显示，在获取数据过程中展示加载状态提示（如 loading 动画），提高用户体验，避免用户在数据加载未完成时进行误操作。

数据获取与更新 ：通过 getData 函数获取表格数据，并在查询、重置、分页变化等操作后及时更新表格数据，确保展示的数据是最新的。

行选择功能

支持行选择 ：如果表格中包含复选框列（通过 columns 配置），则支持用户选择多行数据，并通过 onChecked 方法获取选中的行键值，方便进行批量操作，如批量删除、批量更新等。

事件交互

触发事件通知 ：通过定义和触发各种事件（如 'update:queryItems'、'onChecked'、'onDataChange'），与父组件或其他组件进行交互，使父组件能够及时获取到表格相关的操作信息和数据变化，从而执行相应的业务逻辑。

一、组件功能概述

这是一个基于NaiveUI数据表格封装的通用CRUD组件，主要实现：

数据列表展示
分页处理（支持前后端分页）
查询条件管理
行选择功能
数据加载状态管理
统一的参数处理机制

二、核心代码结构解析

<template>
  <!-- 分三部分：查询栏、数据表格、分页组件 -->
</template>

<script setup>
// 使用Vue3的组合式API（重点学习这种写法）
</script>

三、关键Props详解（重点掌握）

remote

remote: Boolean // true=后端分页，false=前端分页

使用技巧：当数据量小时（<1000条）可用前端分页减轻服务器压力

columns

columns: Array // 必须符合NaiveUI的column规范

开发技巧：建议单独创建columns.js文件维护表格列配置

getData

getData: Function // 必须返回符合接口规范的数据

接口规范示例：

async function getData(params) {
  return {
    data: [],    // 数据列表
    total: 100   // 总条数（分页必需）
  }
}

queryItems

queryItems: Object // 绑定查询表单的模型

技巧：使用v-model双向绑定实现查询条件管理

四、使用示例（重点）

<template>
  <CrudTable
    :columns="columns"
    :getData="fetchData"
    v-model:queryItems="queryForm"
  >
    <template #queryBar>
      <n-input v-model:value="queryForm.name" />
    </template>
  </CrudTable>
</template>

<script setup>
// 数据获取示例
const fetchData = async (params) => {
  const { data } = await axios.get('/api/users', { params })
  return {
    data: data.list,
    total: data.total
  }
}
</script>

五、实用开发技巧

分页处理技巧

后端分页时，接口需要接收page和page_size参数
前端分页时，组件会自动处理数据切片

查询条件重置

// 初始化时需要保存初始值
const initQuery = { ...props.queryItems }

性能优化

:row-key="(row) => row[rowKey]" // 确保使用唯一标识提升渲染性能

扩展参数

:extraParams="{ fixedParam: 1 }" // 传递固定参数到查询接口

状态管理

defineExpose() // 暴露操作方法给父组件

六、事件系统

@onChecked：行选择事件
@onDataChange：数据变化事件
@update:queryItems：查询条件更新事件

七、样式定制

使用mb-30等原子化CSS类
通过scroll-x控制表格横向滚动
分页样式通过prefix插槽定制

八、新手常见问题解决方案

表格不更新数据？

检查getData是否返回正确的数据结构
确认分页参数是否传递正确

查询条件无效？

检查queryItems是否正确绑定
确保表单字段与接口参数匹配

分页显示异常？

检查itemCount是否正确赋值总条数
确认remote参数设置是否正确