表格
约 1801 字大约 6 分钟
2025-11-07
在线预览
地址
基础
简介
表格列表页面是后台管理系统中最常见的页面之一,用于展示和管理数据列表。在 DeAdmin 中,我们提供了灵活且强大的表格组件,支持自定义表头、列宽、排序等功能,满足各种业务需求。 支持大部分常见的需求功能,如:搜索栏、头部操作栏、底部操作栏、内置列、默认请求参数、合计等。
开发时编辑
快速的开发体验,一个表格只要勾选字段即可完成开发,无需编写任何代码
支持快速勾选需要选择的字段,拖拽排序字段显示顺序,拖动列宽,单个列头右键菜单后编辑详细自定义等。 更多配置还可以菜单设置中进行设置,比如设置表格的大小,滚动宽度,分页配置等
列的条件显示
编辑该列设置显示条件
{ "record": "当前请求返回search数据", "user": "当前登录用户" }示例 {{user.role_id == 1}} 表示如果用户的角色 id 为 1 则显示该列
搜索栏
编辑需要搜索的列,勾选可搜索,如果只要搜索不展示在列表中,勾选表中隐藏即可
Toolbar 头部操作栏
位于表头头部的操作栏展示,提交数据默认带入 ids:[] 所勾选的表格数据
- 1.插入字段类型选择
头部操作栏 - toolbar - 2.更多设置中编辑自定义 dom(自定义组件设置)
- 3.提供
导出及导入两种字段类型,快速展示出该两个功能按钮,默认 url + export | import 后台逻辑需要自行实现
Selectbar 底部操作栏
位于表格底部操作栏展示,需要勾选表格数据后才会展示,提交数据默认带入 ids:[] 所勾选的表格数据
- 1.插入字段类型选择
底部选择操作栏 - selectbar - 2.更多设置中编辑自定义 dom(自定义组件设置)
- 3.默认加入批量删除功能,菜单编辑中关闭可删除后不展示该按钮
- 4.默认保留字段名称 请求返回数据 search.states 有数据的话会展示该批量设置按钮,如
启用禁用
内置列
- 1.排序功能 字段
displayorder默认在列表中展示排序输入框 输入后修改该记录排序值 - 2.操作栏 默认包含
编辑删除3 个功能按键,菜单关闭可编辑可删除后 隐藏编辑和删除 - 3.可添加自定义列,在 dom 中添加
查看按钮。或其它操作按钮
默认请求参数
当前页面需要自带自定义参数时使用 在编辑菜单页面 - 其他配置中加入下方设置
{
"paramExtra": {
"key_name": "key_value"
}
}summary 合计
在数据接口中返回 search.summary 字段
public function handleSearch($search = [])
{
$m = $this->getModel();
$search['summary'] = '<span style="color:red">合计 :可以是一段自定义html</span>';
return [$m, $search];
}搜索
相关信息
这里我们使用搜索会员性别为例
编辑模型添加搜项
这里添加设置后会在 php 文件中自动加入该项的搜索设置,如果取消这部的话需要自己在 php 控制器中加入搜索逻辑代码
添加一行搜索配置 url 参数名称 填入 gender(url 名称就是请求后台的参数名,可以自由设置)
搜索类型选择
=,这里支持=,like,whereBetween,whereIn,has,doesntHave字段选择 gender 字段,字段支持选择多个

保存后 php 代码会变成这样
$this->search_config = [
[
'name' => 'gender',
'columns' => [
'gender',
],
'where_type' => '=',
],
];在列表页面加入搜索设置
因为当前性别列在列表中已经以自定义组件显示,所以搜索字段需要新增一列

设置默认的表单值
在当前项设置中,整体配置加入 initialValue 值即可设置默认搜索值 加入默认值后点击重置按钮搜索项默认会使用该默认值,只有点击搜索项的 × 按钮后再点击搜索才不会使用默认值搜索。 之前使用 ret.search.values 后配置这个默认值,导致必须 1.后台获取搜索值的时候前端未传值后会使用默认值,导致无法清空搜索值。 ps:现在直接在配置中设置默认值。日期的话使用 dayjs 代码后程序直接会进行格式化。
{
"initialValue": 1
}日期格式化 使用dayjs组件自行设置
{
"initialValue": "{{dayjs().format('YYYY-MM-DD')}}"
}搜索功能完成 效果图

Tab 筛选
相关信息
tab 筛选一般是列表中优先级最高的快捷检索,一般默认都会是数据的启用与禁用的状态,这次我们以会员的性别和启用禁用状态作为示例来设置列表页的tab筛选
设置模型字段支持 tab
可以设置多个字段是否支持 tab,开启后列表返回数据会将可选数据放入到 table_menu 数据中以供前端消费

在列表中设置
相关信息
备注 开启 tab 筛选至少要 在搜索表单中或者列表中有展示,不然下次找不到设置的地方了。
- 先设置状态字段 点击开启 tab

- 效果如下

切换为性别筛选
- 关闭刚才勾选的状态 tab
- 在性别设置中开启 tab
- 效果如下

设置默认选中项
- 假设我们默认要选中 女
- 编辑当前菜单在其它配置中加入
table_menu_default的配置 这里填入female 
- 如果当前未选中或者刷新当前页面后默认选中的就是 female 的 tab 了

去掉 tab 默认追加的 全部选项
默认开启 tab 后是会加入全部这个选项的,默认页是选中这个全部选项 关闭这个设置的话
- 编辑当前菜单,在其它配置中配置
table_menu_all:false 
- 效果如下图

卡片列表
简介
相关信息
卡片式列表适用于显示字段较少,包含封面图,标题,描述,及个别显示字段的信息展示。常用于项目,会员等信息展示
配置
配置和 table 差不多,需要额外的选项显示配置如下图所示

支持功能
- 功能和 table 基本相同,下面是不同点
- 勾选 使用 checkcard 的样式展示
- 除了固定的封面,标题,描述外,最后一行展示是使用 flex 布局,可以插入自定显示信息。支持类型为 option 和 自定义组件,内容显示。
整体效果显示

总结
相关信息
该组件直接使用 ProList 封装,得益于 ProList 是基于 ProTable 的,所以我们实现这个功能只要继续向下拓展 SaTable,然后实现单个信息的 coverItem 卡片样式的显示即完成该功能