基础 CRUD

最简单的 CRUD 页面示例。

代码示例

<script setup lang="ts">
import { ref } from "vue";
import { useState, PageTemplate, Table } from "vue-admin-kit";
import type { PageTemplateExposed } from "vue-admin-kit";
import { listData, addData, updateData, deleteData, getData } from "@/api/data";

const pageTemplateRef = ref<PageTemplateExposed>();

useState({
  api: {
    list: listData,
    add: addData,
    edit: updateData,
    delete: deleteData,
    detail: getData,
  },
  searchConfig: [
    { type: "input", prop: "name", label: "名称" },
    { type: "select", prop: "status", label: "状态", dictType: "sys_status" },
  ],
  formConfig: [
    { type: "input", prop: "name", label: "名称", required: true },
    { type: "select", prop: "status", label: "状态", dictType: "sys_status" },
  ],
  columnsConfig: [
    { type: "checkbox", width: 50 },
    { type: "seq", title: "序号", width: 60 },
    { field: "name", title: "名称", minWidth: 120 },
    {
      field: "status",
      title: "状态",
      dictType: "sys_status",
      displayType: "tag",
    },
    { field: "createTime", title: "创建时间", width: 160 },
  ],
  tableOptions: {
    tableOperationConfig: [
      {
        title: "新增",
        icon: "Plus",
        type: "primary",
        onClick: () => pageTemplateRef.value?.handleAdd(),
      },
    ],
    operateColumns: [
      {
        title: "编辑",
        onClick: (row) => pageTemplateRef.value?.handleEdit(row),
      },
      {
        title: "删除",
        type: "danger",
        onClick: (row) => pageTemplateRef.value?.handleDelete(row),
      },
    ],
  },
});
</script>

<template>
  <PageTemplate ref="pageTemplateRef">
    <template #table>
      <Table />
    </template>
  </PageTemplate>
</template>

说明

1. 使用 useState 配置页面状态
2. api 配置 CRUD 接口
3. searchConfig 配置搜索表单
4. formConfig 配置新增/编辑表单
5. columnsConfig 配置表格列
6. tableOptions 配置工具栏和操作列