Install

$ npm install @ty-front/backend-common-search-table --save

Use

基本用法

import { DataTable, SearchField } from '@ty-front/backend-common-search-table'

const searchFields: SearchField[] = [
  {
    label: 'ID',
    name: 'id',
    type: 'input',
    payload: {
      props: {
        placeholder: 'placeholder'
      }
    }
  },
  {
    label: 'Select',
    name: 'select',
    type: 'select',
    payload: {
      options: [
        { key: '1', label: 'one', value: '1' },
        { key: '2', label: 'two', value: '2' },
        { key: '3', label: 'three', value: '3' }
      ]
    }
  }
]

const columns = [
  {
    key: 'id',
    title: 'ID',
    dataIndex: 'id'
  }, {
    key: 'title',
    title: 'Title',
    dataIndex: 'title'
  }
]

const onSearch = async ({ page, pageSize, values }) => {
  const res = await axios.get('http://jsonplaceholder.typicode.com/posts', {
    params: {
      _page: page,
      _limit: pageSize,
      ...values
    }
  })
  return {
    dataSource: res.data,
    total: Number(res.headers['x-total-count'])
  }
}
render(
  <DataTable
    rowKey={record => record.id}
    searchFields={searchFields}
    initialColumns={columns}
    onSearch={onSearch}
  />
, mountNode)

显示底部的总计列

手动刷新 table

显示操作列

版本变更记录

v0.1.12

2020-06-17

• 🐞 修复footer对齐

v0.1.12

2020-05-08

• 🌟 antd 3.x 升级到 4.x

v0.1.10

2020-03-12

• 🌟 支持 active 的 lable 动态渲染

v0.1.9

2020-03-03

• 🛠 暴露 form 表单实例

v0.1.8

2020-02-29

• 🐞 修复不对齐

v0.1.7

2020-02-21

• 🐞 去掉自动搜索到上一页 & 设置翻页的 bug

v0.1.6

2020-01-20

• 🐞 fetch 第一个参数传参页面不重置的问题

v0.1.5

2020-01-10

• 🐞 兼容后端 total 为字符串的问题

v0.1.4

2020-01-08

• 🐞 修复下拉框在滚动情况下会断层

v0.1.3

2020-01-01

• 🐞 最后一条翻页错误

v0.1.2

2020-01-01

• 🛠 版本号错误

v0.1.1

2020-01-01

• 🛠 打包构建 lib

v0.1.0

2020-01-01

• 🎉 发布新版本
• 🐞 解决时间空间偶然显示不出来的问题

v0.0.41

2019-12-25

• 🛠 去掉错误文件

v0.0.40

2019-12-25

• 🛠 金额输入框限制输入长度

v0.0.39

2019-12-19

• 🌟 input 去掉全部空格 --> 去掉左右空格

v0.0.38

2019-12-17

• 🌟 支持控件传自定义的输入限制

v0.0.37

2019-12-10

• 🌟 extraButtons 支持传入选中列
• 🌟 rowActions 可以通过 isDisabled 判断是否禁用

v0.0.36

2019-12-07

• 🌟 支持区分 onSearch 事件来源

v0.0.35

2019-12-07

• 🎨 列表内容统一居中显示
• 🎨 总计列字体加粗
• 🐞 重置按钮做防抖处理

v0.0.34

2019-12-06

• 🐞 修复构建错误

v0.0.33

2019-12-06

• 🎨 优化了总计列线条不对齐的问题
• 🛠 Input 默认不记录历史数据 autoComplete="off"
• 🛠 searchFields 统一去掉所有空格

v0.0.32

2019-12-04

• 🐞 修复自定义控件取消错误的问题

v0.0.31

2019-12-04

• 🛠 修复无法提交的问题

v0.0.30

2019-12-04

• 🛠 修改默认的分页配置

v0.0.29

2019-12-04

• 🐞 修复控件输入错误的bug

v0.0.28

2019-12-04

• 🌟 searchFields 统一去掉两头空格

v0.0.27

2019-12-02

• 🎨 优化了同时出现筛选列和总计栏的样式问题

v0.0.26

2019-12-02

• 🛠 渲染数据重置选中列
• 🐞 修复总计列未设置 key 值警告的问题

v0.0.25

2019-11-29

• 🐞 修复了固定浮动的 bug

v0.0.24

2019-11-26

• 💄 优化了表格的筛选体验，键盘键入 enter 可直接查询 😎
• 💄 优化控件获取父元素 container 的方式

v0.0.23

2019-11-25

• 🌟 操作区域新增条件渲染方法 renderController
• 🌟 支持按钮组旁边新增额外的按钮
• 🐞 修复 pageSizeOptions 类型错误警告

v0.0.22

2019-11-22

• 🌟 支持传入 pageSizeOptions 指定每页可以显示多少条

v0.0.21

2019-11-22

• 🎨 优化了分页信息的样式
• 🐞 修复 more key 值重复的问题

v0.0.20

2019-11-21

• 🛠 表单不自动过滤空字段

v0.0.19

2019-11-21

• 🐞 修复 datePicker 固定浮动的 bug

v0.0.18

2019-11-21

• 🐞 修复 select 固定浮动的 bug

v0.0.17

2019-11-19

• 🐞 修复 record 为空的问题

v0.0.16

2019-11-19

• 🐞 less 文件导入错误

v0.0.15

2019-11-19

• 🐞 页码显示错误
• 🌟 支持额外的统计列
• 🌟 不存在 SearchFields 的时候，不显示筛选和重置按钮
• 🛠 total 显示迁移到分页器旁边

v0.0.14

2019-11-19

• 🐞 线上构建错误

v0.0.13

2019-11-19

• 🛠 文件统一小写

v0.0.12

2019-11-19

• 🌟 onSearch 属性兼容 void 类型函数
• 🛠 重置按钮调整为自动请求数据
• 🐞 修复 RangeAmount 输入框无法重置问题

v0.0.11

• 🌟 内置 RangeAmount 搜索栏

v0.0.10

• 🌟 添加 lib/ 目录

v0.0.9

• 🌟 添加自定义刷新功能

v0.0.8

• 🛠 调整剩余操作符

v0.0.7

• 🌟 添加 showRowSelection 属性

v0.0.6

• 🌟 支持传入 restProps
• 🛠 默认不出现筛选框

v0.0.5

• 🌟 添加列表筛选功能

v0.0.4

• 🌟 更新组件

v0.0.3

• 🌟 添加 lib/ 目录

v0.0.2

• 🛠 修改配置文件

v0.0.1

• 💄 通用表格组件初始化