fix(列筛选后滚动条问题，针对列过滤新增checkMinSize属性): 列筛选后滚动条问题，针对列过滤新增checkMinSize属性

列筛选后滚动条问题，针对列过滤新增checkMinSize属性

build/TableHeader.js

@@ -55,18 +55,18 @@ var TableHeader = function (_Component) {
     };
 
     _this.onDragOver = function (event, data) {
-      if (_this.currentObj.key == data.key) return;
+      if (!_this.currentObj || _this.currentObj.key == data.key) return;
       event.preventDefault();
       _this.props.onDragOver(event, data);
     };
 
     _this.onDragEnter = function (event, data) {
-      if (_this.currentObj.key == data.key) return;
+      if (!_this.currentObj || _this.currentObj.key == data.key) return;
       _this.props.onDragEnter(event, data);
     };
 
     _this.onDrop = function (event, data) {
-      if (_this.currentObj.key == data.key) return;
+      if (!_this.currentObj || _this.currentObj.key == data.key) return;
       _this.props.onDrop(event, data);
     };
 

build/lib/dragColumn.js

@@ -1,4 +1,4 @@
-"use strict";
+'use strict';
 
 Object.defineProperty(exports, "__esModule", {
   value: true
@@ -8,11 +8,13 @@ var _extends = Object.assign || function (target) { for (var i = 1; i < argument
 
 exports["default"] = dragColumn;
 
-var _react = require("react");
+var _react = require('react');
 
 var _react2 = _interopRequireDefault(_react);
 
-var _util = require("./util");
+var _util = require('./util');
+
+var _utils = require('../utils');
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
@@ -52,7 +54,7 @@ function dragColumn(Table) {
 
     DragColumn.prototype.componentWillReceiveProps = function componentWillReceiveProps(nextProps) {
       if (nextProps.columns != this.props.columns) {
-        this.setColumOrderByIndex();
+        this.setColumOrderByIndex(nextProps.columns);
       }
     };
 
@@ -67,13 +69,13 @@ function dragColumn(Table) {
           onDragEnter = _props.onDragEnter,
           onDragOver = _props.onDragOver,
           onDrop = _props.onDrop,
-          others = _objectWithoutProperties(_props, ["data", "dragborder", "draggable", "className", "columns", "onDragStart", "onDragEnter", "onDragOver", "onDrop"]);
+          others = _objectWithoutProperties(_props, ['data', 'dragborder', 'draggable', 'className', 'columns', 'onDragStart', 'onDragEnter', 'onDragOver', 'onDrop']);
 
       var key = new Date().getTime();
       return _react2["default"].createElement(Table, _extends({}, others, {
         columns: this.state.columns,
         data: data,
-        className: className + " u-table-drag-border",
+        className: className + ' u-table-drag-border',
         onDragStart: this.onDragStart,
         onDragOver: this.onDragOver,
         onDrop: this.onDrop,
@@ -89,9 +91,7 @@ function dragColumn(Table) {
   }(_react.Component), _initialiseProps = function _initialiseProps() {
     var _this2 = this;
 
-    this.setColumOrderByIndex = function (columns) {
+    this.setColumOrderByIndex = function (_column) {
-      var _column = [];
-      _extends(_column, columns);
       _column.forEach(function (da, i) {
         da.dragIndex = i;
         da.drgHover = false;
@@ -102,14 +102,19 @@ function dragColumn(Table) {
     };
 
     this.onDragStart = function (event, data) {
+      if (_this2.props.onDragStart) {
         _this2.props.onDragStart(event, data);
+      }
     };
 
     this.onDragOver = function (event, data) {
+      if (_this2.props.onDragOver) {
         _this2.props.onDragOver(event, data);
+      }
     };
 
     this.onDragEnter = function (event, data) {
+      if (data.key == "checkbox") return;
       var _columns = _this2.state.columns;
 
       var columns = [];
@@ -120,14 +125,18 @@ function dragColumn(Table) {
       var current = columns.find(function (da) {
         return da.key == data.key;
       });
+      if (current.fixed) return;
       current.drgHover = true;
       _this2.setState({
         columns: columns
       });
+      if (_this2.props.onDragEnter) {
         _this2.props.onDragEnter(event, data);
+      }
     };
 
     this.onDrop = function (event, data) {
+      if (data.key == "checkbox") return;
       var columns = _this2.state.columns;
 
       var id = event.dataTransfer.getData("Text");
@@ -137,7 +146,8 @@ function dragColumn(Table) {
       var targetIndex = columns.findIndex(function (_da, i) {
         return _da.key == data.key;
       });
-
+      if (columns[objIndex].fixed) return; //固定列不让拖拽
+      if (columns[targetIndex].fixed) return; //固定列不让拖拽
       columns.forEach(function (da, i) {
         da.drgHover = false;
         if (da.key == id) {
@@ -149,13 +159,13 @@ function dragColumn(Table) {
           da.dragIndex = objIndex;
         }
       });
-      var _columns = (0, _util.sortBy)(columns, function (da) {
+      var _columns = columns.sort((0, _util.compare)('dragIndex'));
-        return da.dragIndex;
-      });
       _this2.setState({
-        columns: _columns
+        columns: JSON.parse(JSON.stringify(_columns))
       });
+      if (_this2.props.onDrop) {
         _this2.props.onDrop(event, data);
+      }
     };
 
     this.getTarget = function (evt) {
@@ -163,4 +173,4 @@ function dragColumn(Table) {
     };
   }, _temp;
 }
-module.exports = exports["default"];
+module.exports = exports['default'];

build/lib/filterColumn.js

@@ -20,6 +20,8 @@ var _beeIcon = require("bee-icon");
 
 var _beeIcon2 = _interopRequireDefault(_beeIcon);
 
+var _utils = require("../utils");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 function _defaults(obj, defaults) { var keys = Object.getOwnPropertyNames(defaults); for (var i = 0; i < keys.length; i++) { var key = keys[i]; var value = Object.getOwnPropertyDescriptor(defaults, key); if (value && value.configurable && obj[key] === undefined) { Object.defineProperty(obj, key, value); } } return obj; }
@@ -52,8 +54,7 @@ function filterColumn(Table, Popover) {
 
       var columns = props.columns;
 
-      var _column = [];
+      var _column = (0, _utils.ObjectAssign)(columns);
-      _extends(_column, columns);
       _column.forEach(function (da) {
         da.checked = true;
         da.disable = true;
@@ -67,6 +68,11 @@ function filterColumn(Table, Popover) {
     }
 
     FilterColumn.prototype.componentWillReceiveProps = function componentWillReceiveProps(nextProps) {
+      if (nextProps.columns != this.props.columns) {
+        this.setState({
+          columns: (0, _utils.ObjectAssign)(nextProps.columns)
+        });
+      }
       this.setState({
         showModal: false
       });
@@ -75,17 +81,27 @@ function filterColumn(Table, Popover) {
     FilterColumn.prototype.render = function render() {
       var _props = this.props,
           data = _props.data,
-          prefixCls = _props.prefixCls;
+          prefixCls = _props.prefixCls,
+          scrollPro = _props.scroll;
       var _state = this.state,
           columns = _state.columns,
           showModal = _state.showModal;
 
-      var _columns = [];
+
+      var _columns = [],
+          widthState = 0,
+          scroll = scrollPro;
       columns.forEach(function (da) {
         if (da.disable) {
           _columns.push(da);
         }
+        if (da.width) {
+          widthState++;
+        }
       });
+      if (_columns.length == widthState) {
+        scroll.x = this.getCloumnsScroll(columns);
+      }
 
       var content = _react2["default"].createElement(
         "div",
@@ -105,7 +121,10 @@ function filterColumn(Table, Popover) {
       return _react2["default"].createElement(
         "div",
         { className: prefixCls + "-cont" },
-        _react2["default"].createElement(Table, _extends({}, this.props, { columns: _columns, data: data })),
+        _react2["default"].createElement(Table, _extends({}, this.props, { columns: _columns, data: data,
+          scroll: scroll
+          //  scroll={{x:this.getCloumnsScroll(columns)}}
+        })),
         _react2["default"].createElement(
           "div",
           { className: prefixCls + "-filter-icon" },
@@ -133,7 +152,21 @@ function filterColumn(Table, Popover) {
     var _this2 = this;
 
     this.checkedColumItemClick = function (da) {
+      var checkMinSize = _this2.props.checkMinSize;
+
       da.checked = da.checked ? false : true;
+      // if(checkMinSize)
+      var sum = 0,
+          leng = 0;
+      _this2.state.columns.forEach(function (da) {
+        da.fixed ? "" : leng++;
+        !da.fixed && da.checked ? sum++ : "";
+      });
+      if (sum < checkMinSize) {
+        return;
+      } else {
+        if (sum <= 0) return;
+      }
       da.disable = da.checked ? true : false;
       _this2.setState(_extends({}, _this2.state));
     };
@@ -149,6 +182,7 @@ function filterColumn(Table, Popover) {
       var columns = _this2.state.columns;
 
       return columns.map(function (da, i) {
+        if (!da.fixed) {
           return _react2["default"].createElement(
             "div",
             { key: da.key + "_" + i, className: prefixCls + "-pop-cont-item", onClick: function onClick() {
@@ -161,6 +195,7 @@ function filterColumn(Table, Popover) {
               da.title
             )
           );
+        }
       });
     };
 
@@ -173,6 +208,17 @@ function filterColumn(Table, Popover) {
       });
       _this2.setState(_extends({}, _this2.state));
     };
+
+    this.getCloumnsScroll = function (columns) {
+      var sum = 0;
+      columns.forEach(function (da) {
+        if (da.checked) {
+          sum += da.width;
+        }
+      });
+      console.log("sum", sum);
+      return sum;
+    };
   }, _temp;
 }
 module.exports = exports["default"];

build/lib/util.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
     value: true
 });
 exports.sortBy = sortBy;
+exports.compare = compare;
 /*
 * 快速排序，按某个属性，或按“获取排序依据的函数”，来排序.
 * @method soryBy
@@ -39,3 +40,16 @@ function sortBy(arr, prop, desc) {
     if (desc) ret.reverse();
     return ret;
 };
+
+/**
+ * 数组对象排序
+ * console.log(arr.sort(compare('age')))
+ * @param {} property 
+ */
+function compare(property) {
+    return function (a, b) {
+        var value1 = a[property];
+        var value2 = b[property];
+        return value1 - value2;
+    };
+}

demo/demolist/Demo25.js

@@ -1,10 +1,12 @@
 /**
-*
+* @title 根据列进行过滤、拖拽交换列综合使用案例
-* @title 根据列进行过滤、拖拽综合使用案例
+* @description 新增属性【checkMinSize 】 1. 当所有列都设置了width属性后，需要给table增加checkMinSize属性，[表格最小列数] 2. 所有列不设置width。
-* @description 根据列进行过滤、拖拽综合使用案例
-*
 */
 
+/**注：
+ *  在使用过滤列的时候，如果每一列都设置了width属性，勾选的时候回出现重复列问题。当表格的宽度小于合计宽度的时候，就会出现此问题。 
+ *  必须有个别列不设置width属性，即可避免此问题。
+ */
 import React, { Component } from 'react';
 import Table from '../../src';
 import multiSelect from '../../src/lib/newMultiSelect';
@@ -16,81 +18,7 @@ import Icon from "bee-icon";
 import Checkbox from 'bee-checkbox';
 import Popover from 'bee-popover';
 
-const columns25 = [
+ //Cloumns1
-  {
-    title: "名字",
-    dataIndex: "a",
-    key: "a",
-    width: 100,
-    fixed: "left"
-  },
-  {
-    title: "性别",
-    dataIndex: "b",
-    key: "b",
-    width: 100
-  },
-  {
-    title: "年龄",
-    dataIndex: "c",
-    key: "c",
-    width: 100,
-    sumCol: true,
-    sorter: (a, b) => a.c - b.c
-  },
-  {
-    title: "年龄1",
-    dataIndex: "c1",
-    key: "c1",
-    width: 100,
-    sumCol: true,
-    sorter: (a, b) => a.c - b.c
-  },
-  {
-    title: "年龄2",
-    dataIndex: "c2",
-    key: "c2",
-    width: 100,
-    sumCol: true,
-    sorter: (a, b) => a.c - b.c
-  },
-  {
-    title: "武功级别",
-    dataIndex: "d",
-    width: 100,
-    key: "d",
-   
-  },
-  {
-    title: "操作",
-    dataIndex: "e",
-    key: "e",
-    width: 100,
-    fixed: "right",
-    render(text, record, index) {
-      return (
-        <div style={{position: 'relative'}} title={text} >
-            <a
-                href="#"
-                tooltip={text}
-                onClick={() => {
-                  alert('这是第'+index+'列，内容为:'+text);
-                }}
-              >
-                操作
-              </a>
-        </div>
-      );
-    }
-  }
-];
-
-const data25 = [
-  { a: "杨过rrrrr", b: "男", c: 30, c1: 30, c2: 30,d:'内行',e: "操作", key: "2" },
-  { a: "令狐冲", b: "男", c: 41, c1: 30, c2: 30,d:'大侠',e: "操作", key: "1" },
-  { a: "郭靖", b: "男", c: 25, c1: 30, c2: 30,d:'大侠',e: "操作", key: "3" }
-];
-
 function getCloumns(){
   const column = [
       {
@@ -103,13 +31,13 @@ function getCloumns(){
           title: "订单编号",
           dataIndex: "orderCode",
           key: "orderCode",
-          width: 250, 
+          width: 100, 
       },
       {
           title: "供应商名称",
           dataIndex: "supplierName",
           key: "supplierName",
-          width: 300
+          width: 100
       },
       {
           title: "类型",
@@ -127,7 +55,7 @@ function getCloumns(){
           title: "采购组",
           dataIndex: "purchasingGroup",
           key: "purchasingGroup",
-          width: 100
+           width: 300
       },
       {
           title: "凭证日期",
@@ -178,6 +106,84 @@ function getCloumns(){
   ];
   return column;
 }
+//Cloumns2
+function getCloumns25(){
+  const column = [
+      {
+          title: "序号",
+          dataIndex: "index",
+          key: "index",
+      },
+      {
+          title: "订单编号",
+          dataIndex: "orderCode",
+          key: "orderCode",
+      },
+      {
+          title: "供应商名称",
+          dataIndex: "supplierName",
+          key: "supplierName",
+      },
+      {
+          title: "类型",
+          dataIndex: "type_name",
+          key: "type_name",
+      },
+      {
+          title: "采购组织",
+          dataIndex: "purchasing",
+          key: "purchasing",
+      },
+      {
+          title: "采购组",
+          dataIndex: "purchasingGroup",
+          key: "purchasingGroup",
+      },
+      {
+          title: "凭证日期",
+          dataIndex: "voucherDate",
+          key: "voucherDate",
+          
+      },
+      {
+          title: "审批状态",
+          dataIndex: "approvalState_name",
+          key: "approvalState_name",
+      },
+      {
+          title: "确认状态",
+          dataIndex: "confirmState_name",
+          key: "confirmState_name",
+      }, 
+      {
+          title: "关闭状态",
+          dataIndex: "closeState_name",
+          key: "closeState_name",
+      },
+      {
+          title: "操作",
+          dataIndex: "d",
+          key: "d",
+          width:100,
+          fixed: "right",
+          render(text, record, index) {
+              return (
+                  <div className='operation-btn'>
+                    <a href="#"
+                      tooltip={text}
+                      onClick={() => {
+                        alert('这是第'+index+'列，内容为:'+text);
+                      }}
+                    >
+                      一些操作
+                    </a>
+                  </div>
+              )
+          }
+      }
+  ];
+  return column;
+}
 
 const dataList = [ 
   { 
@@ -210,13 +216,7 @@ const dataList = [
 }, 
 ]
 
-// const DragColumnTable = filterColumn(Table, Popover);
+const DragColumnTable = filterColumn(dragColumn(multiSelect(Table, Checkbox)),Popover);
-// const DragColumnTable = multiSelect(Table, Checkbox);
-// let ComplexTable = multiSelect(Table, Checkbox);
-
-// const DragColumnTable = multiSelect(Table, Checkbox);
-const DragColumnTable = filterColumn(multiSelect(Table, Checkbox), Popover); 
-// const DragColumnTable = dragColumn(filterColumn(Table, Popover));
 
 const defaultProps25 = {
   prefixCls: "bee-table"
@@ -248,9 +248,11 @@ class Demo25 extends Component {
     data={dataList} 
     getSelectedDataFunc={this.getSelectedDataFunc}
     bordered
-    // dragborder={true} 
+    checkMinSize={6}
+    draggable={true}
     multiSelect={{type: "checkbox"}}
-    scroll={{x:this.getCloumnsScroll(columns), y: 150}}
+    scroll={{x:"130%", y: 150}}
+    // scroll={{x:this.getCloumnsScroll(columns), y: 150}}
     /></div>
   }
 }

package.json

@@ -1,6 +1,6 @@
 {
  "name": "bee-table",
- "version": "1.2.6",
+ "version": "1.2.7",
  "description": "Table ui component for react",
  "keywords": [
   "react",
@@ -51,6 +51,7 @@
   "bee-popover": "^1.0.2",
   "bee-select": "^1.0.8",
   "classnames": "^2.2.5",
+  "lodash.clonedeep": "^4.5.0",
   "object-path": "^0.11.3",
   "shallowequal": "^1.0.2",
   "tinper-bee-core": "latest",

src/TableHeader.js

@@ -56,18 +56,18 @@ class TableHeader extends Component{
   }
   
   onDragOver=(event,data)=>{
-    if(this.currentObj.key == data.key)return;
+    if(!this.currentObj || this.currentObj.key == data.key)return;
     event.preventDefault();
     this.props.onDragOver(event,data);
   }
 
   onDragEnter=(event,data)=>{
-    if(this.currentObj.key == data.key)return;
+    if(!this.currentObj || this.currentObj.key == data.key)return;
     this.props.onDragEnter(event,data);
   }
 
   onDrop=(event,data)=>{
-    if(this.currentObj.key == data.key)return;
+    if(!this.currentObj ||this.currentObj.key == data.key)return;
     this.props.onDrop(event,data);
   }
 

src/lib/dragColumn.js

@@ -1,5 +1,6 @@
 import React, { Component } from "react";
-import {sortBy} from './util';
+import {compare} from './util';
+import {ObjectAssign} from '../utils';
 /**
  * 参数: 列拖拽
  * @param {*} Table
@@ -17,13 +18,11 @@ export default function dragColumn(Table) {
 
     componentWillReceiveProps(nextProps){
       if(nextProps.columns != this.props.columns){
-        this.setColumOrderByIndex();
+        this.setColumOrderByIndex(nextProps.columns);
       }
     }
  
-    setColumOrderByIndex = (columns)=>{
+    setColumOrderByIndex = (_column)=>{
-      let _column = [];
-      Object.assign(_column,columns); 
       _column.forEach((da,i) => {
           da.dragIndex = i;
           da.drgHover = false;
@@ -35,32 +34,42 @@ export default function dragColumn(Table) {
 
 
     onDragStart=(event,data)=>{
+      if(this.props.onDragStart){
         this.props.onDragStart(event,data)
       }
+    }
 
     onDragOver=(event,data)=>{
+      if(this.props.onDragOver){
        this.props.onDragOver(event,data)
       }
+    }
 
     onDragEnter=(event,data)=>{
+      if(data.key == "checkbox")return;
       const {columns:_columns} = this.state;
       let columns = [];
       Object.assign(columns,_columns);
       columns.forEach((da)=>da.drgHover = false)
       let current = columns.find((da)=>da.key == data.key);
+      if(current.fixed)return;
       current.drgHover = true;
       this.setState({
         columns
       });
+      if(this.props.onDragEnter){
         this.props.onDragEnter(event,data);
       }
+    }
 
     onDrop=(event,data)=>{
+      if(data.key == "checkbox")return;
       let {columns} = this.state;
       const id = event.dataTransfer.getData("Text");
       let objIndex =  columns.findIndex((_da,i)=>_da.key == id);
       let targetIndex = columns.findIndex((_da,i)=>_da.key == data.key);
-
+      if(columns[objIndex].fixed)return;//固定列不让拖拽
+      if(columns[targetIndex].fixed)return;//固定列不让拖拽
       columns.forEach((da,i)=>{
         da.drgHover = false;
         if(da.key == id){//obj
@@ -70,12 +79,14 @@ export default function dragColumn(Table) {
           da.dragIndex = objIndex;
         }
       });
-     let _columns = sortBy(columns,(da)=>da.dragIndex);
+     let _columns =  columns.sort(compare('dragIndex'));
       this.setState({
-        columns:_columns,
+        columns: JSON.parse(JSON.stringify(_columns)),
       });
+      if(this.props.onDrop){
         this.props.onDrop(event,data);
       }
+    }
  
     getTarget=(evt)=>{
         return evt.target || evt.srcElement;

src/lib/filterColumn.js

@@ -1,6 +1,7 @@
 import React, { Component } from "react";
 import Checkbox from 'bee-checkbox';
 import Icon from "bee-icon";
+import {ObjectAssign} from '../utils';
 /**
  * 参数: 过滤表头
  * @param {*} Table
@@ -18,8 +19,7 @@ export default function filterColumn(Table,Popover) {
     constructor(props) {
       super(props);
       const {columns} = props;
-      let _column = [];
+      let _column = ObjectAssign(columns);
-      Object.assign(_column,columns);
       _column.forEach(da => {
         da.checked = true;
         da.disable = true;
@@ -32,13 +32,30 @@ export default function filterColumn(Table,Popover) {
     }
 
     componentWillReceiveProps(nextProps){
+      if(nextProps.columns != this.props.columns){
+        this.setState({
+          columns:ObjectAssign(nextProps.columns)
+        })
+      }
       this.setState({
         showModal:false
       })
     }
 
     checkedColumItemClick = (da)=>{
+      let {checkMinSize} = this.props;
       da.checked = da.checked?false:true;
+      // if(checkMinSize)
+      let sum = 0,leng=0;
+      this.state.columns.forEach(da => {
+        da.fixed?"":leng++;
+        !da.fixed && da.checked?sum++:"";
+      });
+      if(sum < checkMinSize){
+        return;
+      }else{
+        if(sum<=0)return;
+      }
       da.disable  = da.checked?true:false;
       this.setState({
         ...this.state
@@ -54,10 +71,15 @@ export default function filterColumn(Table,Popover) {
     getCloumItem=()=>{
       const {prefixCls} = this.props;
       const {columns} = this.state;
-      return columns.map((da,i)=> (<div key={da.key+"_"+i} className={`${prefixCls}-pop-cont-item`} onClick={()=>{this.checkedColumItemClick(da)}}>
+      return columns.map((da,i)=> 
+      {
+        if(!da.fixed){
+          return (<div key={da.key+"_"+i} className={`${prefixCls}-pop-cont-item`} onClick={()=>{this.checkedColumItemClick(da)}}>
             <Checkbox id={da.key} checked={da.checked}/> 
             <span>{da.title}</span>
-        </div>))
+          </div>)
+        }
+      })
     }
 
     clear=()=>{
@@ -71,15 +93,33 @@ export default function filterColumn(Table,Popover) {
       })
     }
 
+    getCloumnsScroll=(columns)=>{
+      let sum = 0;
+      columns.forEach((da)=>{
+        if(da.checked){
+          sum += da.width;
+        }
+      })
+      console.log("sum",sum);
+      return (sum);
+    }
+
     render() {
-      const {data,prefixCls} = this.props;
+      const {data,prefixCls,scroll:scrollPro} = this.props;
       const {columns,showModal} = this.state;
-      let _columns = [];
+
+      let _columns = [],widthState=0,scroll=scrollPro;
       columns.forEach((da)=>{
         if(da.disable){
           _columns.push(da);
         }
+        if(da.width){
+          widthState++;
+        }
       });
+      if(_columns.length == widthState){
+        scroll.x = this.getCloumnsScroll(columns);
+      }
       
       let content = (
         <div className={`${prefixCls}-pop-cont`}> 
@@ -92,7 +132,10 @@ export default function filterColumn(Table,Popover) {
       </div>);
 
       return <div className={`${prefixCls}-cont`}>
-          <Table {...this.props} columns={_columns} data={data} />
+          <Table {...this.props} columns={_columns} data={data}  
+          scroll={scroll}
+          //  scroll={{x:this.getCloumnsScroll(columns)}}
+           />
           <div className={`${prefixCls}-filter-icon`}>
             <Popover
               id="filter_column_popover"

src/lib/util.js

@@ -35,3 +35,16 @@ export function sortBy(arr, prop, desc) {
   if(desc) ret.reverse();
   return ret;
 };
+
+/**
+ * 数组对象排序
+ * console.log(arr.sort(compare('age')))
+ * @param {} property 
+ */
+export function compare(property){
+    return function(a,b){
+        var value1 = a[property];
+        var value2 = b[property];
+        return value1 - value2;
+    }
+}