feat: 增加列拷贝钩子函数

tinper-bee · Sep 29, 2020 · c6e520d · c6e520d
1 parent b23c699
commit c6e520d
Show file tree

Hide file tree

Showing 10 changed files with 2,612 additions and 2,444 deletions.
diff --git a/build/TableHeader.js b/build/TableHeader.js
@@ -830,6 +830,8 @@ var _initialiseProps = function _initialiseProps() {
     }
     var event = _utils.Event.getEvent(e),
         target = _utils.Event.getTarget(event);
+    event.preventDefault();
+    event.stopPropagation();
     _this8.currentDome.setAttribute('draggable', false); //添加交换列效果
     // let data = this.getCurrentEventData(this._dragCurrent);
     // if(!data){
@@ -858,6 +860,8 @@ var _initialiseProps = function _initialiseProps() {
     var event = _utils.Event.getEvent(e),
         target = _utils.Event.getTarget(event);
     _this8._dragCurrent.setAttribute("style", "");
+    event.preventDefault();
+    event.stopPropagation();
     // this._dragCurrent.style = "";
     document.getElementById(_this8._table_none_cont_id).innerHTML = "";
 

diff --git a/build/TableRow.js b/build/TableRow.js
@@ -139,7 +139,8 @@ var TableRow = function (_Component) {
       var event = _utils.Event.getEvent(e),
           _target = _utils.Event.getTarget(event),
           target = _target.parentNode;
-
+      event.preventDefault();
+      event.stopPropagation();
       var currentKey = event.dataTransfer.getData("text");
       var targetKey = target.getAttribute("data-row-key");
 
@@ -449,9 +450,10 @@ var TableRow = function (_Component) {
     if (this.props.treeType) {
       this.setRowParentIndex();
     }
-    if (syncRowHeight) {
-      this.setRowHeight();
-    }
+    // if(syncRowHeight){
+    //   this.setRowHeight()
+    // }
+    this.setRowHeight();
   };
 
   TableRow.prototype.componentWillUnmount = function componentWillUnmount() {

diff --git a/build/lib/bigData.js b/build/lib/bigData.js
@@ -96,6 +96,7 @@ function bigData(Table) {
         _this.treeType = isTreeType;
         //fix: 滚动加载场景中,数据动态改变下占位计算错误的问题(26 Jun)
         if (newData.toString() !== props.data.toString()) {
+
           _this.cachedRowHeight = []; //缓存每行的高度
           _this.cachedRowParentIndex = [];
           _this.computeCachedRowParentIndex(newData);

diff --git a/dist/demo.js b/dist/demo.js
diff --git a/dist/demo.js.map b/dist/demo.js.map
diff --git a/docs/api.md b/docs/api.md
@@ -86,9 +86,11 @@ import 'bee-table/build/Table.css';
 | [v2.2.8新增]autoCheckedByClickRows | 设置为 false 时，表格行点击事件，不会自动勾选复选框 | bool | true |
 | [v2.2.8新增]autoSelect | 树型表格勾选时，是否开启子节点的联动 | bool | false |
 | onPaste | 粘贴的回调函数 | func(event,positon) | - |
+| onCopy | 复制列的回调函数 | func(data,event) | - |
 | onBodyScroll | table body 滚动的回调 | func(scrollTop) | - |
 | syncRowHeight | 滚动是否同步高度,关闭此功能有利于提高性能，注：树表和主子表不允许关闭 | true | - |
 
+
 > 快捷键部分参考示例 (快捷键在table中的简单使用应用)
 
 *注意: data参数中的key值必需，否则会导致部分功能出现问题！建议使用唯一的值，如id*

diff --git a/src/Table.js b/src/Table.js
@@ -436,7 +436,7 @@ class Table extends Component {
   getHeader(columns, fixed, leftFixedWidth, rightFixedWidth) {
     const { lastShowIndex } = this.state;
     const { filterDelay, onFilterChange, onFilterClear, filterable, showHeader, expandIconAsCell, clsPrefix, onDragStart, onDragEnter, onDragOver, onDrop,onDragEnd, draggable,
-      onMouseDown, onMouseMove, onMouseUp, dragborder, onThMouseMove, dragborderKey, minColumnWidth, headerHeight,afterDragColWidth,headerScroll ,bordered,onDropBorder,onDraggingBorder, bodyDisplayInRow, headerEventNoStop} = this.props;
+      onMouseDown, onMouseMove, onMouseUp, dragborder, onThMouseMove, dragborderKey, minColumnWidth, headerHeight,afterDragColWidth,headerScroll ,bordered,onDropBorder,onDraggingBorder, bodyDisplayInRow, headerEventNoStop, onCopy} = this.props;
     this.columnsChildrenList = []; //复杂表头拖拽，重新render表头前，将其置空
     const rows = this.getHeaderRows(columns);
     if (expandIconAsCell && fixed !== 'right') {
@@ -488,6 +488,7 @@ class Table extends Component {
         rightFixedWidth = {rightFixedWidth}
         bodyDisplayInRow = {bodyDisplayInRow}
         eventNoStop = {headerEventNoStop}
+        onCopy = {onCopy}
       />
     ) : null;
   }
@@ -1449,6 +1450,9 @@ class Table extends Component {
     if (props.bordered) {
       className += ` ${clsPrefix}-bordered`;
     }
+    if (props.onCopy) {
+      className += ` copy`;
+    }
     className += ` ${clsPrefix}-scroll-position-${this.state.scrollPosition}`;
     //如果传入height说明是固定高度
     //内容过多折行显示时，height 属性会失效，为了避免产生错行

diff --git a/src/Table.scss b/src/Table.scss
@@ -29,6 +29,9 @@ $icon-color:#505F79;
   position: relative;
   line-height: $line-height;
   overflow: hidden;
+  &.copy .u-table-thead th {
+    user-select: unset 
+  }
   &-body{
     // overflow: hidden!important;
     position: relative;

diff --git a/src/TableHeader.js b/src/TableHeader.js
@@ -841,6 +841,12 @@ class TableHeader extends Component {
     }
   };
 
+  onCopy = (data,index, event) => {
+    if(this.props.onCopy) {
+      this.props.onCopy(Object.assign(data,{col: index}),event)
+    }
+  }
+
 
   render() {
     const { clsPrefix, rowStyle,draggable,
@@ -908,7 +914,7 @@ class TableHeader extends Component {
               thClassName += ` ${fixedStyle}`;
               if(!da.fixed ){
                   return (<th {...da}  {...keyTemp} className={thClassName} data-th-fixed={da.fixed} data-line-key={da.key}
-                  data-line-index={columIndex} data-th-width={da.width} data-type="draggable">
+                  data-line-index={columIndex} data-th-width={da.width} data-type="draggable" onCopy={(event) => {this.onCopy(da,columIndex,event)}}>
                       {da.children}
                       {
                         // && columIndex != _rowLeng
@@ -924,7 +930,7 @@ class TableHeader extends Component {
                   className:`${thClassName} ${fixedStyle}`,
                 };
                 da.onClick ?thDefaultObj.onClick = (e)=>{da.onClick(da, e)}:"";
-                return (<th {...thDefaultObj} {...keyTemp}  data-th-fixed={da.fixed} style={{maxWidth: da.width}}/>)
+                return (<th {...thDefaultObj} {...keyTemp}  data-th-fixed={da.fixed} style={{maxWidth: da.width}} onCopy={this.onCopy}/>)
               }
             })}
           </tr>

diff --git a/src/TableRow.js b/src/TableRow.js
@@ -352,9 +352,10 @@ class TableRow extends Component{
     if(this.props.treeType){
       this.setRowParentIndex();
     }
-    if(syncRowHeight){
-      this.setRowHeight()
-    }
+    // if(syncRowHeight){
+    //   this.setRowHeight()
+    // }
+    this.setRowHeight()
   }
 
   componentWillUnmount() {