merge

CHANGELOG.md

@@ -1,3 +1,28 @@
+<a name="1.6.15"></a>
+## [1.6.15](https://github.com/tinper-bee/bee-table/compare/v1.6.14...v1.6.15) (2018-12-15)
+
+
+
+<a name="1.6.14"></a>
+## [1.6.14](https://github.com/tinper-bee/bee-table/compare/v1.6.13...v1.6.14) (2018-12-14)
+
+
+
+<a name="1.6.13"></a>
+## [1.6.13](https://github.com/tinper-bee/bee-table/compare/v1.6.12...v1.6.13) (2018-12-14)
+
+
+
+<a name="1.6.12"></a>
+## [1.6.12](https://github.com/tinper-bee/bee-table/compare/v1.6.11...v1.6.12) (2018-12-11)
+
+
+
+<a name="1.6.11"></a>
+## [1.6.11](https://github.com/tinper-bee/bee-table/compare/v1.6.9...v1.6.11) (2018-12-06)
+
+
+
 <a name="1.6.9"></a>
 ## [1.6.9](https://github.com/tinper-bee/bee-table/compare/v1.6.8...v1.6.9) (2018-12-05)
 
@@ -139,7 +164,7 @@
 
 
 <a name="1.5.1"></a>
-## [1.5.1](https://github.com/tinper-bee/bee-table/compare/v1.5.0...v1.5.1) (2018-11-19)
+## [1.5.1](https://github.com/tinper-bee/bee-table/compare/v1.5.0...v1.5.1) (2018-11-18)
 
 
 

README.md

@@ -106,6 +106,7 @@ class Demo extends Component {
 | onFilterChange       | 触发过滤输入操作以及下拉条件的回调 | function | (field,value,condition) => ()
 | onFilterClear       | 清除过滤条件的回调函数，回调参数为清空的字段 | function | (field) => ()
 | headerScroll       | 表头下是否显示滚动条 | bool| false
+| syncHover       | 是否同步Hover状态到左侧Checkbox，关闭此功能有助于提升性能 | bool| true
 
 
 *注意: data参数中的key值必需，否则会导致部分功能出现问题！建议使用唯一的值，如id*
@@ -133,6 +134,8 @@ class Demo extends Component {
 | filterDropdownData | 下拉条件自定义数据，filterDropdownAuto=manual生效，传入格式：[{ key : "自定义", value : "自定义" }] | array | [] |
 | filterDropdownFocus | 触发点击下拉条件的回调，一般用于异步点击请求数据使用 | function | () => () |
 | filterDropdownType | 下拉条件类型，分为 string 和 number 条件类型 | string | string
+| filterDropdownIncludeKeys | 能够设置指定的下拉条件项，通过设置keys 其中string条件可设置:LIKE,ULIKE,EQ,UEQ,START,END.number条件可设置:GT,GTEQ,LT,LTEQ,EQ,UEQ | array | [] 不设置此属性为显示所有
+| filterInputNumberOptions | 数值框接收的props，具体属性参考bee-input-number | object | null
 
 
 

build/FilterDropDown.js

@@ -59,25 +59,22 @@ var FilterDropDown = function (_Component) {
         _this.onSelectDropdown = function (item) {
             var _this$props = _this.props,
                 onSelectDropdown = _this$props.onSelectDropdown,
-                dataText = _this$props.dataText,
                 filterDropdownType = _this$props.filterDropdownType;
 
             if (onSelectDropdown) {
-                if (dataText != "") {
+                if (filterDropdownType == 'string') {
-                    if (filterDropdownType == 'string') {
+                    _this.setState({
-                        _this.setState({
+                        selectValue: [item.key]
-                            selectValue: [item.key]
+                    }, function () {
-                        }, function () {
+                        onSelectDropdown(item);
-                            onSelectDropdown(item);
+                    });
-                        });
+                }
-                    }
+                if (filterDropdownType == 'number') {
-                    if (filterDropdownType == 'number') {
+                    _this.setState({
-                        _this.setState({
+                        selectNumberValue: [item.key]
-                            selectNumberValue: [item.key]
+                    }, function () {
-                        }, function () {
+                        onSelectDropdown(item);
-                            onSelectDropdown(item);
+                    });
-                        });
-                    }
                 }
             }
         };
@@ -87,8 +84,8 @@ var FilterDropDown = function (_Component) {
 
             if (onClickClear) {
                 _this.setState({
-                    selectValue: [],
+                    // selectValue: [],
-                    selectNumberValue: []
+                    // selectNumberValue: []
                 }, function () {
                     onClickClear();
                 });
@@ -99,90 +96,145 @@ var FilterDropDown = function (_Component) {
             var _this$state = _this.state,
                 selectValue = _this$state.selectValue,
                 selectNumberValue = _this$state.selectNumberValue;
-            var filterDropdownType = _this.props.filterDropdownType;
+            var _this$props2 = _this.props,
+                filterDropdownType = _this$props2.filterDropdownType,
+                filterDropdownIncludeKeys = _this$props2.filterDropdownIncludeKeys;
 
             var locale = (0, _tool.getComponentLocale)(_this.props, _this.context, 'Table', function () {
                 return _i18n2["default"];
             });
-            switch (filterDropdownType) {
+            var stringEnum = {
-                case 'string':
+                LIKE: 'include',
-                    return _react2["default"].createElement(
+                ULIKE: 'exclusive',
-                        _beeMenus2["default"],
+                EQ: 'equal',
-                        {
+                UEQ: 'unequal',
-                            onSelect: _this.onSelectDropdown,
+                START: 'begin',
-                            selectedKeys: selectValue
+                END: 'end'
-                        },
+            };
-                        _react2["default"].createElement(
+            var numberEnum = {
-                            Item,
+                GT: 'greater_than',
-                            { key: 'LIKE' },
+                GTEQ: 'great_than_equal_to',
-                            locale['include']
+                LT: 'less_than',
-                        ),
+                LTEQ: 'less_than_equal_to',
-                        _react2["default"].createElement(
+                EQ: 'be_equal_to',
-                            Item,
+                UEQ: 'not_equal_to'
-                            { key: 'ULIKE' },
+            };
-                            locale['exclusive']
+            if (filterDropdownIncludeKeys != undefined) {
-                        ),
+                switch (filterDropdownType) {
-                        _react2["default"].createElement(
+                    case 'string':
-                            Item,
+                        return _react2["default"].createElement(
-                            { key: 'EQ' },
+                            _beeMenus2["default"],
-                            locale['equal']
+                            {
-                        ),
+                                onSelect: _this.onSelectDropdown,
-                        _react2["default"].createElement(
+                                selectedKeys: selectValue
-                            Item,
+                            },
-                            { key: 'UEQ' },
+                            filterDropdownIncludeKeys.map(function (item) {
-                            locale['unequal']
+                                return _react2["default"].createElement(
-                        ),
+                                    Item,
-                        _react2["default"].createElement(
+                                    { key: item },
-                            Item,
+                                    locale[stringEnum[item]]
-                            { key: 'START' },
+                                );
-                            locale['begin']
+                            })
-                        ),
+                        );
-                        _react2["default"].createElement(
+                    case 'number':
-                            Item,
+                        return _react2["default"].createElement(
-                            { key: 'END' },
+                            _beeMenus2["default"],
-                            locale['end']
+                            {
-                        )
+                                onSelect: _this.onSelectDropdown,
-                    );
+                                selectedKeys: selectNumberValue
-                case 'number':
+                            },
-                    return _react2["default"].createElement(
+                            filterDropdownIncludeKeys.map(function (item) {
-                        _beeMenus2["default"],
+                                return _react2["default"].createElement(
-                        {
+                                    Item,
-                            onSelect: _this.onSelectDropdown,
+                                    { key: item },
-                            selectedKeys: selectNumberValue
+                                    locale[numberEnum[item]]
-                        },
+                                );
-                        _react2["default"].createElement(
+                            })
-                            Item,
+                        );
-                            { key: 'GT' },
+                    default:
-                            locale['greater_than']
+                        return _react2["default"].createElement('div', null);
-                        ),
+                }
-                        _react2["default"].createElement(
+            } else {
-                            Item,
+                switch (filterDropdownType) {
-                            { key: 'GTEQ' },
+                    case 'string':
-                            locale['great_than_equal_to']
+                        return _react2["default"].createElement(
-                        ),
+                            _beeMenus2["default"],
-                        _react2["default"].createElement(
+                            {
-                            Item,
+                                onSelect: _this.onSelectDropdown,
-                            { key: 'LT' },
+                                selectedKeys: selectValue
-                            locale['less_than']
+                            },
-                        ),
+                            _react2["default"].createElement(
-                        _react2["default"].createElement(
+                                Item,
-                            Item,
+                                { key: 'LIKE' },
-                            { key: 'LTEQ' },
+                                locale['include']
-                            locale['less_than_equal_to']
+                            ),
-                        ),
+                            _react2["default"].createElement(
-                        _react2["default"].createElement(
+                                Item,
-                            Item,
+                                { key: 'ULIKE' },
-                            { key: 'EQ' },
+                                locale['exclusive']
-                            locale['be_equal_to']
+                            ),
-                        ),
+                            _react2["default"].createElement(
-                        _react2["default"].createElement(
+                                Item,
-                            Item,
+                                { key: 'EQ' },
-                            { key: 'UEQ' },
+                                locale['equal']
-                            locale['not_equal_to']
+                            ),
-                        )
+                            _react2["default"].createElement(
-                    );
+                                Item,
-                default:
+                                { key: 'UEQ' },
-                    return _react2["default"].createElement('div', null);
+                                locale['unequal']
+                            ),
+                            _react2["default"].createElement(
+                                Item,
+                                { key: 'RLIKE' },
+                                locale['begin']
+                            ),
+                            _react2["default"].createElement(
+                                Item,
+                                { key: 'LLIKE' },
+                                locale['end']
+                            )
+                        );
+                    case 'number':
+                        return _react2["default"].createElement(
+                            _beeMenus2["default"],
+                            {
+                                onSelect: _this.onSelectDropdown,
+                                selectedKeys: selectNumberValue
+                            },
+                            _react2["default"].createElement(
+                                Item,
+                                { key: 'GT' },
+                                locale['greater_than']
+                            ),
+                            _react2["default"].createElement(
+                                Item,
+                                { key: 'GTEQ' },
+                                locale['great_than_equal_to']
+                            ),
+                            _react2["default"].createElement(
+                                Item,
+                                { key: 'LT' },
+                                locale['less_than']
+                            ),
+                            _react2["default"].createElement(
+                                Item,
+                                { key: 'LTEQ' },
+                                locale['less_than_equal_to']
+                            ),
+                            _react2["default"].createElement(
+                                Item,
+                                { key: 'EQ' },
+                                locale['be_equal_to']
+                            ),
+                            _react2["default"].createElement(
+                                Item,
+                                { key: 'UEQ' },
+                                locale['not_equal_to']
+                            )
+                        );
+                    default:
+                        return _react2["default"].createElement('div', null);
+                }
             }
         };
 

build/FilterType.js

@@ -68,13 +68,15 @@ var FilterType = function (_Component) {
                 onFilterClear = _this$props.onFilterClear,
                 dataIndex = _this$props.dataIndex;
 
-            _this.setState({
+            if (_this.state.value !== "") {
-                value: "", //清空值
+                _this.setState({
-                condition: _this.props.filterDropdownType == 'string' ? 'LIKE' : 'EQ' //切回默认查询条件
+                    value: "", //清空值
-            }, function () {
+                    condition: _this.props.filterDropdownType == 'string' ? 'LIKE' : 'EQ' //切回默认查询条件
-                //调用清除方法参数为当前字段的field
+                }, function () {
-                onFilterClear && onFilterClear(dataIndex);
+                    //调用清除方法参数为当前字段的field
-            });
+                    onFilterClear && onFilterClear(dataIndex);
+                });
+            }
         };
 
         _this.changeText = function (val) {
@@ -89,7 +91,7 @@ var FilterType = function (_Component) {
                 dataIndex = _this$props2.dataIndex;
 
             if (e.keyCode == 13) {
-                onFilterChange(dataIndex, e.target.value, _this.state.condition);
+                e.target.value !== "" && onFilterChange(dataIndex, e.target.value, _this.state.condition);
             }
         };
 
@@ -107,7 +109,7 @@ var FilterType = function (_Component) {
             _this.setState({
                 condition: item.key
             }, function () {
-                onFilterChange && onFilterChange(dataIndex, _this.state.value, _this.state.condition);
+                _this.state.value !== "" && onFilterChange && onFilterChange(dataIndex, _this.state.value, _this.state.condition);
             });
         };
 
@@ -183,6 +185,8 @@ var FilterType = function (_Component) {
 
         _this.renderControl = function (rendertype) {
             var _this$props7 = _this.props,
+                filterInputNumberOptions = _this$props7.filterInputNumberOptions,
+                filterDropdownIncludeKeys = _this$props7.filterDropdownIncludeKeys,
                 dataIndex = _this$props7.dataIndex,
                 filterDropdown = _this$props7.filterDropdown,
                 filterDropdownType = _this$props7.filterDropdownType,
@@ -213,19 +217,20 @@ var FilterType = function (_Component) {
                             onClickClear: _this.clearFilter,
                             isShowClear: _this.state.value,
                             isShowCondition: filterDropdown,
-                            filterDropdownType: filterDropdownType
+                            filterDropdownType: filterDropdownType,
+                            filterDropdownIncludeKeys: filterDropdownIncludeKeys
                         })
                     );
                 case 'number':
                     return _react2["default"].createElement(
                         'div',
                         { className: clsPrefix + ' filter-wrap' },
-                        _react2["default"].createElement(_beeInputNumber2["default"], {
+                        _react2["default"].createElement(_beeInputNumber2["default"], _extends({}, filterInputNumberOptions, {
                             className: className,
                             value: _this.state.value,
                             onChange: _this.changeNumber,
                             iconStyle: 'one'
-                        }),
+                        })),
                         _react2["default"].createElement(_FilterDropDown2["default"], {
                             locale: locale,
                             dataIndex: dataIndex,
@@ -234,7 +239,8 @@ var FilterType = function (_Component) {
                             onClickClear: _this.clearFilter,
                             isShowClear: _this.state.value != 0,
                             isShowCondition: filterDropdown,
-                            filterDropdownType: filterDropdownType
+                            filterDropdownType: filterDropdownType,
+                            filterDropdownIncludeKeys: filterDropdownIncludeKeys
                         })
                     );
                 case 'dropdown':
@@ -253,7 +259,8 @@ var FilterType = function (_Component) {
                             onClickClear: _this.clearFilter,
                             isShowCondition: filterDropdown,
                             isShowClear: _this.state.value,
-                            filterDropdownType: filterDropdownType
+                            filterDropdownType: filterDropdownType,
+                            filterDropdownIncludeKeys: filterDropdownIncludeKeys
                         })
                     );
                 case 'date':
@@ -275,7 +282,8 @@ var FilterType = function (_Component) {
                             onClickClear: _this.clearFilter,
                             isShowCondition: filterDropdown,
                             isShowClear: _this.state.value,
-                            filterDropdownType: filterDropdownType
+                            filterDropdownType: filterDropdownType,
+                            filterDropdownIncludeKeys: filterDropdownIncludeKeys
                         })
                     );
                 case 'daterange':
@@ -300,7 +308,8 @@ var FilterType = function (_Component) {
                             onSelectDropdown: _this.onSelectDropdown,
                             onClickClear: _this.clearFilter,
                             isShowCondition: filterDropdown,
-                            isShowClear: _this.state.value
+                            isShowClear: _this.state.value,
+                            filterDropdownIncludeKeys: filterDropdownIncludeKeys
                         })
                     );
                 case 'bool':
@@ -312,7 +321,8 @@ var FilterType = function (_Component) {
                             onChange: onChange
                         }),
                         _react2["default"].createElement(_FilterDropDown2["default"], { locale: locale,
-                            onSelectDropdown: onSelectDropdown
+                            onSelectDropdown: onSelectDropdown,
+                            filterDropdownIncludeKeys: filterDropdownIncludeKeys
                         })
                     );
                 default:

build/Table.css

@@ -610,11 +610,13 @@
       top: 0px;
       left: 3px; }
 
-.u-filter-dropdown-menu-wrap .u-dropdown-menu li.u-dropdown-menu-item {
+.u-filter-dropdown-menu-wrap {
-  line-height: 32px;
+  z-index: 1800; }
-  height: 32px;
+  .u-filter-dropdown-menu-wrap .u-dropdown-menu li.u-dropdown-menu-item {
-  padding: 0px 16px 0 16px;
+    line-height: 32px;
-  cursor: pointer; }
+    height: 32px;
+    padding: 0px 16px 0 16px;
+    cursor: pointer; }
 
 .u-checkbox {
   height: 16px;

build/Table.js

@@ -92,7 +92,13 @@ var propTypes = {
   getBodyWrapper: _propTypes2["default"].func,
   children: _propTypes2["default"].node,
   draggable: _propTypes2["default"].bool,
-  minColumnWidth: _propTypes2["default"].number
+  minColumnWidth: _propTypes2["default"].number,
+  filterable: _propTypes2["default"].bool,
+  filterDelay: _propTypes2["default"].number,
+  onFilterChange: _propTypes2["default"].func,
+  onFilterClear: _propTypes2["default"].func,
+  syncHover: _propTypes2["default"].bool
+
 };
 
 var defaultProps = {
@@ -132,7 +138,8 @@ var defaultProps = {
   },
   columns: [],
   minColumnWidth: 80,
-  locale: {}
+  locale: {},
+  syncHover: true
 };
 
 var Table = function (_Component) {
@@ -501,7 +508,9 @@ var Table = function (_Component) {
           filterdropdownauto: column.filterDropdownAuto, //是否自定义数据
           filterdropdowndata: column.filterDropdownData, //自定义数据格式
           filterdropdownfocus: column.filterDropdownFocus, //焦点触发函数回调
-          filterdropdowntype: column.filterDropdownType //下拉的类型分为 String,Number 默认是String
+          filterdropdowntype: column.filterDropdownType, //下拉的类型分为 String,Number 默认是String
+          filterdropdownincludekeys: column.filterDropdownIncludeKeys, //下拉条件按照指定的keys去显示
+          filterinputnumberoptions: column.filterInputNumberOptions //设置数值框内的详细属性
         });
       }
     });
@@ -1091,9 +1100,14 @@ var Table = function (_Component) {
   };
 
   Table.prototype.handleRowHover = function handleRowHover(isHover, key) {
-    this.store.setState({
+    //增加新的API，设置是否同步Hover状态，提高性能，避免无关的渲染
-      currentHoverKey: isHover ? key : null
+    var syncHover = this.props.syncHover;
-    });
+
+    if (syncHover) {
+      this.store.setState({
+        currentHoverKey: isHover ? key : null
+      });
+    }
   };
 
   Table.prototype.render = function render() {

build/TableHeader.js

@@ -229,6 +229,7 @@ var TableHeader = function (_Component) {
             , onFilterClear: _this.handlerFilterClear //清除回调
             , filterDropdown: rows[1][index]["filterdropdown"] //是否显示下拉条件
             , filterDropdownType: rows[1][index]["filterdropdowntype"] //下拉的条件类型为string,number
+            , filterDropdownIncludeKeys: rows[1][index]["filterdropdownincludekeys"] //下拉条件按照指定的keys去显示
           });
         //数值输入
         case "number":
@@ -242,6 +243,8 @@ var TableHeader = function (_Component) {
             , onFilterClear: _this.handlerFilterClear //清除回调
             , filterDropdown: rows[1][index]["filterdropdown"],
             filterDropdownType: rows[1][index]["filterdropdowntype"] //下拉的条件类型为string,number
+            , filterDropdownIncludeKeys: rows[1][index]["filterdropdownincludekeys"] //下拉条件按照指定的keys去显示
+            , filterInputNumberOptions: rows[1][index]["filterinputnumberoptions"] //设置数值框内的详细属性
           });
         //下拉框选择
         case "dropdown":
@@ -269,12 +272,14 @@ var TableHeader = function (_Component) {
             rendertype: type,
             className: clsPrefix + " filter-dropdown",
             data: selectDataSource,
-            dataIndex: dataIndex //字段
+            notFoundContent: "Loading" //没有数据显示的默认字
+            , dataIndex: dataIndex //字段
             , onFilterChange: _this.handlerFilterChange //输入框回调
             , onFilterClear: _this.handlerFilterClear //清除回调
             , filterDropdown: rows[1][index]["filterdropdown"],
             onFocus: rows[1][index]["filterdropdownfocus"],
             filterDropdownType: rows[1][index]["filterdropdowntype"] //下拉的条件类型为string,number
+            , filterDropdownIncludeKeys: rows[1][index]["filterdropdownincludekeys"] //下拉条件按照指定的keys去显示
           });
         //日期
         case "date":
@@ -289,6 +294,7 @@ var TableHeader = function (_Component) {
             , onFilterClear: _this.handlerFilterClear //清除回调
             , filterDropdown: rows[1][index]["filterdropdown"],
             filterDropdownType: rows[1][index]["filterdropdowntype"] //下拉的条件类型为string,number
+            , filterDropdownIncludeKeys: rows[1][index]["filterdropdownincludekeys"] //下拉条件按照指定的keys去显示
           });
         //日期范围
         case "daterange":
@@ -303,6 +309,7 @@ var TableHeader = function (_Component) {
             , onFilterClear: _this.handlerFilterClear //清除回调
             , filterDropdown: rows[1][index]["filterdropdown"],
             filterDropdownType: rows[1][index]["filterdropdowntype"] //下拉的条件类型为string,number
+            , filterDropdownIncludeKeys: rows[1][index]["filterdropdownincludekeys"] //下拉条件按照指定的keys去显示
           });
         default:
           //不匹配类型默认文本输入

demo/TableDemo.scss

@@ -14,6 +14,7 @@
 @import "../node_modules/bee-message/build/Message.css";
 @import "../node_modules/bee-dropdown/build/Dropdown.css";
 @import "../node_modules/bee-input-number/build/InputNumber.css";
+@import "../node_modules/bee-modal/build/Modal.css";
 @import "../src/Table.scss";
 
 

demo/demolist/Demo29.js

@@ -0,0 +1,170 @@
+/**
+*
+* @title 从弹出框内显示过滤行并且设置可选下拉条件
+* @description 通过Modal组件来展示表格的过滤相关能力，并且通过filterDropdownIncludeKeys设置可选条件
+*
+*/
+
+
+import React, { Component } from 'react';
+import Table from '../../src';
+import Modal from 'bee-modal';
+import Button from 'bee-button';
+
+
+const columns29 = [
+  {
+    title: "姓名",
+    width: 180,
+    dataIndex: "name",
+    key: "name",
+    filterType: "text",
+    filterDropdown: "show",
+    filterDropdownIncludeKeys: ['LIKE', 'EQ']
+  },
+  {
+    title: "年龄",
+    width: 170,
+    dataIndex: "age",
+    key: "age",
+    filterType: "number",
+    filterDropdown: "show",
+    filterDropdownType: "number",
+    filterDropdownIncludeKeys: ['EQ'],
+    filterInputNumberOptions: {
+      max: 200,
+      min: 0,
+      step: 1,
+      precision: 0
+    }
+  },
+  {
+    title: "日期",
+    width: 200,
+    dataIndex: "date",
+    key: "date",
+    filterType: "date",
+    filterDropdown: "show",
+    format: "YYYY-MM-DD"
+  }
+];
+
+const data29 = [
+  {
+    key: "1",
+    name: "John Brown",
+    age: 32,
+    date: "2018-09-19",
+    address: "朝阳区",
+    mark: "无"
+  },
+  {
+    key: "2",
+    name: "Jim Green",
+    age: 40,
+    date: "2018-09-18",
+    address: "朝阳区",
+    mark: "无"
+  },
+  {
+    key: "3",
+    name: "Jim Green",
+    age: 40,
+    date: "2018-09-18",
+    address: "东城区",
+    mark: "无"
+  },
+  {
+    key: "4",
+    name: "Jim Green",
+    age: 40,
+    date: "2018-09-18",
+    address: "东城区",
+    mark: "无"
+  }, {
+    key: "5",
+    name: "John Brown",
+    age: 32,
+    date: "2018-09-18",
+    address: "海淀区",
+    mark: "无"
+  },
+  {
+    key: "6",
+    name: "Jim Green",
+    age: 48,
+    date: "2018-09-18",
+    address: "海淀区",
+    mark: "无"
+  },
+  {
+    key: "7",
+    name: "Jim Green",
+    age: 40,
+    date: "2018-09-18",
+    address: "海淀区",
+    mark: "无"
+  },
+  {
+    key: "8",
+    name: "Jim Green",
+    age: 38,
+    date: "2018-09-18",
+    address: "海淀区",
+    mark: "无"
+  }
+];
+
+class Demo29 extends Component {
+  constructor() {
+    super();
+    this.state = {
+      show: false
+    }
+    this.close = this.close.bind(this);
+    this.open = this.open.bind(this);
+  }
+  handlerFilterChange = (key, val, condition) => {
+    console.log('参数：key=', key, ' value=', val, 'condition=', condition);
+  }
+
+  handlerFilterClear = (key) => {
+    console.log('清除条件', key);
+  }
+  close() {
+    this.setState({
+      show: false
+    });
+  }
+  open() {
+    this.setState({
+      show: true
+    });
+  }
+  render() {
+    return (<div><Modal
+      show={this.state.show}
+      onHide={this.close}
+      autoFocus={false}
+      enforceFocus={false}
+    >
+      <Modal.Header closeButton>
+        <Modal.Title>过滤行</Modal.Title>
+      </Modal.Header>
+      <Modal.Body>
+        <Table
+          onFilterChange={this.handlerFilterChange}//下拉条件的回调(key,val)=>()
+          onFilterClear={this.handlerFilterClear}//触发输入操作以及其他的回调(key,val)=>()
+          filterDelay={500}//输入文本多少ms触发回调函数，默认300ms
+          filterable={true}//是否开启过滤数据功能
+          bordered
+          columns={columns29}
+          data={data29} />
+      </Modal.Body>
+    </Modal>
+      <Button colors="primary" onClick={this.open}>显示表格</Button>
+    </div>)
+  }
+}
+
+export default Demo29;

demo/demolist/Demo5.js

@@ -21,14 +21,14 @@ const columns5 = [
     fixed: "left"
   },
   { title: "Age", width: 100, dataIndex: "age", key: "age", fixed: "left" },
-  { title: "Column 1", dataIndex: "address", key: "1" },
+  { title: "Column 1", dataIndex: "c1", key: "1" },
-  { title: "Column 2", dataIndex: "address", key: "2" },
+  { title: "Column 2", dataIndex: "c2", key: "2" },
-  { title: "Column 3", dataIndex: "address", key: "3" },
+  { title: "Column 3", dataIndex: "c3", key: "3" },
-  { title: "Column 4", dataIndex: "address", key: "4" },
+  { title: "Column 4", dataIndex: "c4", key: "4" },
-  { title: "Column 5", dataIndex: "address", key: "5" },
+  { title: "Column 5", dataIndex: "c5", key: "5" },
-  { title: "Column 6", dataIndex: "address", key: "6" },
+  { title: "Column 6", dataIndex: "c6", key: "6" },
-  { title: "Column 7", dataIndex: "address", key: "7" },
+  { title: "Column 7", dataIndex: "c7", key: "7" },
-  { title: "Column 8", dataIndex: "address", key: "8" }
+  { title: "Column 8", dataIndex: "c8", key: "8" }
 ];
 
 const data5 = [

dist/demo.css

@@ -6,6 +6,7 @@
 @import url(../node_modules/bee-message/build/Message.css);
 @import url(../node_modules/bee-dropdown/build/Dropdown.css);
 @import url(../node_modules/bee-input-number/build/InputNumber.css);
+@import url(../node_modules/bee-modal/build/Modal.css);
 .red {
   color: rgb(244,67,54) !important; }
 
@@ -2421,9 +2422,6 @@ i.uf {
 /*
  * 选择时删除文本阴影，及设置默认选中颜色
  */
-::-moz-selection {
-  background: rgb(187,222,251);
-  text-shadow: none; }
 ::selection {
   background: rgb(187,222,251);
   text-shadow: none; }
@@ -5287,7 +5285,7 @@ a, .mdl-accordion, .mdl-button, .mdl-card, .mdl-checkbox, .mdl-dropdown-menu,
   .u-panel .u-panel-body {
     padding: 15px 15px;
     position: relative; }
-    .u-panel .u-panel-body .uf {
+    .u-panel .u-panel-body .u-panel-copy {
       position: absolute;
       right: 25px;
       top: 30px;
@@ -5297,7 +5295,7 @@ a, .mdl-accordion, .mdl-button, .mdl-card, .mdl-checkbox, .mdl-dropdown-menu,
       margin: 8px;
       border-radius: 4px;
       cursor: pointer; }
-      .u-panel .u-panel-body .uf:hover {
+      .u-panel .u-panel-body .u-panel-copy:hover {
         color: #a8a7a7; }
 
 .u-panel-default {
@@ -6673,7 +6671,8 @@ input.u-button[type="submit"] {
   border-radius: 0 500px 500px 0; }
 
 .u-pagination {
-  font-size: 14px; }
+  font-size: 14px;
+  position: relative; }
   .u-pagination-list {
     float: left;
     margin: 5px; }
@@ -6681,6 +6680,10 @@ input.u-button[type="submit"] {
       clear: both;
       display: table;
       content: ''; }
+    .u-pagination-list > li.iconBtn > a {
+      padding: 0 11px;
+      font-size: 22px;
+      line-height: 1.57142857; }
     .u-pagination-list > li > a, .u-pagination-list > li > span {
       display: inline-block;
       text-decoration: none;
@@ -6768,9 +6771,15 @@ input.u-button[type="submit"] {
     margin: 5px;
     float: left;
     min-width: 120px; }
+    .u-pagination .data_per_select > span {
+      display: inline-block;
+      line-height: 36px;
+      float: left; }
     .u-pagination .data_per_select .u-select {
       width: 50px;
-      margin: 0 6px; }
+      margin: 0 6px;
+      height: 36px;
+      float: left; }
       .u-pagination .data_per_select .u-select .u-select-selection {
         height: 36px; }
         .u-pagination .data_per_select .u-select .u-select-selection .u-select-selection-rendered {
@@ -6790,20 +6799,26 @@ input.u-button[type="submit"] {
   .u-pagination .page_jump {
     float: left;
     margin: 5px; }
+    .u-pagination .page_jump > span {
+      display: inline-block;
+      line-height: 36px;
+      float: left; }
   .u-pagination .page_jump_value {
     outline: none;
     -webkit-appearance: none;
     background: #fff;
     border-radius: 4px;
-    line-height: 32px;
     width: 50px;
-    margin: 0 6px;
     text-align: center;
     border: 1px solid #d7d7d7; }
-  .u-pagination .page_jump_btn {
+  .u-pagination .page_jump_btn,
-    margin-top: -3px;
+  .u-pagination .page_jump_value {
-    margin-left: 10px;
+    margin: 0 6px;
-    border-color: #d7d7d7; }
+    padding: 0;
+    height: 36px;
+    line-height: 34px;
+    box-sizing: border-box;
+    float: left; }
   .u-pagination-total {
     float: left;
     height: 36px;
@@ -6811,6 +6826,15 @@ input.u-button[type="submit"] {
     margin: 5px; }
     .u-pagination-total span {
       padding: 0 5px; }
+  .u-pagination.u-pagination-disabled .u-pagination-disabled-mask {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 46px;
+    background: rgba(255, 255, 255, 0.6);
+    z-index: 2;
+    cursor: not-allowed; }
 
 .pagination-state {
   float: left;
@@ -6917,15 +6941,29 @@ input.u-button[type="submit"] {
   margin: 0 5px;
   height: 18px;
   line-height: 18px;
-  font-size: 14px; }
+  font-size: 14px;
+  white-space: nowrap;
+  cursor: pointer;
+  outline: none;
+  position: relative;
+  line-height: 1;
+  vertical-align: middle; }
   .u-checkbox.disabled .u-checkbox-label {
     cursor: not-allowed;
     opacity: 0.5; }
   .u-checkbox input[type='checkbox'] {
-    display: none;
+    position: absolute;
-    cursor: pointer; }
+    z-index: 3;
+    cursor: pointer;
+    opacity: 0;
+    box-sizing: border-box;
+    padding: 0;
+    width: 100%;
+    height: 100%; }
   .u-checkbox input[disabled] {
     cursor: not-allowed; }
+  .u-checkbox input[type='checkbox']:focus + .u-checkbox-label:before {
+    border-color: #1e88e5; }
   .u-checkbox.is-checked .u-checkbox-label:before {
     box-shadow: inset 0 0 0 10px rgb(30,136,229);
     border-color: rgb(30,136,229); }
@@ -6977,22 +7015,37 @@ input.u-button[type="submit"] {
   box-shadow: inset 0 0 0 10px rgb(76,175,80);
   border-color: rgb(76,175,80); }
 
+.u-checkbox.u-checkbox-success input[type='checkbox']:focus + .u-checkbox-label:before {
+  border-color: rgb(76,175,80); }
+
 .u-checkbox.u-checkbox-warning.is-checked .u-checkbox-label:before {
   box-shadow: inset 0 0 0 10px rgb(255,152,0);
   border-color: rgb(255,152,0); }
 
+.u-checkbox.u-checkbox-warning input[type='checkbox']:focus + .u-checkbox-label:before {
+  border-color: rgb(255,152,0); }
+
 .u-checkbox.u-checkbox-danger.is-checked .u-checkbox-label:before {
   box-shadow: inset 0 0 0 10px rgb(244,67,54);
   border-color: rgb(244,67,54); }
 
+.u-checkbox.u-checkbox-danger input[type='checkbox']:focus + .u-checkbox-label:before {
+  border-color: rgb(244,67,54); }
+
 .u-checkbox.u-checkbox-dark.is-checked .u-checkbox-label:before {
   box-shadow: inset 0 0 0 10px rgb(97,97,97);
   border-color: rgb(97,97,97); }
 
+.u-checkbox.u-checkbox-dark input[type='checkbox']:focus + .u-checkbox-label:before {
+  border-color: rgb(97,97,97); }
+
 .u-checkbox.u-checkbox-info.is-checked .u-checkbox-label:before {
   box-shadow: inset 0 0 0 10px rgb(0,188,212);
   border-color: rgb(0,188,212); }
 
+.u-checkbox.u-checkbox-info input[type='checkbox']:focus + .u-checkbox-label:before {
+  border-color: rgb(0,188,212); }
+
 /* FormGroup */
 /*  Navlayout  */
 /* keyframes 定义 */
@@ -7530,7 +7583,8 @@ ul {
     zoom: 1;
     position: absolute;
     right: 4px;
-    padding: 0 0 0 8px; }
+    padding: 0 0 0 8px;
+    top: -3px; }
   .u-select-selection--multiple .u-select-selection-choice-remove:before {
     display: block;
     font-family: "uf"; }
@@ -8872,11 +8926,13 @@ ul {
       top: 0px;
       left: 3px; }
 
-.u-filter-dropdown-menu-wrap .u-dropdown-menu li.u-dropdown-menu-item {
+.u-filter-dropdown-menu-wrap {
-  line-height: 32px;
+  z-index: 1800; }
-  height: 32px;
+  .u-filter-dropdown-menu-wrap .u-dropdown-menu li.u-dropdown-menu-item {
-  padding: 0px 16px 0 16px;
+    line-height: 32px;
-  cursor: pointer; }
+    height: 32px;
+    padding: 0px 16px 0 16px;
+    cursor: pointer; }
 
 .u-checkbox {
   height: 16px;

docs/api.md

@@ -54,6 +54,9 @@ import 'bee-table/build/Table.css';
 | onFilterClear       | 清除过滤条件的回调函数，回调参数为清空的字段 | function | (field) => ()
 | headerScroll       | 表头下是否显示滚动条 | bool| false
 | sort       | 排序的属性 | object| {  mode:'single'//单列排序,  backSource:false //默认是前端排序，值为true为后端排序 } mode:multiple-多列排序
+| syncHover       | 是否同步Hover状态到左侧Checkbox，关闭此功能有助于提升性能 | bool| true
+
+
 *注意: data参数中的key值必需，否则会导致部分功能出现问题！建议使用唯一的值，如id*
 
 
@@ -80,6 +83,8 @@ import 'bee-table/build/Table.css';
 | filterDropdownData | 下拉条件自定义数据，filterDropdownAuto=manual生效，传入格式：[{ key : "自定义", value : "自定义" }] | array | [] |
 | filterDropdownFocus | 触发点击下拉条件的回调，一般用于异步点击请求数据使用 | function | () => () |
 | filterDropdownType | 下拉条件类型，分为 string 和 number 条件类型 | string | string
+| filterDropdownIncludeKeys | 能够设置指定的下拉条件项，通过设置keys 其中string条件可设置:LIKE,ULIKE,EQ,UEQ,START,END.number条件可设置:GT,GTEQ,LT,LTEQ,EQ,UEQ | array | [] 不设置此属性为显示所有
+| filterInputNumberOptions | 数值框接收的props，具体属性参考bee-input-number | object | null
 
 {% include "mixin.md"%}
 

package.json

@@ -1,6 +1,6 @@
 {
  "name": "bee-table",
- "version": "1.6.10-beta.1",
+ "version": "1.6.15",
  "description": "Table ui component for react",
  "keywords": [
   "react",
@@ -11,7 +11,7 @@
   "Table"
  ],
  "engines": {
-  "node": ">=4.0.0"
+  "node": ">=6.0.0"
  },
  "jest": {
   "moduleFileExtensions": [
@@ -56,15 +56,16 @@
   "bee-loading": "^1.0.3",
   "bee-locale": "0.0.11",
   "bee-menus": "^1.0.7",
+  "bee-modal": "^1.0.9",
   "bee-popover": "^1.0.2",
   "bee-select": "^1.0.21",
   "classnames": "^2.2.5",
+  "component-classes": "^1.2.6",
   "lodash.clonedeep": "^4.5.0",
   "object-path": "^0.11.3",
   "shallowequal": "^1.0.2",
   "throttle-debounce": "^2.0.1",
   "tinper-bee-core": "latest",
-  "component-classes": "^1.2.6",
   "warning": "^3.0.0"
  },
  "peerDependencies": {
@@ -90,8 +91,8 @@
   "enzyme": "^2.9.1",
   "es5-shim": "~4.1.10",
   "jest": "^22.0.4",
-  "react": "^15.5.0",
+  "react": "^16.6.3",
   "react-addons-test-utils": "^15.5.0",
-  "react-dom": "^15.5.0"
+  "react-dom": "^16.6.3"
  }
 }

src/FilterDropDown.js

@@ -27,24 +27,21 @@ class FilterDropDown extends Component {
      * @param {*} s 选中的selectRecord
      */
     onSelectDropdown = (item) => {
-        let { onSelectDropdown, dataText, filterDropdownType } = this.props;
+        let { onSelectDropdown, filterDropdownType } = this.props;
         if (onSelectDropdown) {
-            if (dataText != "") {
+            if (filterDropdownType == 'string') {
-                if (filterDropdownType == 'string') {
+                this.setState({
-                    this.setState({
+                    selectValue: [item.key]
-                        selectValue: [item.key]
+                }, () => {
-                    }, () => {
+                    onSelectDropdown(item);
-                        onSelectDropdown(item);
+                });
-                    });
+            }
-                }
+            if (filterDropdownType == 'number') {
-                if (filterDropdownType == 'number') {
+                this.setState({
-                    this.setState({
+                    selectNumberValue: [item.key]
-                        selectNumberValue: [item.key]
+                }, () => {
-                    }, () => {
+                    onSelectDropdown(item);
-                        onSelectDropdown(item);
+                });
-                    });
-                }
-
             }
         }
     }
@@ -57,8 +54,8 @@ class FilterDropDown extends Component {
         let { onClickClear } = this.props;
         if (onClickClear) {
             this.setState({
-                selectValue: [],
+                // selectValue: [],
-                selectNumberValue: []
+                // selectNumberValue: []
             }, () => {
                 onClickClear();
             });
@@ -72,35 +69,80 @@ class FilterDropDown extends Component {
      */
     getMenu = () => {
         let { selectValue, selectNumberValue } = this.state;
-        let { filterDropdownType } = this.props;
+        let { filterDropdownType, filterDropdownIncludeKeys } = this.props;
         let locale = getComponentLocale(this.props, this.context, 'Table', () => i18n);
-        switch (filterDropdownType) {
+        let stringEnum = {
-            case 'string':
+            LIKE: 'include',
-                return <Menu
+            ULIKE: 'exclusive',
-                    onSelect={this.onSelectDropdown}
+            EQ: 'equal',
-                    selectedKeys={selectValue}
+            UEQ: 'unequal',
-                >
+            START: 'begin',
-                    <Item key="LIKE">{locale['include']}</Item>
+            END: 'end'
-                    <Item key="ULIKE">{locale['exclusive']}</Item>
+        };
-                    <Item key="EQ">{locale['equal']}</Item>
+        let numberEnum = {
-                    <Item key="UEQ">{locale['unequal']}</Item>
+            GT: 'greater_than',
-                    <Item key="START">{locale['begin']}</Item>
+            GTEQ: 'great_than_equal_to',
-                    <Item key="END">{locale['end']}</Item>
+            LT: 'less_than',
-                </Menu>
+            LTEQ: 'less_than_equal_to',
-            case 'number':
+            EQ: 'be_equal_to',
-                return <Menu
+            UEQ: 'not_equal_to'
-                    onSelect={this.onSelectDropdown}
+        };
-                    selectedKeys={selectNumberValue}
+        if (filterDropdownIncludeKeys != undefined) {
-                >
+            switch (filterDropdownType) {
-                    <Item key="GT">{locale['greater_than']}</Item>
+                case 'string':
-                    <Item key="GTEQ">{locale['great_than_equal_to']}</Item>
+                    return <Menu
-                    <Item key="LT">{locale['less_than']}</Item>
+                        onSelect={this.onSelectDropdown}
-                    <Item key="LTEQ">{locale['less_than_equal_to']}</Item>
+                        selectedKeys={selectValue}
-                    <Item key="EQ">{locale['be_equal_to']}</Item>
+                    >
-                    <Item key="UEQ">{locale['not_equal_to']}</Item>
+                        {
-                </Menu>
+                            filterDropdownIncludeKeys.map(item => {
-            default:
+                                return <Item key={item}>{locale[stringEnum[item]]}</Item>
-                return <div></div>;
+                            })
+                        }
+                    </Menu>
+                case 'number':
+                    return <Menu
+                        onSelect={this.onSelectDropdown}
+                        selectedKeys={selectNumberValue}
+                    >
+                        {
+                            filterDropdownIncludeKeys.map(item => {
+                                return <Item key={item}>{locale[numberEnum[item]]}</Item>
+                            })
+                        }
+                    </Menu>
+                default:
+                    return <div></div>;
+            }
+        } else {
+            switch (filterDropdownType) {
+                case 'string':
+                    return <Menu
+                        onSelect={this.onSelectDropdown}
+                        selectedKeys={selectValue}
+                    >
+                        <Item key="LIKE">{locale['include']}</Item>
+                        <Item key="ULIKE">{locale['exclusive']}</Item>
+                        <Item key="EQ">{locale['equal']}</Item>
+                        <Item key="UEQ">{locale['unequal']}</Item>
+                        <Item key="RLIKE">{locale['begin']}</Item>
+                        <Item key="LLIKE">{locale['end']}</Item>
+                    </Menu>
+                case 'number':
+                    return <Menu
+                        onSelect={this.onSelectDropdown}
+                        selectedKeys={selectNumberValue}
+                    >
+                        <Item key="GT">{locale['greater_than']}</Item>
+                        <Item key="GTEQ">{locale['great_than_equal_to']}</Item>
+                        <Item key="LT">{locale['less_than']}</Item>
+                        <Item key="LTEQ">{locale['less_than_equal_to']}</Item>
+                        <Item key="EQ">{locale['be_equal_to']}</Item>
+                        <Item key="UEQ">{locale['not_equal_to']}</Item>
+                    </Menu>
+                default:
+                    return <div></div>;
+            }
         }
     }
     render() {

src/FilterType.js

@@ -33,13 +33,15 @@ class FilterType extends Component {
      */
     clearFilter = () => {
         let { onFilterClear, dataIndex } = this.props;
-        this.setState({
+        if (this.state.value !== "") {
-            value: "",//清空值
+            this.setState({
-            condition: this.props.filterDropdownType == 'string' ? 'LIKE' : 'EQ'//切回默认查询条件
+                value: "",//清空值
-        }, () => {
+                condition: this.props.filterDropdownType == 'string' ? 'LIKE' : 'EQ'//切回默认查询条件
-            //调用清除方法参数为当前字段的field
+            }, () => {
-            onFilterClear && onFilterClear(dataIndex);
+                //调用清除方法参数为当前字段的field
-        });
+                onFilterClear && onFilterClear(dataIndex);
+            });
+        }
     }
 
     /**
@@ -59,7 +61,7 @@ class FilterType extends Component {
     changeTextCall = (e) => {
         let { onFilterChange, dataIndex } = this.props;
         if (e.keyCode == 13) {
-            onFilterChange(dataIndex, e.target.value, this.state.condition);
+            e.target.value !== "" && onFilterChange(dataIndex, e.target.value, this.state.condition);
         }
     }
     /**
@@ -82,7 +84,7 @@ class FilterType extends Component {
         this.setState({
             condition: item.key
         }, () => {
-            onFilterChange && onFilterChange(dataIndex, this.state.value, this.state.condition);
+            this.state.value !== "" && onFilterChange && onFilterChange(dataIndex, this.state.value, this.state.condition);
         });
     }
 
@@ -157,7 +159,7 @@ class FilterType extends Component {
      * @returns
      */
     renderControl = (rendertype) => {
-        let { dataIndex, filterDropdown, filterDropdownType, format, className, onChange, onSelectDropdown, clsPrefix, locale } = this.props;
+        let { filterInputNumberOptions, filterDropdownIncludeKeys, dataIndex, filterDropdown, filterDropdownType, format, className, onChange, onSelectDropdown, clsPrefix, locale } = this.props;
         switch (rendertype) {
             case 'text':
                 return <div className={`${clsPrefix} filter-wrap`}>
@@ -177,12 +179,14 @@ class FilterType extends Component {
                         isShowClear={this.state.value}
                         isShowCondition={filterDropdown}
                         filterDropdownType={filterDropdownType}
+                        filterDropdownIncludeKeys={filterDropdownIncludeKeys}
                     >
                     </FilterDropDown>
                 </div>
             case 'number':
                 return <div className={`${clsPrefix} filter-wrap`}>
                     <InputNumber
+                        {...filterInputNumberOptions}
                         className={className}
                         value={this.state.value}
                         onChange={this.changeNumber}
@@ -197,6 +201,7 @@ class FilterType extends Component {
                         isShowClear={this.state.value != 0}
                         isShowCondition={filterDropdown}
                         filterDropdownType={filterDropdownType}
+                        filterDropdownIncludeKeys={filterDropdownIncludeKeys}
                     >
                     </FilterDropDown>
                 </div>
@@ -215,6 +220,7 @@ class FilterType extends Component {
                         isShowCondition={filterDropdown}
                         isShowClear={this.state.value}
                         filterDropdownType={filterDropdownType}
+                        filterDropdownIncludeKeys={filterDropdownIncludeKeys}
                     >
                     </FilterDropDown></div>
             case 'date':
@@ -235,6 +241,7 @@ class FilterType extends Component {
                         isShowCondition={filterDropdown}
                         isShowClear={this.state.value}
                         filterDropdownType={filterDropdownType}
+                        filterDropdownIncludeKeys={filterDropdownIncludeKeys}
                     >
                     </FilterDropDown>
                 </div>
@@ -259,6 +266,7 @@ class FilterType extends Component {
                         onClickClear={this.clearFilter}
                         isShowCondition={filterDropdown}
                         isShowClear={this.state.value}
+                        filterDropdownIncludeKeys={filterDropdownIncludeKeys}
                     >
                     </FilterDropDown>
                 </div>
@@ -270,6 +278,7 @@ class FilterType extends Component {
                     />
                     <FilterDropDown locale={locale}
                         onSelectDropdown={onSelectDropdown}
+                        filterDropdownIncludeKeys={filterDropdownIncludeKeys}
                     >
                     </FilterDropDown>
                 </div>

src/Table.js

@@ -42,7 +42,13 @@ const propTypes = {
   getBodyWrapper: PropTypes.func,
   children: PropTypes.node,
   draggable: PropTypes.bool,
-  minColumnWidth: PropTypes.number
+  minColumnWidth: PropTypes.number,
+  filterable: PropTypes.bool,
+  filterDelay: PropTypes.number,
+  onFilterChange: PropTypes.func,
+  onFilterClear: PropTypes.func,
+  syncHover: PropTypes.bool,
+
 };
 
 const defaultProps = {
@@ -71,7 +77,8 @@ const defaultProps = {
   emptyText: () => 'No Data',
   columns:[],
   minColumnWidth: 80,
-  locale:{}
+  locale:{},
+  syncHover: true
 };
 
 class Table extends Component {
@@ -401,7 +408,9 @@ class Table extends Component {
           filterdropdownauto: column.filterDropdownAuto,//是否自定义数据
           filterdropdowndata: column.filterDropdownData,//自定义数据格式
           filterdropdownfocus: column.filterDropdownFocus,//焦点触发函数回调
-          filterdropdowntype: column.filterDropdownType//下拉的类型分为 String,Number 默认是String
+          filterdropdowntype: column.filterDropdownType,//下拉的类型分为 String,Number 默认是String
+          filterdropdownincludekeys: column.filterDropdownIncludeKeys,//下拉条件按照指定的keys去显示
+          filterinputnumberoptions: column.filterInputNumberOptions//设置数值框内的详细属性
         });
       }
     });
@@ -961,9 +970,14 @@ class Table extends Component {
   }
 
   handleRowHover(isHover, key) {
-    this.store.setState({
+    //增加新的API，设置是否同步Hover状态，提高性能，避免无关的渲染
-      currentHoverKey: isHover ? key : null,
+    let { syncHover } = this.props;
-    });
+    if(syncHover){
+      this.store.setState({
+        currentHoverKey: isHover ? key : null,
+      });
+    }
+
   }
 
   render() {

src/Table.scss

@@ -687,6 +687,7 @@ $checkbox-height:16px;
 }
 
 .u-filter-dropdown-menu-wrap {
+    z-index: 1800;
     .u-dropdown-menu {
         li.u-dropdown-menu-item {
             line-height: 32px;

src/TableHeader.js

@@ -400,6 +400,7 @@ class TableHeader extends Component {
             onFilterClear={this.handlerFilterClear}//清除回调
             filterDropdown={rows[1][index]["filterdropdown"]}//是否显示下拉条件
             filterDropdownType={rows[1][index]["filterdropdowntype"]}//下拉的条件类型为string,number
+            filterDropdownIncludeKeys={rows[1][index]["filterdropdownincludekeys"]}//下拉条件按照指定的keys去显示
           />
         );
       //数值输入
@@ -415,6 +416,8 @@ class TableHeader extends Component {
             onFilterClear={this.handlerFilterClear}//清除回调
             filterDropdown={rows[1][index]["filterdropdown"]}
             filterDropdownType={rows[1][index]["filterdropdowntype"]}//下拉的条件类型为string,number
+            filterDropdownIncludeKeys={rows[1][index]["filterdropdownincludekeys"]}//下拉条件按照指定的keys去显示
+            filterInputNumberOptions={rows[1][index]["filterinputnumberoptions"]}//设置数值框内的详细属性
           />
         );
       //下拉框选择
@@ -442,12 +445,14 @@ class TableHeader extends Component {
             rendertype={type}
             className={`${clsPrefix} filter-dropdown`}
             data={selectDataSource}
+            notFoundContent={"Loading"}//没有数据显示的默认字
             dataIndex={dataIndex}//字段
             onFilterChange={this.handlerFilterChange}//输入框回调
             onFilterClear={this.handlerFilterClear}//清除回调
             filterDropdown={rows[1][index]["filterdropdown"]}
             onFocus={rows[1][index]["filterdropdownfocus"]}
             filterDropdownType={rows[1][index]["filterdropdowntype"]}//下拉的条件类型为string,number
+            filterDropdownIncludeKeys={rows[1][index]["filterdropdownincludekeys"]}//下拉条件按照指定的keys去显示
           />
         );
       //日期
@@ -464,6 +469,7 @@ class TableHeader extends Component {
             onFilterClear={this.handlerFilterClear}//清除回调
             filterDropdown={rows[1][index]["filterdropdown"]}
             filterDropdownType={rows[1][index]["filterdropdowntype"]}//下拉的条件类型为string,number
+            filterDropdownIncludeKeys={rows[1][index]["filterdropdownincludekeys"]}//下拉条件按照指定的keys去显示
           />
         );
       //日期范围
@@ -480,6 +486,7 @@ class TableHeader extends Component {
             onFilterClear={this.handlerFilterClear}//清除回调
             filterDropdown={rows[1][index]["filterdropdown"]}
             filterDropdownType={rows[1][index]["filterdropdowntype"]}//下拉的条件类型为string,number
+            filterDropdownIncludeKeys={rows[1][index]["filterdropdownincludekeys"]}//下拉条件按照指定的keys去显示
           />
         );
       default: