前言

通常，一個後台管理系統包含的主要功能有：

• 數據搜索、表格展示、編輯與刪除等常規操作。
• 表單的編輯、展示等處理。
• 其他特定業務功能。

如下圖：

SearchTable

SchemaRender v1.8.0 近期發佈，完善了 SearchTable 表格組件功能的最後一公里。

至此可以簡單高效地實現上圖的主要內容（搜索+表格內容展示）。

代碼示例：

import { Button, Space } from 'antd'
import { useState } from 'react'

import SearchTable from '@schema-render/search-table-react'

const searchSchema = {
  renderType: 'Root',
  properties: {
    title: {
      title: '標題',
      renderType: 'InputText',
    },
    // ...更多搜索項定義
    publish_time: {
      title: '同步時間',
      renderType: 'DateRangePicker',
    },
  },
}

const columns = [
  { title: 'ID', dataIndex: 'id', width: 80 },
  { title: '標題', dataIndex: 'title', width: 160 },
  // ...更多表格內容定義
]

const fetchData = async (params) => {
  // 獲取後端 Http 接口數據
}

const Page = () => {
  const [selectedRowKeys, setSelectedRowKeys] = useState([])

  // 操作欄配置
  const actionItems = (record) => {
    return [
      { text: '查看', href: `/content/view?id=${record.id}` },
      { text: '編輯', href: `/content/edit?id=${record.id}`, isShow: record.canEdit },
    ]
  }

  // 標題欄左側按鈕組
  const leftExtraContent = (
    <Space>
      <Button type="primary" onClick={() => 'xxx'}>新增內容</Button>
      <Button onClick={() => 'xxx'}>一鍵審核</Button>
      <Button type="primary" onClick={() => 'xxx'}>關聯賬户</Button>
    </Space>
  )

  return (
    <SearchTable
      className="custom-class-name"
      search={{ schema: searchSchema }}
      title={{
        tabs: {
          tabBarExtraContent: {
            left: leftExtraContent,
          },
        },
      }}
      // Ant Design 表格組件 API
      table={{
        columns,
        actionItems,
        rowSelection: {
          selectedRowKeys,
          onChange: (newSelectedRowKeys) => {
            setSelectedRowKeys(newSelectedRowKeys)
          },
        },
      }}
      // 接口請求
      request={async (params) => {
        const res = await fetchData(params)
        return {
          data: res.list,
          total: res.total,
        }
      }}
    />
  )
}

export default Page

SearchTable 包含的主要特性如下：

• 默認列寬度處理
• 支持表格高度自適應（一屏展示）
• 支持自動添加序號
• 支持配置式操作欄
• 支持常見數據類型顯示
• 支持前端排序：按拼音、數字、日期格式排序
• 支持“合計欄”，通過數據自動匹配
• 支持表格列顯示、隱藏、排序、寬度設置
• 支持表格列設置持久化存儲與自定義合併算法

下面挑選幾個特性嘮叨嘮叨。

序號與操作列

添加 showRowNumber 屬性，可自動添加序號列。

table={{
  // 添加序號列
  showRowNumber: true
}}

效果如下，自定義序號樣式見文檔。

聲明 actionItems 屬性，可添加操作列，設置 confirmAgain 屬性可增加二次確認提示，詳見文檔，操作按鈕多於設置閾值會以“更多”下拉菜單形式交互。

效果圖一	效果圖二

數據顯示

內置了一些常見的通用的數據渲染類型，只需要在 column 上聲明 valueType 屬性即可。

const columns = [
  {
    title: '代碼塊(code)',
    dataIndex: 'data_code',
    valueType: 'code',
  },
  {
    title: '千分位數字(comma-number)',
    dataIndex: 'data_number',
    valueType: 'comma-number',
  },
]

效果如下：

列排序等設置

支持對列進行顯示、隱藏、排序、寬度設置操作，設置 showSetting 屬性即開啓列設置。

• 亦可自定義觸發按鈕，詳見文檔。
• 支持持久化存儲，比如將設置數據存儲到後端接口，下次打開頁面仍按照存儲的數據進行顯示，詳見文檔。

title={{
    showSetting: true,
}}

最後

• SchemaRender 的 SearchTable 解決了數據搜索展示之類的場景。
• 而表單編輯等場景，則可以使用 SchemaRender 的 FormRender 來搞定，如下圖。
• 詳情請移步至官網：https://schema-render.js.org