SchemaRender v1.8.0，一个库约等于半个后台管理系统

前言

通常，一个后台管理系统包含的主要功能有：

• 数据搜索、表格展示、编辑与删除等常规操作。
• 表单的编辑、展示等处理。
• 其他特定业务功能。

如下图：

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