antd组件使用技巧

且用且珍惜。。。

Drawer

destroyOnClose

关闭时销毁 Drawer 里的子元素。 所以只能销毁dom对应的数据。
有一次项目需要，用getFieldDecorator注册了一个值，不对应dom元素。
结果在drawer关闭的时候，这个变量的值并不会清空。其他有对应dom的值会清空。

Form

validator

validator内部是支持异步的。就像是promise一样吧。所以可以有这样的代码：

validator: (rule, value, callback) => {
                      if (isEmpty(value)) {
                        callback(formatMessage({ id: 'validate.not-empty' }));
                      } else {
                        const res = checkName(value); // `异步请求，请求后台的结果`
                        res
                          .then(result => {
                            if (!result.res) {
                              callback(formatMessage({ id: 'validate.name.exist' }));
                            } else {
                              callback();
                            }
                          })
                          .catch(err => {
                            if (err) {
                              showNotificationWithError(err);
                            }
                          });
                      }
                    }

Table

antd版本：3.26.20

fix最右侧那列，各列不设置宽度，表格会出现空白区域：

解决：

指定了最右侧列的宽度，就解决了这个问题。

后来值太长了，又在Table上加了scroll={{x: 'max-content'}}， 完美解决了问题

前端过滤，怎样让过滤的下拉选项随着数据实时变化

场景是这样的：
一次捞所有的数据，在前端实现过滤：

标签键和标签值的过滤框的下拉都是根据datas确定的。利用Table组件自带的filter，很简单。

可是，
现在希望标签值的过滤的下拉选项要根据标签键的选择值来确定。也即，在标签键筛选后，根据筛选后的datas来确定标签值的过滤框的下拉。
可是，Table并没有暴露出来表格中显示数据的接口。
所以，怎么解决这个问题？

1. 所有列的过滤保持不变
2. 标签键的筛选，把filterValue记录下来
3. Table的DataSource={filterDatas(datas)}
   关键就是第三步：不需要找一个地方另存传给Table的dataSource，而是直接在传的地方，过滤一下
   假如另找一个变量存dataSource的话，要考虑很多东西。比如什么时候赋值，是不是要把所有列的filterValue都存起来，对数据进行精确过滤。
   但是，这样做的好处就是，不需要考虑“什么时候赋值”的问题；而且，把可以给Table自己做的东西仍然保留，不去碰，只是把自己需要的东西提出来做。
   代码类似这样：
   

Table

首先做了升级

1. 为什么有的是放上去，拿下来，单元格变长；有的是放上去就变长，而且一直变长
   一直变长的表格，有这个属性：

scroll={{ x: 'max-content' }}