今天开发需求的时候,用到了ant design中的table组件,其中遇到一些困难,虽然ant design官网给出了很详细的使用说明,但往往还是需要进行改动,谁让需求总是不按套路出牌的。于是乎,有了一个想法:把自己开发中遇到和ant design插件相关的知识来个汇总,自己以后开发也不会再遇到类似的问题犯难,也希望对其他网友有所帮助。
一、Table 组件
1、想要自定义表格的文本信息,比如,想使用自己的文本信息代替后台传来的数据,开发很多时候,因为后台的数据中的文本长度不固定,有的列文本会很长,这样会使表格变的不美观,大多数修改的情况有以下几种:
(1)超出固定长度,超出部分使用“...”显示,鼠标滑过文本时显示全部信息
render(){
const columns = [{
},{
},{
title:''xxx'',
key:'"xxx",
dataIndex:"xxx",
render:(
<span title="xxx"><a>....<a></span>
)
}]
return(
<Table columns={columns} dataSource={data} />
)
}
说明:render里面的超文本信息可以自己根据自己的需求随意定义,在标签上设置title属性,鼠标滑过文本时就会显示全部文本信息了
(2)文字超出固定长度,则行显示
ant design默认样式就是文本超出时会自动则行显示
(3)文字信息自定义,并且表格实现列行合并,类似这样的:
实现方法:
{
title:'验标照片',
dataIndex:'photo',
key:'photo',
render: (text, row, index) => {
const obj = {
children: <span><a href="javascript:void(0);" onClick={this.showFishpondDetail.bind(this,row)} >查看</a></span>,
props: {}
};
obj.props.rowSpan = row.idCount;
return obj;
}
}
二、DatePicker
遇坑由来:开发一个工单模块的需求,demo里面设计了一项使用Datepicker组件事件可以选择时间功能,时间选择很好实现,但是遇到了在和后台对接接口时候发现时间格式不是后台想要的形式,默认的形式是en-us格式。。查看api文档也发现可以改变成自己想要的形式,但最终都没成功,有开发时间短没有太多时间研究api文档,于是偷懒自己写了一个
var date = new Date(formData.dispatchEndTime);
var Y = date.getFullYear() + '-';
var M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';
var D = (date.getDate()<10?'0'+date.getDate():date.getDate())+'T';
var h = (date.getHours()<10?'0'+date.getHours():date.getHours())+':';
var m = (date.getMinutes()<10?'0'+date.getMinutes():date.getMinutes())+':00Z';
var dateString = Y+M+D+h+m;
三、Select实现下拉多选
报错:
Error: must set key for <rc-animate> children
原因:select中设置了mode = 'multiple',并把initialValue的值设为了['']
解决文案:只需要把initialValue的值默认设为空,或者设为不是空字符串的文字