# 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' => '是否刪除管理員？',
]
];
}
}
```
