1.Tooltip的getPopupContainer改變浮層渲染父節(jié)點

getPopupContainer={trigger => trigger.parentNode}

// 往上幾個父節(jié)點的話
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個了灵汪，然后緊跟在操作列前面的一列篩選列的篩選圖標被遮擋了，不明白為啥识虚。。蔚晨。肛循。铭腕？

問題解決：最終發(fā)現累舷，是只給操作增加了內容夹孔，沒有增加操作列的寬度導致的，所以增加操作列的寬度到合適即可搭伤。

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={ ${item.id}-$ {index}}，此時split('-')可以拿到id和index廓脆。）

7. Dropdown的menu是一個組件時

Dropdown的menu是一個組件時磁玉，點擊item之后，下拉框并不會自動收起蚊伞，解決辦法，Dropdown和menu寫在一個組件中厚柳。

antd使用