数据表格

TIP

当前数据库设计规范参考fastadmin和BuildAdmin，在原有的基础上，实现无需代码自动根据数据库直接实现CRUD。

基础用法

数据表格是有两个action的，一个为table另外一个为index，table用于创建表格结构，index用于获取对应模型的数据。并且表格是需要配合vue中的dk-table组件，在dk-table中自动实现了dk-form。

PHP代码示例



namespace addons\gs_demo\controller\admin;

use addons\gs_demo\model\ProjectModel;
use app\common\services\table\DataTable;
use hiduoke\controller\AddonsController;

class Project extends AddonsController
{
    /**
     * @var ProjectModel
     */
    protected $model;

    public function initialize(): void
    {
        parent::initialize();
        $this->model = new ProjectModel();
    }
    /**
     * 查看
     * @throws Throwable
     */
    public function index()
    {
        if ($this->request->param('select')) {
            return $this->select();
        }
        list($where, $alias, $limit, $order) = $this->queryBuilder();
        $res = $this->model
            ->field($this->indexField)
            ->withJoin($this->withJoinTable, $this->withJoinType)
            ->alias($alias)
            ->where($where)
            ->order($order)
            ->paginate($limit);
        return $this->success('', [
            'list'  => $res->items(),
            'total' => $res->total(),
        ]);
    }

    /**
     * 表格
     * @return \think\response\Json
     */
    public function table()
    {
        $DataTable = (new DataTable($this->model));
        if ($this->request->param('recycle')) {
            // 回收站
            $DataTable->field([$this->model->getPk(), 'delete_time']);
        }
        $table_column = $DataTable->operation()->create();
        return $this->success('ok', ['column' => $table_column, 'pk' => $this->model->getPk()]);
    }

}

Vue示例

使用dk-table即可直接实现数据表格中CRUD

<template>
  <dk-table ref="DkTableRef" table-api="/gs_demo/admin.project" :cache-table="false"></dk-table>
</template>
<script setup lang="ts">
  import { ref, onMounted } from 'vue'
  const DkTableRef = ref()
  onMounted(() => {
    DkTableRef.value.DkTable.onClickButton((event, data) => {
      console.log('event', event, data)
    })
  })
</script>

DkTable属性

属性名	说明	类型	可选值	默认值
tableApi	接收php后端api地址	string	——
cacheTable	是否缓存表格配置	boolean	——	true

Ref 属性

一些自定义的写法可以使用ref中暴露的属性来实现。

属性	说明
DkTable	DkTableClass的对象
TableRef	DkTable中ElTable的Ref
FormRef	DkTable中DkForm的Ref

设置字段

可以通过field设置要使用的字段名称

$table_column = $DataTable
    ->field(['title','cover_image','create_time','update_time'])
    ->operation()->create();

自定义字段类型

DataTable可以通过数据库结构自动获取到对应的字段类型，进而渲染对应的样式，设置字段的render即可。

此方法用于指定列的渲染器类型。可接受的渲染器类型包括:

值	描述
icon	显示图标
switch	显示开关控件
image	显示单个图片
images	显示图片列表
tag	显示标签
tags	显示标签列表
url	显示链接
datetime	显示日期时间
time	时间
year	年
color	显示颜色
buttons	显示按钮组
customRender	使用自定义渲染函数
slot	使用插槽

buttons按钮组

参数名	描述	示例值
render	按钮渲染器类型	moveButton / confirmButton / tipButton / basicButton
name	按钮的唯一标识名称，内置默认有几个	weigh-sort / edit / delete
title	按钮标题,鼠标移上去显示	拖拽排序
text	按钮文本内容	编辑
type	按钮样式类型	info / primary / danger / waring
icon	图标类名，用于展示按钮图标，参考Element图标	Rank / Edit / Delete
class	按钮自定义CSS类名	table-row-weigh-sort
disabledTip	是否禁用按钮并显示提示信息（默认为false）	false
popconfirm	额外配置（confirmButton） - 确认弹窗参数
└── confirmButtonText	确认按钮文本	确认删除
└── cancelButtonText	取消按钮文本	关闭
└── confirmButtonType	确认按钮样式类型	danger
└── title	弹窗提示标题	您确定要删除所选记录吗？

表格按钮详情

拖拽排序按钮：
- render: moveButton
- name: weigh-sort
- 类型与样式：info，带有Rank图标
编辑按钮：
- render: tipButton
- name: edit
- 类型与样式：primary，带有Edit图标
删除按钮：
- render: confirmButton
- name: delete
- 类型与样式：danger，带有Delete图标
- 额外功能：点击后出现确认弹窗，需确认后执行删除操作

# 数据表格

# 基础用法

# PHP代码示例

# Vue示例

# DkTable属性

# Ref 属性

# 设置字段

# 自定义字段类型

# buttons按钮组

# 自定义插槽