zent-table

v1.1.0
Zent表格组件

Readme Versions Dependencies Scripts

zent-table

表格组件

API

table接收参数

参数 说明 类型 默认值 备选值 是否必须
className 自定义额外类名 string '' '' 否
prefix 自定义前缀 string 'zent' null 否
columns 每一列需要的所有数据 array[object] null null 是
datasets 每一行需要展示的数据 array[object] null null 是
rowKey 每一行的key，让react提升性能，并防止出现一系列的问题 string id null 否
sortBy 根据哪一个字段排序，应该等于columns中某一个元素的key字段 string null null 否
sortType 排序方式 string 'desc' 'asc' 否
onChange 列表发生变化时自动触发的函数，页面筛选、排序均会触发 func null null 否
emptyLabel 列表为空时的提示文案 string '没有更多数据了' null 否
selection 表格的选择功能配置 object null null 否
loading 表格是否loading状态 bool false null 否
getRowConf 每一行的配置函数，返回一个配置对象{ canSelect, rowClass } func null null 否
autoStick 是否自动将head stick到窗口 bool false true 否
autoScroll 是否点击分页自动滚到table顶部 boll false true 否

页面筛选、排序均会触发 onChange函数

getRowConf的特别声明：


/*
 * @param data {Object} 每一行的数据
 * @param index {number} 每一行在列表中的index
 * @return {
 *  canSelect {boolean} 是否可选，默认为true
 *  rowClass {string} 这一行的特殊class，默认是空字符串
 * }
 */
getRowConf(data, index) { // 每一行的数据和这一行在列表中的index

    return {
        canSelect: index % 2 === 0,
        rowClass: `row-${index}`
    }
}

columns参数介绍

参数 说明 类型 默认值 备选值 是否必须
title 每一列显示在thead上的名称 string null null 否
name 每一列的主键，影响到排序和筛选 string null null 否
width 每一列在一行的宽度，相对值和固定值（如：20% 或 100px） string null null 否
isMoney 表示是否是金额 false null null 否
needSort 这一列是否支持排序，这一列必须设置了key，才能正常使用排序功能 boolean false true 否
bodyRender 这一列对应用来渲染的组件 React Element 或 函数 null null 否

selection参数介绍

参数 说明 类型 默认值 备选值 是否必须
selectedRowKeys 默认选中 array null null 否
onSelect 每次check的时候出发的函数 func null null 否

如何使用

npm install zent-table

使用webpack打包的项目：

import Table from 'zent-table';
import 'zent-pagination/lib/index.css';

使用requirejs打包的项目：

var ZentTable = require('zent-table/dist/main');
npm i zent-table

Metadata

  • MIT
  • Whatever
  • zhangmengxuan
  • released 4/24/2017

Downloads

Maintainers