登录
注册
开源
企业版
高校版
搜索
帮助中心
使用条款
关于我们
开源
企业版
高校版
私有云
模力方舟
AI 队友
登录
注册
Gitee 年度开源项目评选中~
代码拉取完成,页面将自动刷新
开源项目
>
WEB应用开发
>
后台管理框架
&&
捐赠
捐赠前请先登录
取消
前往登录
扫描微信二维码支付
取消
支付完成
支付提示
将跳转至支付宝完成支付
确定
取消
Watch
不关注
关注所有动态
仅关注版本发行动态
关注但不提醒动态
138
Star
2.2K
Fork
3.5K
疯狂的狮子Li
/
plus-ui
代码
Pull Requests
0
Wiki
统计
流水线
服务
质量分析
Jenkins for Gitee
腾讯云托管
腾讯云 Serverless
悬镜安全
阿里云 SAE
Codeblitz
SBOM
我知道了,不再自动展开
253
新增表格通用组件、搜索通用组件
已关闭
尹琦:新增表格通用组件、搜索通用组件
疯狂的狮子Li:dev
尹琦
创建于 2025-12-11 16:53
克隆/下载
HTTPS
SSH
复制
下载 Email Patch
下载 Diff 文件
### 更改目的 1. 页面模板标准化 问题:每个列表页面都需要重复编写表格、搜索、工具栏等UI结构和逻辑 解决:提供了一套完整的列表页模板,包含搜索、表格、分页、操作栏的标准布局 价值:新开发者只需关注业务数据,无需从零搭建页面结构 2. 配置化开发体验 问题:传统方式需要手动编写大量表单元素和表格列定义 解决:通过configs数组配置搜索项,columns数组配置表格列 价值:声明式配置替代命令式编码,减少重复代码量约70% 3. 数据流统一管理 问题:搜索参数、分页参数、表格数据、选中状态分散管理 解决:集中式的search.data、table对象管理所有状态 价值:状态变更逻辑清晰,避免数据同步问题 4. 权限与操作一致性 问题:每个页面的工具栏权限控制、操作按钮样式不统一 解决:封装toolbar-button组件统一处理新增、编辑、删除的权限和状态 价值:统一用户体验,简化权限集成 ### 改动逻辑 这么写的思路 1. 搜索区域设计 一行折叠:搜索项超出一行时自动折叠,保持页面整洁 类型扩展:预留了自定义类型接口,方便扩展组件 字典集成:内置字典转换,减少前端写死选项 2. 表格区域设计 列类型化:内置checkbox、number等常用列类型 TSX支持:提供render函数,实现复杂渲染逻辑 字典集成:与搜索组件共享字典系统 权限集成:通过props控制按钮显示权限 状态联动:根据选中数据自动禁用按钮 插槽扩展:prefix/suffix插槽支持自定义按钮 事件统一:标准化事件命名 ### 测试 都做了哪些测试 1. 搜索组件测试 ✅ 基础功能 输入框:正常输入、清空 下拉框:选择选项、字典转换 日期选择器:单日期、日期范围选择 自动完成:输入提示、选择项 ✅ 交互功能 搜索按钮:触发search事件,携带正确参数 重置按钮:清空表单,触发reset事件 折叠展开:搜索项超一行时折叠/展开正常 2. 表格组件测试 ✅ 数据展示 基本数据:正确渲染所有列 字典列:字典值正确转换显示 序号列:自动生成连续序号 空状态:无数据时显示空表格 ✅ 行操作 复选框:单选/全选/取消选择 行样式:rowClassName按条件应用样式 操作列:查看按钮点击触发事件 ✅ 分页功能 页码切换:数据重新加载 分页大小:切换每页条数 跳转页码:直接跳转到指定页 3. 工具栏测试 ✅ 按钮状态 无选中:删除/编辑按钮禁用 单选:编辑按钮启用 多选:删除按钮启用,编辑按钮禁用 权限控制:无权限按钮不显示 ✅ 按钮操作 新增:打开新增弹窗/页面 编辑:打开编辑弹窗,传入选中数据 删除:确认对话框,批量删除 自定义按钮:插槽按钮正常显示和点击 ### 示例代码 1.demo/tableDemo/index.vue 文件 2.使用效果  
此 Pull Request 需要通过一些审核项
类型
指派人员
状态
审查
疯狂的狮子Li
进行中
(0/1人)
怎样手动合并此 Pull Request
git checkout dev
git pull https://gitee.com/yin-qi/plus-ui.git 新增表格通用组件、搜索通用组件
git push origin dev
评论
2
提交
1
文件
18
检查
代码问题
0
批量操作
展开设置
折叠设置
审查
Code Owner
审查人员
May
sgs98
KonBAI
KonBAI-Q
三个三
thiszhc
玲娜贝er
dapppp
秋辞未寒
ColorDreams
孤舟烟雨
gzyy
Lau
devlau
疯狂的狮子Li
JavaLionLi
LiuHao
lhailgl
未设置
最少人数
1
测试
May
sgs98
KonBAI
KonBAI-Q
三个三
thiszhc
玲娜贝er
dapppp
秋辞未寒
ColorDreams
孤舟烟雨
gzyy
Lau
devlau
疯狂的狮子Li
JavaLionLi
LiuHao
lhailgl
未设置
最少人数
0
优先级
不指定
严重
主要
次要
不重要
标签
标签管理
未设置
关联 Issue
未关联
Pull Request 合并后将关闭上述关联 Issue
里程碑
未关联里程碑
参与者
(2)
TypeScript
1
https://gitee.com/JavaLionLi/plus-ui.git
git@gitee.com:JavaLionLi/plus-ui.git
JavaLionLi
plus-ui
plus-ui
点此查找更多帮助
搜索帮助
Git 命令在线学习
如何在 Gitee 导入 GitHub 仓库
Git 仓库基础操作
企业版和社区版功能对比
SSH 公钥设置
如何处理代码冲突
仓库体积过大,如何减小?
如何找回被删除的仓库数据
Gitee 产品配额说明
GitHub仓库快速导入Gitee及同步更新
什么是 Release(发行版)
将 PHP 项目自动发布到 packagist.org
评论
仓库举报
回到顶部
登录提示
该操作需登录 Gitee 帐号,请先登录后再操作。
立即登录
没有帐号,去注册