1.Tooltip的getPopupContainer改变浮层渲染父节点
getPopupContainer={trigger => trigger.parentNode}
// 往上几个父节点的话
getPopupContainer={trigger => trigger.parentNode.parentNode.parentNode.parentNode}
2. antd中select
-
设置了value之后，defaultValue就不起作用了
-
设置了value并且value不为undefined之后，placeholder就不显示了，所以可以
value=value || undefined
this.state = {
dataReportType: '',
}
....
<Select
onChange={this.handleChange}
placeholder="请选择报表类型"
value={dataReportType || undefined}
>
3. antd中的description
对于label和content的宽度，我们想着table中每一行中每一个td可以设置百分比的宽度，总和为100%即可
4. ant-table
1）.设置table中某个td的宽度
有时设置width不起作用。加上display:table-cell；
设置width并超出显示省略号，官网给出讨论https://github.com/ant-design/ant-design/issues/13825
.ant-table-fixed {
table-layout: fixed;
}
.ant-table-tbody > tr > td {
word-wrap: break-word;
word-break: break-all;
}
2).头根据筛选条件的变化而变化
const columns1 = [{
title: '客户码',
dataIndex: 'customerCode',
key: 'customerCode',
}, {
// title: '持仓量(买/卖)',
title: ({filters}) => {
return (!filters.openInterestCount || filters.openInterestCount.length === 2 ) ? "持仓量(买/卖)"
:
<span>持仓量(买/卖){
(['买', '卖'][filters.openInterestCount[0]]) ? ('-(' + ['买', '卖'][filters.openInterestCount[0]] + ')') : ''
}</span>},
dataIndex: 'openInterestCount',
key: 'openInterestCount',
filters: [{
text: '买',
value: '0',
}, {
text: '卖',
value: '1',
}],
filterMultiple: true, //是否多选默认true
// filterIcon: (filtered) => <Icon type="smile-o" theme="outlined" style={{ color: filtered ? '#108ee9' : '#aaa' }} />,
onFilter: (value, record) => record.openInterestCountFlag == value,
}];
3). ant design 中table表头进行请求筛选
...
filterPositon = (selectedKeys, confirm) => {
let titles = selectedKeys;
confirm();
}
...
const columns11 = [{
title: '客户码',
dataIndex: 'customerCode',
key: 'customerCode',
width: '55%'
}, {
title: () => (<span>持仓量{this.state.positionTitle}</span>),
dataIndex: 'positions',
key: 'positions',
width: '45%',
render: (text, record) => {
return (
<span>{text && (isNaN(Number(text))) && mining.utils.forMatMoney(Number(text))}</span>
)
},
filterDropdown: ({
setSelectedKeys,
selectedKeys,
confirm,
clearFilters
}) => (
<div className="position-filter">
<RadioGroup onChange={e => setSelectedKeys(e.target.value)} defaultValue="0">
<Radio value="0">买/卖</Radio>
<Radio value="1">买/卖</Radio>
<Radio value="2">买/卖</Radio>
</RadioGroup>
<Button onClick={this.filterPositon(selectedKeys, confirm)}>确定</Button>
</div>
)
}];
4).点击行，并添加活跃的行样式
activeRow (record, index){
return this.state.activeRow === index ? 'active-row': '';
}
showCurrentDetails(record, index, e){
//...
e.stopPropagation();
}
...
return(
<div className={'wrapper-trade'}>
<Table
dataSource={dataSource}
columns={columns1}
pagination={false}
locale={{emptyText: '没有数据'}}
rowClassName={(record, index) => this.activeRow(record, index)}
onRow={(record, index) => {
return {
onClick: (e) => this.showCurrentDetails(record, index, e)
}
}}
scroll={{ y: '90%' }}>
</Table>
</div>
)
5).Tabel上绑定onClick方法不可用，可外加div绑定
6).ant-table column设置
当书写render时，当此列没有key值时，render的参数为(record),当有key值时，render的参数为(text,render)
7).ant-table点击行选中
const columns = [...];
class App extends React.Component {
state = {
selectedRowKeys: [],
};
selectRow = (record) => {
const selectedRowKeys = [...this.state.selectedRowKeys];
if (selectedRowKeys.indexOf(record.key) >= 0) {
selectedRowKeys.splice(selectedRowKeys.indexOf(record.key), 1);
} else {
selectedRowKeys.push(record.key);
}
this.setState({ selectedRowKeys });
}
onSelectedRowKeysChange = (selectedRowKeys) => {
this.setState({ selectedRowKeys });
}
render() {
const { selectedRowKeys } = this.state;
const rowSelection = {
selectedRowKeys,
onChange: this.onSelectedRowKeysChange,
};
return (
<Table
rowSelection={rowSelection}
columns={columns}
dataSource={data}
onRow={(record) => ({
onClick: () => {
this.selectRow(record);
},
})}
/>
);
}
}
常用写法：
this.state={
selectedRowKeys: [],
selectData: [],
}
....
// 选中行
handleCheck = (selectedRowKeys, selectedRows) => {
this.setState({
selectedRowKeys,
selectData: [...selectedRows],
})
}
// 清除选中的
clearSelectRow =() => {
this.setState({
selectData: [],
selectedRowKeys: []
})
}
...
<Table
rowSelection= {
selectedRowKeys,
onChange: this.handleCheck,
fixed: true
}
/>
单选的时候,可简化handleRowClick：
handleRowClick = (record) => {
const selectedRowKeys = []
selectedRowKeys.push(record.key)
this.setState({
selectedSecondRowKeys: selectedRowKeys,
stepLastSelected: [record]
})
}
8).antd中pagination分页pageSizeOptions
pageSizeOptions: [20, 50, 100],
上述选中的可以显示为20，只在下拉选项时添加“页/条”
pageSizeOptions: ['20', '50', '100'],
9).antd中固定列宽度影响筛选图标显示
问题描述：
最后一列为操作列，固定在最右边，随着项目复杂，从3个操作增加为4个了，然后紧跟在操作列前面的一列筛选列的筛选图标被遮挡了，不明白为啥。。。。？
问题解决：最终发现，是只给操作增加了内容，没有增加操作列的宽度导致的，所以增加操作列的宽度到合适即可。
10).ant-table使table占满div进行滚动，有固定列情况
一般都是除了导航和查询的地方，剩下的地方container全部是table的，此时洗完滚动根据container的高度自适应变化而调整，而且不滚动时，分页在页面最底部,此时需要增加样式：
.ant-table-wrapper,
.ant-spin-nested-loading,
.ant-spin-container,
.ant-table,
.ant-table-content,
.ant-table-scroll {
height: 100%;
}
将table配置中scroll: { y: 'calc(100% - 46px)' },46是因为每行高是46
此时左或右固定时滚动会出现错位，增加样式：
.ant-table-fixed-left,
.ant-table-fixed-right {
height: calc(100% - 8px);
.ant-table-body-outer {
height: 100%;
}
.ant-table-body-inner {
overflow: auto !important;
}
}
5.form校验-一行写多个检验
每个formitem中只能写一个校验
参见例子 一行写两个
Row一行，Col两个即两列总共24
<Row gutter={8}>
<Col span={7}>
<Form.Item label="output:">
{getFieldDecorator('outputFirstValue', {
initialValue: ioFisrtSelDef[0],
})(
<Select
showSearch
optionFilterProp="children"
onChange={value => this.handleSelectChange(value, -1)}
labelInValue
disabled={editFlag && !valid}
>
{this.setOptions(ruleOutputCandidates)}
</Select>
)}
</Form.Item>
</Col>
<Col span={17}>
<Form.Item {...addRuleSecondLayout}>
{getFieldDecorator('outputSecondValue', {
initialValue: ioSecondSelDef[0],
rules: ioSecondValueDis[0] && [
{ required: true, message: '请输入自定义输出!' },
{ validator: this.validateOutput, }
],
})(
<Input type="text" className="rule-input" disabled={(editFlag && !valid) || ioSecondValueDis[0] !== 1} />
)}
</Form.Item>
</Col>
</Row>
上述选中的可以显示为20页/条
6.select选中值拿取当前行其他值
描述一个自己思路转不过来的坑-----
问题描述：
const optionDatas = [
{text:'aaaaa',id:1,params:['aad','bubu'],val: 'dada'},
{text:'nnnnn',id:2,params:['daf','bubus'],val: 'dsada'},
....
]
<Select
value={similarRate}
className="min-select"
onChange={this.handleChange}
>
{optionDatas.map((item, index) => (
<Option value={item.id} key={`match${index}`}>
{text}
</Option>
))}
</Select>
往往optionDatas是一个对象数组，同时，显示的是text，value是一个id之类的值，但是在选中值后，我们某时会需要取得选中的这条数据中的其他值如params，此时，思路需要转坑---value可以改，
value={index},handleChange时，选中的params为optionDatas[index].params;
（复杂(或者多个select时）时可以使用value={{index}
}，此时split('-')可以拿到id和index。）
7. Dropdown的menu是一个组件时
Dropdown的menu是一个组件时，点击item之后，下拉框并不会自动收起，解决办法，Dropdown和menu写在一个组件中。
网友评论