Vue3+Vite+TypeScript+Element Plus开发-22.客制Table组件

 系列文档目录

Vue3+Vite+TypeScript安装

Element Plus安装与配置

主页设计与router配置

静态菜单设计

Pinia引入

Header响应式菜单缩展

Mockjs引用与Axios封装

登录设计

登录成功跳转主页

多用户动态加载菜单

Pinia持久化

动态路由 -动态增加路由

动态路由-动态删除路由 

路由守卫-无路由跳转404

 路由守卫-未登录跳转登录界面

 登录退出

Tags-组件构建

Tags-与菜单联动 

Pinia持久化优化

按钮权限

客制按钮组件

客制Table组件

客制Form组件

国际化

配置文件

---

 文章目录

目录

 系列文档目录

 文章目录

前言

子组件-Table组件构建

父组件-Table组件显示

演示效果

 后续

代码下载 

---

前言

上一章节讨论按钮组件构建与使用，本章节重点讨论Table组件构建与结合按钮组件使用。

---

子组件-Table组件构建

创建文件：  components/ActionTableCont.vue  

实现功能：

1. 栏位定义： 栏位配置由父组件传入，栏位可自定义隐藏。

2. 数据来源： 表格数据由父组件提供。

3. 勾选功能： 支持行数据的勾选操作。

4. 分页功能： 集成分页功能，支持数据分页显示。

父组件-Table组件显示

功能说明：

1. 按钮组件引用： 删除按钮默认不可用。

2. 表格组件引用： 每页显示 5 条数据。

3. 栏位数据模拟： 地址栏位默认隐藏。

4. 勾选功能：

        • 勾选数据后，删除按钮变为可用状态；

        • 未勾选任何数据时，删除按钮保持不可用状态。

5. 勾选数据展示： 勾选的数据会在表格下方空白处显示。

6. 删除按钮功能： 点击删除按钮时，获取勾选的数据。

演示效果

测试效果：

1. 地址栏位： 地址栏位未显示。

2. 数据加载： 数据被成功加载。

3. 分页显示： 页码与翻页功能显示正确。

4. 删除按钮： 删除按钮默认不可用。

测试效果：

1. 勾选操作：

        • 勾选任意数据后，删除按钮显示，选中数据显示勾选资料

        • 未勾选任何数据时，删除按钮不显示。

2. 全选与全取消：

        • 支持全选操作，全选后删除按钮显示，选中数据显示勾选资料

        • 支持全取消操作，全取消后删除按钮不显示。

测试效果：

1. 每页显示笔数： 每页显示的记录数正确。

2. 页码选择： 页码选项可正常选择。

3. 前往页码： 支持跳转到指定页码。

---

 后续

本章节主要介绍：客制化 Table 组件的实现。下一章节将讨论：Form 组件的构建。

---

代码下载 

GitCode - 全球开发者的开源社区,开源代码托管平台GitCode是面向全球开发者的开源社区,包括原创博客,开源代码托管,代码协作,项目管理等。与开发者社区互动,提升您的研发效率和质量。https://gitcode.com/sen_shan/ssVue3Demo.gitss.vue3.demo: 本项目以 Vue3、Vite、TypeScript、Element Plus 为核心框架，结合 Vue Router、Element Plus Icons、Less、Axios、Pinia、Mock 等技术，初始的构建登录，主界面，权限控制，按钮组件，table组件，form组件等小模型，可以随意搭建web管理系统https://gitee.com/sen_shan/ssVue3Demo.git