Sable Admin 文档：使用 JSON 配置生成表格

基本用法

表格展示列

默认为文本展示，可以设置为图片、标签、日期等展示方式。

可选值为： image | tags | date

table.config.ts

export const UserTableField = makeColumn([
  { key: "id", title: "ID", width: 50 },
  { key: "name", title: "昵称", width: 100 },
  { key: "avatar", title: "头像", type: "image", width: 100 },
  { key: "email", title: "邮箱" },
  { key: "tags", title: "标签", type: "tags" },
  { key: "created_at", title: "创建时间", type: "date", width: 140 },
  { key: "updated_at", title: "更新时间", type: "date", width: 140 },
] as RenderColumnType[])

表格 action 操作列

底层使用 h() 渲染 naive-ui 的按钮组件，可以自定义按钮的类型、大小、图标等属性。

其中 icon 可以使用安装好的 unocss 的 icon 组件，也可以使用 naive-ui 的 icon 组件。

使用 unocss icon 需使用 renderCustomIcon(系列名:图标名) 的形式，如 renderCustomIcon("carbon:edit")
- 系列名可参考 icones
使用 naive-ui icon 需要使用renderIcon(ICON组件)渲染，如 renderIcon(CashOutline)。

其余 props 可以参考 naive-ui 的按钮组件。

table.config.ts

import { renderCustomIcon, renderIcon } from "@/utils"
import { CashOutline } from "@vicons/ionicons5"

export const UserTableButton: TableButton[] = [
  {
    title: "编辑",
    command: "edit",
    props: {
      type: "primary",
      quaternary: true,
      renderIcon: renderCustomIcon("carbon:edit"),
    },
  },
  {
    title: "",
    command: "disabled",
    props: {
      type: "warning",
      circle: true,
      quaternary: false,
      renderIcon: renderIcon(CashOutline),
    },
  },
  {
    title: "删除",
    command: "delete",
    props: {
      type: "error",
      quaternary: true,
    },
  },
]

默认配置

pageSizes

config/table.ts

export const pageSizes = [
  { label: "10 每页", value: 10 },
  { label: "20 每页", value: 20 },
  { label: "30 每页", value: 30 },
  { label: "40 每页", value: 40 },
]

props

props	说明	类型	默认值
columns	表格列配置	`RenderColumnType[]`	`[]`
api	请求接口函数	`() => Promise<any[]>`	`() => Promise.resolve([])`
button	表格操作按钮配置	`TableButton[]`	`[]`
action	点击操作按钮触发的回调函数	`(command: string, row: any) => void`	`() => void`

示例

API 接口配置文件

api/userApi.ts

import http from "../plugins/axios"

export async function userList(page = 1) {
  return http.get<IUserModel[]>({
    url: `users?page=${page}`,
  })
}

表格配置文件

config/table.ts

import { renderCustomIcon, renderIcon } from "@/utils"
import { CashOutline } from "@vicons/ionicons5"

export const UserTableField = makeColumn([
  { key: "id", title: "ID", width: 50 },
  { key: "name", title: "昵称", width: 100 },
  { key: "avatar", title: "头像", type: "image", width: 100 },
  { key: "email", title: "邮箱" },
  { key: "tags", title: "标签", type: "tags" },
  { key: "created_at", title: "创建时间", type: "date", width: 140 },
  { key: "updated_at", title: "更新时间", type: "date", width: 140 },
] as RenderColumnType[])

export const UserTableButton: TableButton[] = [
  {
    title: "编辑",
    command: "edit",
    props: {
      type: "primary",
      quaternary: true,
      renderIcon: renderCustomIcon("carbon:edit"),
    },
  },
  {
    title: "",
    command: "disabled",
    props: {
      type: "warning",
      circle: true,
      quaternary: false,
      renderIcon: renderIcon(CashOutline),
    },
  },
  {
    title: "删除",
    command: "delete",
    props: {
      type: "error",
      quaternary: true,
    },
  },
]

主页面

crud-table.vue

<script setup lang="ts">
  import { userList } from "@/api/userApi"
  import { UserTableButton, UserTableField } from "@/config/table"

  function handleActions(command: string, row: any) {
    // TODO 点击操作后
    if (command === "edit") {
      console.log("编辑", row)
      return
    }
    if (command === "delete") {
      console.log("删除", row)
      return
    }
    if (command === "disabled") {
      console.log("禁用", row)
      return
    }
  }
</script>

<template>
  <BasicTable :columns="UserTableField" :api="userList" :button="UserTableButton" @action="handleActions" />
</template>

效果

自定义表格效果展示

本文采用署名-非商业性使用-相同方式共享 4.0 国际许可协议，转载请注明出处。