antd

2 posts with the tag “antd”

【Antd使用小结】--Table设置行背景色

Aug 19, 2017

xiwang

全栈开发者

Table 用于展示行列数据。

基本使用

指定表格的数据源 dataSource 为一个数据组， 并指定表格列的配置描述columns即可。

const dataSource = [{id:1, name: 'one', color: '#fff'},
        {id:2, name: 'two', color: '#eee'},
        {id:3, name: 'three', color: '#ddd'}];

const columns = [{
     title: 'ID',
     dataIndex: 'id',
   }, {
     title: 'Name',
     dataIndex: 'name',
}];

<Table dataSource={dataSource} columns={columns} />

运行结果：

行背景

默些时候， 需要根据行数据，来指定每行拥有不同的背景色。此时，可以使用Table.rowClassName来指定。rowClassName指定表格行的类名，类型是：Function(record, index):string， 其中record参数就是每行的具体绑定的数据。

<Table
    columns={columns}
    dataSource={this.state.data}
    rowClassName={(record) => record.color.replace('#', '')}
    rowKey={record => record.id}/>

rowClassName函数替换每行数据中color的值，将#替换为‘’， 剩下部分作为该行的class名返回。此时，需要制定相应的CSS样式：

.fff {
  background: #fff;
}

.eee {
  background: #eee;
}

.ddd {
  background: #ddd;
}

运行效果：

参考

1、https://jsfiddle.net/2b2376a4/

2、https://ant.design/components/table-cn/

Tags:

• antd
• react

【Antd使用小结系列】

Aug 19, 2017

xiwang

全栈开发者

Ant Design是蚂蚁金服开源出来的前端UI设计，是一个致力于提升『用户』和『设计者』使用体验的中台设计语言。它模糊了产品经理、交互设计师、视觉设计师、前端工程师、开发工程师等角色边界，将进行 UE 设计和 UI 设计人员统称为『设计者』，利用统一的规范进行设计赋能，全面提高中台产品体验和研发效率。

Ant Design of React是Ant Design 的React实现，开发和服务于企业级后台产品。

特性

• 提炼自企业级中后台产品的交互语言和视觉风格。
• 开箱即用的高质量 React 组件。
• 使用 TypeScript 构建，提供完整的类型定义文件。
• 基于 npm + webpack + babel 的工作流，支持 ES2015 和 TypeScript。

我的使用小结系列【开端】

近来的半年来，带领4个人的小团队（一个安卓、一个Java 实习生、一个Java后台还有我），服务于一个物流项目。一直处于一种全栈开发状态。从需要分析到数据库设计， 从后台服务到一个人扛起前端， 面对多变而不够清晰的需求，紧张的工期等等，虽然很辛苦但充实。问题不断中，不断成长，也发现不一样的自己。

这里作为Antd使用小结系列的开篇， 记录我使用Antd的点滴总结， 强迫自己按时写文章，养成一个好习惯！过去的几个月忙着项目以及生活的事情，都没有心思来总结和沉淀，这算是一个美好的开端吧！

我愿化成一座石桥，经受五百年的风吹，五百年的日晒，五百年的雨打，只求她从桥上走过!

Tags:

• antd
• react