# UI表格
根据数据库生成的表格文件在app/ui/table目录下。**生成的代码格式可能有点问题，可通过编辑器自动格式化一下**
表格是我用php封装的element表格，第一个版本扩展性还有待提高 [https://element.eleme.cn/#/zh-CN/component/table](https://element.eleme.cn/#/zh-CN/component/table)
一个table文件格式如下：
```
class DemoTable extends TableInterface
{
public function header()
{
return [
'id' => ['label' => 'ID', 'sort' => true, 'fixed' => 'left', 'width' => 80],
'username' => ['label' => '用户名', 'filter' => [1 => 'john', 2 => 'jack']],
'real_name' => ['label' => '姓名', 'filter' => [1 => '老钱', 2 => '老王'], 'multiple' => true],
'avatar' => ['label' => '头像', 'type' => 'image'],
//'avatarHtml' => ['label' => '头像', 'type' => 'html'], //如果内容是html，需要渲染其中的标签，可用此type
'images' => ['label' => '相册', 'type' => 'images'], //多图，点击相册模式预览
'sex' => '性别',
'status' =>[
'label' => '状态',
'type' => 'switch', // switch选项
'ajax' => true,
'active-value' => 1, //选中的值
'inactive-value' => 2, //未选中的值
'url' => '这里填变更接口的地址，例如：/admin/user/changeStatus',
'vars' =>['id', 'status']
],
'more' => [
'label' => '更多管理',
'type' => 'link', //链接类型
'width' => 120, //宽度
'linkConfig' => [
[
'key' => 'id',
'label' => '管理', //显示文字
'type' => 'link',
'icon' => 'el-icon-more', // 图标，可省略
'url' => '链接，同上',
'vars' =>['id'], //id@task_id可为设置别名，参数会修改为?task_id=数据中id的值
'blank' => true, //新标签打开
'blankName' => '更多管理' //新标签名称
],
]
],
'dialogConfig' => [
'label' => '更多管理',
'type' => 'dialog', //链接类型
'width' => 120, //宽度
'linkConfig' => [
[
'key' => 'id',
'label' => '管理', //显示文字
'type' => 'dialog',
'icon' => 'el-icon-more', // 图标，可省略
'url' => '链接，同上',
'vars' =>['id'],
'dialogWidth' => '600', //宽度，可不填，最宽1300
'dialogHeight' => '600', //高度，可不填， 默认全屏
],
]
],
'create_time' => ['label' => '创建时间', 'sort' => true],
];
}
public function filters()
{
return [
'id' => ['label' => 'ID', 'type' => 'text'],
'create_time' => ['label' => '时间', 'type' => 'date'],
'create_times' => ['label' => '时间范围', 'type' => 'daterange'],
'avatar' => ['label' => '头像', 'type' => 'select', 'value' => ['类型1', '类型2']],
'avatars' => ['label' => '头像多选', 'type' => 'select', 'value' => ['类型3', '类型4'], 'multiple' => true],
'area' => [
'label' => '地区',
'type' => 'cascader',
'multiple' => true,
'checkStrictly' => true,
'value' => [
[
'label' => '选项一',
'value' => '1',
'children' => [['label' => '选项一.1', 'value' => '1.1'], ['label' => '选项一.2', 'value' => '1.2']]
],
[
'label' => '选项二',
'value' => '2',
'children' => [['label' => '选项二.1', 'value' => '2.1'], ['label' => '选项二.2', 'value' => '2.2']]
],
]
]
];
}
public function ops()
{
return [
'edit' => [
'type' => 'link',
'label' => '编辑',
'icon' => 'el - icon - edit',
'url' => '/thinkadmin/user/edit',
'vars' => ['id'],
],
'del' => [
'type' => 'ajax',
'label' => '删除',
'icon' => 'el - icon - delete',
'url' => '/thinkadmin/user/delete',
'vars' => ['id'],
'confirm' => '是否删除管理员？',
]
];
}
}
```
