一、表格:
1.size切换器(自 4.1.0
起,Pagination 在 total
大于 50 条时会默认显示 size 切换器以提升用户交互体验。)
// 使分页器始终存在
showSizeChanger: true,
// 自定义分页器大小
pageSizeOptions: [5, 10, 20, 50, 100],
// 默认分页器大小
defaultPageSize: 10
2.表格排序默认是:升序-》降序-》取消排序这样循环来的,如何去掉 取消排序这个功能,只允许升序-》降序或降序-》升序这样循环?
// 如果想要先降序再升序,就先desc再asc再desc
sortDirections={['ascend', 'descend', 'ascend']}
3. 切换表格分页时清空用户之前勾选的行
二、穿梭框
1.Antd穿梭框不支持自定义左右footer,那就通过设置样式来吧!(elementUI的穿梭框是支持slot='leftFooter' slot=‘rightFooter’的)悄悄地吐槽一下~~
修改前:
修改后:
// 我这里是带表格的穿梭框(有一说一,这一点antd还是挺厉害的)
<TableTransfer
// dataSource数据源,其中的数据将会被渲染到左边一栏中,targetKeys 中指定的除外
dataSource={mailTransData.dataSource}
// targetKeys 显示在右侧框数据的 key 集合
targetKeys={mailTransData.targetKeys}
showSearch='true'
onChange={onTransferMailChange}
filterOption={(inputValue, item) =>
item.names !== null
? item.receiveName.indexOf(inputValue) !== -1 ||
item.names.indexOf(inputValue) !== -1
: item.receiveName.indexOf(inputValue) !== -1
}
titles={['未选择', '已选择']}
leftColumns={mailTableColumns}
rightColumns={mailTableColumns}
locale={{
searchPlaceholder: '请输入接收人/接收组名称'
}}
footer={renderMAilFooter}
/>
// footer中显示了两个按钮
const renderMAilFooter = () => (
<div>
<Button size='small' type='link' onClick={addMailAll}>
全部添加
</Button>
<Button size='small' type='link' onClick={delMailAll}>
全部移除
</Button>
</div>
)
// 样式:
.ant-transfer{
font-size: @font-size-base;
line-height: @line-height-base;
.ant-transfer-list{
height: 380px;
padding: 0 16px;
border-radius: 3px;
&-header{
border-bottom: 0;
padding: 8px 0px 9px;
&-dropdown, &-selected{
display: none;
}
&-title{
text-align: left;
}
}
&-body-search-wrapper{
padding: 0px 0 8px;
.ant-transfer-list-search-action{
top:0;
bottom:0;
}
}
&-body-customize-wrapper{
height:calc(100% - 52px);
overflow: auto;
.ant-table{
.ant-empty.ant-empty-normal{
margin:76px auto;
}
}
}
// 通过样式控制左边穿梭狂显示第1个按钮,右边穿梭狂显示第2个按钮
&:first-child{
.ant-transfer-list-footer{
.ant-btn:last-child{
display: none;
}
}
}
&:last-child{
.ant-transfer-list-footer{
.ant-btn:first-child{
display: none;
}
}
}
}
}