1、hover呼出当前菜单内容；2、拖拽时，增加列className bug 3、固定列滚动时显示阴影

demo/demolist/Demo35.js

@@ -0,0 +1,101 @@
+/**
+*
+* @title hover呼出菜单栏
+* @description
+*/
+
+import React, { Component } from "react";
+import Button from "bee-button";
+import Tooltip from "bee-tooltip";
+import Table from "../../src";
+
+const columns = [
+  {
+    title: "用户名", dataIndex: "a", key: "a", width: 80, className: "rowClassName",
+    fixed:'left',
+    render: (text, record, index) => {
+      return (
+        <Tooltip inverse overlay={text}>
+          <span tootip={text} style={{
+            display: "inline-block",
+            width: "60px",
+            textOverflow: "ellipsis",
+            overflow: "hidden",
+            whiteSpace: "nowrap",
+            verticalAlign: "middle",
+          }}>{text}</span>
+        </Tooltip>
+      );
+    }
+  },
+  { id: "123", title: "性别", dataIndex: "b", key: "b", width: 100 },
+  { title: "年龄", dataIndex: "c", key: "c", width: 300 },
+  {
+    title: "操作",
+    dataIndex: "d",
+    key: "d",
+    render(text, record, index) {
+      return (
+        <div style={{ position: 'relative' }} title={text} >
+          <a
+            href="javascript:;"
+            tooltip={text}
+            onClick={() => {
+              alert('这是第' + index + '列，内容为:' + text);
+            }}
+          >
+            一些操作
+              </a>
+        </div>
+      );
+    }
+  }
+];
+
+const data = [
+  { a: "令狐冲", b: "男", c: 41, d: "操作", key: "1" },
+  { a: "杨过叔叔的女儿黄蓉", b: "男", c: 67, d: "操作", key: "2" },
+  { a: "郭靖", b: "男", c: 25, d: "操作", key: "3" }
+];
+
+class Demo35 extends Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      data: data,
+      selectedRowIndex: 0
+    }
+  }
+
+ clickFun=()=>{
+  //  console.log('click'+this.currentIndex);
+ }
+ onRowHover=(index)=>{
+  this.currentIndex = index;
+ }
+  render() {
+    let hoverContent = <div className="opt-btns"><button  onClick={this.clickFun}>删除</button> </div>
+    return (
+        
+        <Table
+          columns={columns}
+          data={data}
+          parentNodeId='parent'
+          height={43}
+          headerHeight={42}
+          hoverContent={hoverContent}
+          onRowHover={this.onRowHover}
+          onRowClick={(record, index, indent) => {
+            this.setState({
+              selectedRowIndex: index
+            });
+          }}
+        />
+
+     
+    );
+  }
+}
+
+export default Demo35;

demo/demolist/Demo35.scss

@@ -0,0 +1,8 @@
+.opt-btns{
+    button{
+      background: #505F79 ;
+      height: 26px;
+      color:#FFFFFF;
+      line-height: 26px;
+    }
+  }

dist/demo.css

@@ -8441,11 +8441,11 @@ ul {
   .u-table td {
     border-bottom: 1px solid #e9e9e9; }
   .u-table tr:hover {
-    background: rgb(227,242,253); }
+    background: #E7F2FC; }
     .u-table tr:hover td .uf-eye {
       visibility: visible !important; }
   .u-table tr.tr-row-hover {
-    background: rgb(227,242,253); }
+    background: #E7F2FC; }
   .u-table th,
   .u-table td {
     padding: 12px 8px;
@@ -8586,6 +8586,8 @@ ul {
     .u-table-fixed-right-expanded-row {
       color: transparent;
       pointer-events: none; }
+  .u-table-scroll-position-left .u-table-fixed-left {
+    box-shadow: none; }
   .u-table-scroll-position-right .u-table-fixed-right {
     box-shadow: none; }
   .u-table-thead .filter-text, .u-table-thead .filter-dropdown, .u-table-thead .filter-date {
@@ -8901,6 +8903,20 @@ ul {
     padding: 0px 16px 0 16px;
     cursor: pointer; }
 
+.u-row-hover {
+  position: absolute;
+  right: 24px;
+  display: none;
+  -ms-flex-align: center;
+  align-items: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  background: #E7F2FC; }
+
+.u-row-hover2 {
+  position: absolute;
+  left: 100; }
+
 /* FormGroup */
 /*  Navlayout  */
 /* FormGroup */
@@ -10345,4 +10361,10 @@ th:hover .uf {
   padding-bottom: 0px; }
 
 
+.opt-btns button {
+  background: #505F79;
+  height: 26px;
+  color: #FFFFFF;
+  line-height: 26px; }
+
 /*# sourceMappingURL=demo.css.map */

src/Table.js

@@ -9,7 +9,7 @@ import addEventListener from 'tinper-bee-core/lib/addEventListener';
 import ColumnManager from './ColumnManager';
 import createStore from './createStore';
 import Loading from 'bee-loading';
-import { Event,EventUtil} from "./utils";
+import { Event,EventUtil,closest} from "./utils";
 
 const propTypes = {
   data: PropTypes.array,
@@ -28,6 +28,7 @@ const propTypes = {
   expandedRowClassName: PropTypes.func,
   childrenColumnName: PropTypes.string,
   onExpand: PropTypes.func,
+  onRowHover:PropTypes.func,
   onExpandedRowsChange: PropTypes.func,
   indentSize: PropTypes.number,
   onRowClick: PropTypes.func,
@@ -137,6 +138,7 @@ class Table extends Component {
     this.handleBodyScroll = this.handleBodyScroll.bind(this);
     this.handleRowHover = this.handleRowHover.bind(this);
     this.computeTableWidth = this.computeTableWidth.bind(this);
+    this.onBodyMouseLeave = this.onBodyMouseLeave.bind(this);
   }
 
   componentDidMount() {
@@ -548,9 +550,9 @@ class Table extends Component {
       let className = rowClassName(record, i, indent);
 
       const onHoverProps = {};
-      if (this.columnManager.isAnyColumnsFixed()) {
-        onHoverProps.onHover = this.handleRowHover;
-      }
+
+      onHoverProps.onHover = this.handleRowHover;
+      
       //fixedIndex一般是跟index是一个值的，只有是树结构时，会讲子节点的值也累计上
       let fixedIndex = i;
       //判断是否是tree结构
@@ -623,7 +625,7 @@ class Table extends Component {
           treeType={childrenColumn||this.treeType?true:false}
           fixedIndex={fixedIndex+lazyCurrentIndex}
           rootIndex = {rootIndex}
-
+          hoverContent={props.hoverContent}
         />
       );
       this.treeRowIndex++;
@@ -813,7 +815,7 @@ class Table extends Component {
         tableStyle.width = this.contentWidth - this.columnManager.getLeftColumnsWidth(this.contentWidth) - this.columnManager.getRightColumnsWidth(this.contentWidth);
       }
       const tableBody = hasBody ? getBodyWrapper(
-        <tbody className={`${clsPrefix}-tbody`}>
+        <tbody className={`${clsPrefix}-tbody`} onMouseLeave={this.onBodyMouseLeave}>
           {this.getRows(columns, fixed)}
         </tbody>
       ) : null;
@@ -852,6 +854,7 @@ class Table extends Component {
         onMouseOver={this.detectScrollTarget}
         onTouchStart={this.detectScrollTarget}
         onScroll={this.handleBodyScroll}
+        onMouseLeave={this.onBodyMouseLeave}
       >
         {this.renderDragHideTable()}
         {renderTable(!useFixedHeader)}
@@ -979,6 +982,9 @@ class Table extends Component {
   isRowExpanded(record, index) {
     return typeof this.findExpandedRow(record, index) !== 'undefined';
   }
+  onBodyMouseLeave(e){
+    this.hideHoverDom(e);
+  }
 
   detectScrollTarget(e) {
     if (this.scrollTarget !== e.currentTarget) {
@@ -986,6 +992,13 @@ class Table extends Component {
     }
   }
 
+  hideHoverDom(e){
+    if(this.hoverDom){
+      this.hoverDom.style.display = 'none';   
+    }
+  }
+  
+
   handleBodyScroll(e) {
 
     const { scroll = {},clsPrefix,handleScrollY, handleScrollX} = this.props;
@@ -1045,17 +1058,41 @@ class Table extends Component {
     this.lastScrollLeft = e.target.scrollLeft;
   }
 
-  handleRowHover(isHover, key) {
+  handleRowHover(isHover, key,event,currentIndex) {
     //增加新的API，设置是否同步Hover状态，提高性能，避免无关的渲染
-    let { syncHover } = this.props;
-    if(syncHover){
+    let { syncHover,onRowHover } = this.props;
+    // 固定列、或者含有hoverdom时情况下同步hover状态
+    if(this.columnManager.isAnyColumnsFixed() && syncHover ){
+      this.hoverKey = key;
       this.store.setState({
         currentHoverKey: isHover ? key : null,
       });
     }
+    if(this.hoverDom && isHover){
+      this.currentHoverKey = key;
+      const td = closest(event.target,'td');
+      if(td){
+        this.hoverDom.style.top = td.offsetTop+'px';
+        this.hoverDom.style.height = td.offsetHeight +'px';
+        this.hoverDom.style.lineHeight = td.offsetHeight +'px';
+        this.hoverDom.style.display = 'block';
+      }
+    }
+    onRowHover && onRowHover(currentIndex);
+
   }
 
-  
+  onRowHoverMouseEnter = () =>{
+
+    this.store.setState({
+      currentHoverKey: this.currentHoverKey,
+    });
+    this.hoverDom.style.display = 'block';
+      
+  }
+  onRowHoverMouseLeave = () =>{
+
+  }
   onFocus=(e)=>{
     this.props.onKeyTab&&this.props.onKeyTab();
   }
@@ -1126,6 +1163,8 @@ class Table extends Component {
         <Loading
           container={this}
           {...loading} />
+        { props.hoverContent && <div className="u-row-hover"
+                                     onMouseEnter={this.onRowHoverMouseEnter} onMouseLeave={this.onRowHoverMouseLeave} ref={el=> this.hoverDom = el }>{props.hoverContent}</div>}
       </div>
     );
   }

src/Table.scss

@@ -11,7 +11,7 @@ $vertical-padding: 12px;
 $horizontal-padding: 8px;
 $table-border-color: #e9e9e9;
 
-$table-hover-color: unquote("rgb(#{$palette-blue-50})") !default;
+$table-hover-color: #E7F2FC;
 $table-move-in-color: $bg-color-base;
 $checkbox-height:16px;
 .u-table {
@@ -290,9 +290,9 @@ $checkbox-height:16px;
  
   }
   
-  // &-scroll-position-left &-fixed-left {
-  //   box-shadow: none;
-  // }
+  &-scroll-position-left &-fixed-left {
+    box-shadow: none;
+  }
 
   &-scroll-position-right &-fixed-right {
     box-shadow: none;
@@ -740,6 +740,16 @@ $checkbox-height:16px;
     }
 }
 
+.u-row-hover{
+  position: absolute;
+  right: 24px;
+  display: none;
+  align-items: center;
+  justify-content: center;
+  background: $table-hover-color
+}
 
-
-
+.u-row-hover2{
+  position: absolute;
+  left: 100;
+}

src/TableHeader.js

@@ -583,10 +583,10 @@ class TableHeader extends Component {
               let thDefaultObj = {};
               
                   if(draggable){
-                    thClassName += `${clsPrefix}-thead th-drag ${thHover} `;
+                    thClassName += ` ${clsPrefix}-thead th-drag ${thHover} `;
                   }
                   if(dragborder){
-                    thClassName += `${clsPrefix}-thead-th ${canDotDrag}`;
+                    thClassName += ` ${clsPrefix}-thead-th ${canDotDrag}`;
                   }
                   thClassName += ` ${fixedStyle}`;
                  

src/TableRow.js

@@ -127,14 +127,17 @@ class TableRow extends Component{
     onRowDoubleClick(record, index, event);
   }
 
-  onMouseEnter() {
-    const { onHover, hoverKey } = this.props;
-    onHover(true, hoverKey);
+  onMouseEnter(e) {
+    const { onHover, hoverKey,fixedIndex } = this.props;
+    this.setState({ hovered: true });
+    onHover(true, hoverKey,e,fixedIndex);
   }
 
-  onMouseLeave() {
-    const { onHover, hoverKey } = this.props;
-    onHover(false, hoverKey);
+  onMouseLeave(e) {
+
+    const { onHover, hoverKey ,fixedIndex} = this.props;
+    this.setState({ hovered: false });
+    onHover(false, hoverKey,e,fixedIndex);
   }
 
   set =(fn)=> {
@@ -156,7 +159,7 @@ class TableRow extends Component{
     const {
       clsPrefix, columns, record, height, visible, index,
       expandIconColumnIndex, expandIconAsCell, expanded, expandRowByClick,
-      expandable, onExpand, needIndentSpaced, indent, indentSize,isHiddenExpandIcon,fixed,hoverKey
+      expandable, onExpand, needIndentSpaced, indent, indentSize,isHiddenExpandIcon,fixed
     } = this.props;
     let showSum = false;
     let { className } = this.props;
@@ -164,7 +167,7 @@ class TableRow extends Component{
     if (this.state.hovered) {
       className += ` ${clsPrefix}-hover`;
     }
-    
+    // console.log('className--'+className,index);
     //判断是否为合计行
     if(className.indexOf('sumrow')>-1){
       showSum = true;
@@ -227,6 +230,7 @@ class TableRow extends Component{
         ref={this.bindElement}
       >
         {cells.length>0?cells:<td></td>}
+        <div className="u-row-hover2" >{}</div>
       </tr>
     );
   }

src/utils.js

@@ -69,7 +69,22 @@ export function warningOnce(condition, format, args) {
     warned[format] = true;
   }
 }
-
+ export function getOffset (Node, offset ) {
+	if(!offset) {
+		offset = {};
+		offset.top = 0;
+		offset.left = 0;
+	}
+	if(Node == document.body) {
+		return offset;
+	}
+	offset.top += Node.offsetTop;
+	offset.left += Node.offsetLeft;
+	if(Node.offsetParent)
+		return getOffset(Node.offsetParent, offset);
+	else
+		return offset;
+};