动态设置固定列交互问题、宽度为百分比时正确计算

demo/TableDemo.scss

@@ -12,6 +12,7 @@
 @import "../node_modules/bee-popover/src/Popover.scss";
 @import "../node_modules/bee-tooltip/src/Tooltip.scss";
 @import "../node_modules/bee-message/build/Message.css";
+@import "../node_modules/bee-dropdown/build/Dropdown.css";
 @import "../src/Table.scss";
 
 
@@ -32,4 +33,4 @@
   .u-table-scroll .u-table-header{
     margin-right: 15px;
   }
-}
+}

demo/demolist/Demo1.js

@@ -18,7 +18,7 @@ const columns = [
         <Tooltip inverse overlay={text}>
           <span tootip={text} style={{
             display: "inline-block",
-            width: "100px",
+            width: "60px",
             textOverflow: "ellipsis",
             overflow: "hidden",
             whiteSpace: "nowrap",
@@ -28,7 +28,7 @@ const columns = [
       );
     }
   },
-  { id: "123", title: "性别", dataIndex: "b", key: "b", width: 100 },
+  { id: "123", title: "性别", dataIndex: "b", key: "b", width: '10%' },
   { title: "年龄", dataIndex: "c", key: "c", width: 200 },
   {
     title: "操作",

demo/demolist/Demo16.js

@@ -9,13 +9,12 @@ import React, { Component } from "react";
 import Table from "../../src";
 
 const columns16 = [
-  { title: "用户名", dataIndex: "a", key: "a", width: 100 },
-  { id: "123", title: "性别", dataIndex: "b", key: "b", width: 100 },
-  { title: "年龄", dataIndex: "c", key: "c", width: 200 },
   {
     title: "操作",
     dataIndex: "d",
     key: "d",
+    fixed:'left',
+    width:200,
     render(text, record, index) {
       return (
         <a
@@ -28,7 +27,11 @@ const columns16 = [
         </a>
       );
     }
-  }
+  },
+  { title: "用户名", dataIndex: "a", key: "a", width: 100 },
+  { id: "123", title: "性别", dataIndex: "b", key: "b", width: 100 },
+  { title: "年龄", dataIndex: "c", key: "c", width: 200 },
+  
 ];
 
 const data16 = [
@@ -46,12 +49,15 @@ class Demo16 extends Component {
     }
   }
   expandedRowRender = (record, index, indent) => {
+    console.log(this.state.data_obj[record.key].length);
+    let height = 42 * (this.state.data_obj[record.key].length+ 3);
+    
     return (
       <Table
         columns={columns16}
+        style={{height:height}}
         data={this.state.data_obj[record.key]}
-        title={currentData => <div>标题: 这是一个标题</div>}
-        footer={currentData => <div>表尾: 我是小尾巴</div>}
+
       />
     );
   };

demo/demolist/Demo24.js

@@ -7,7 +7,12 @@
 */
 import React, { Component } from 'react';
 import Table from '../../src';
+import Icon from 'bee-icon';
+import Menu from 'bee-menus';
+import Dropdown from 'bee-dropdown';
 
+
+const { Item } = Menu;
 // const columns24 = [
 //   {
 //     title: "Full Name",
@@ -98,42 +103,78 @@ class Demo24 extends Component {
 
   constructor(props) {
     super(props);
-    let columns = [];
-    Object.assign(columns,columns24);
-    columns.forEach(da=>da.onHeadCellClick=this.onHeadCellClick);
+    // let columns = [];
+    // Object.assign(columns,columns24);
+    // columns.forEach(da=>da.onHeadCellClick=this.onHeadCellClick);
     this.state = {
-      columns
+      columns:columns24
     }
   }
 
-  onHeadCellClick=(data,event)=>{
-    let fixed = "left";
-    let fixedIndex = 0;
-    const {columns:_columns} = this.state;
-    _columns.find((da,i)=>{
-      da.fixed?fixed=da.fixed:"left";
-      da.fixed?fixedIndex = i:"";
-    });
-    let columns = [];
-    Object.assign(columns,_columns);
-    let fixedCols = [];
-    let nonColums = [];
-    let currObj = columns.find(da=>{
-      if(da.key == data.key){
-        da.fixed?delete da.fixed:da.fixed = fixed;
+  
+    onSelect = ({key,item})=>{ 
+      console.log(`${key} selected`); //获取key
+      let currentObject = item.props.data; //获取选中对象的数据
+      let {columns} = this.state;
+      let fixedCols = [];
+      let nonColums = [];
+      columns.find(da=>{
+        if(da.key == key){
+          da.fixed?delete da.fixed:da.fixed = 'left';
+        }
+        da.fixed?fixedCols.push(da):nonColums.push(da);
+      });
+    
+      columns = [...fixedCols,...nonColums]
+
+      this.setState({
+        columns
+      });
+    }
+  //表头增加下拉菜单
+  renderColumnsDropdown(columns) {
+    const icon ='uf-arrow-down';
+    
+    return columns.map((originColumn,index) => {
+      let column = Object.assign({}, originColumn);
+      let menuInfo = [], title='锁定';
+      if(originColumn.fixed){
+        title = '解锁'
       }
-      da.fixed?fixedCols.push(da):nonColums.push(da);
-    });
-    columns = fixed=="left"?[...fixedCols,...nonColums]:[...nonColums,...fixedCols]
-    console.log(columns);
-    this.setState({
-      columns
+      menuInfo.push({
+        info:title,
+        key:originColumn.key,
+        index:index
+      });
+      const menu = (
+        <Menu onSelect={this.onSelect} >{
+            menuInfo.map(da=>{ return <Item key={da.key} data={da} >{da.info}</Item> })
+            }
+        </Menu>)
+      column.title = (
+        <span className='title-con drop-menu'>
+          {column.title}
+          <Dropdown
+            trigger={['click']} 
+            overlay={menu}
+            animation="slide-up"
+          >
+           <Icon type={icon}/>
+          </Dropdown> 
+          
+        </span>
+      );
+      return column;
     });
+    
   }
 
   render() {
-    const {columns} = this.state;
-    return <Table columns={columns} data={data24} scroll={{ x: "110%", y: 240 }}/>;
+    let {columns} = this.state;
+     columns = this.renderColumnsDropdown(columns);
+    return <div className="demo24">
+            <Table columns={columns} data={data24} scroll={{ x: "110%", y: 240 }}/>
+          </div>;
   }
 }
 

demo/demolist/Demo24.scss

@@ -0,0 +1,18 @@
+th{
+    .drop-menu{
+        .uf{
+            font-size: 12px;
+            visibility: hidden;
+            margin-left: 15px;
+        }
+        
+    
+    }
+    &:hover{
+        .uf{
+                visibility: visible;
+        }
+    }
+
+}
+

dist/demo.css

@@ -4,6 +4,7 @@
 /* FormGroup */
 /*  Navlayout  */
 @import url(../node_modules/bee-message/build/Message.css);
+@import url(../node_modules/bee-dropdown/build/Dropdown.css);
 .red {
   color: rgb(244,67,54) !important; }
 
@@ -10239,4 +10240,12 @@ li.rc-time-picker-panel-select-option-disabled:hover {
   .demo25 .u-table-scroll .u-table-header {
     margin-right: 15px; }
 
+th .drop-menu .uf {
+  font-size: 12px;
+  visibility: hidden;
+  margin-left: 15px; }
+
+th:hover .uf {
+  visibility: visible; }
+
 /*# sourceMappingURL=demo.css.map */

src/ColumnManager.js

@@ -158,13 +158,17 @@ export default class ColumnManager {
     this.columns = columns || this.normalize(elements);
     this._cached = {};
   }
-  getColumnWidth(){
+  getColumnWidth(contentWidth){
     let columns = this.groupedColumns();
     let res={computeWidth:0,lastShowIndex:0};
     columns.forEach((col,index)=>{
       //如果列显示
       if(col.ifshow){
-        res.computeWidth += parseInt(col.width);
+        let width = col.width;
+        if(typeof(width) == 'string' && width.includes('%') ){
+          width = contentWidth *  parseInt(col.width) /100;
+        }
+        res.computeWidth += parseInt(width);
         if(!col.fixed){
           res.lastShowIndex = index;
         }

src/Table.js

@@ -192,7 +192,7 @@ class Table extends Component{
             this.contentWidth = this.contentWidth * parseInt(setWidthParam) /100
           }
       }
-      const computeObj = this.columnManager.getColumnWidth();
+      const computeObj = this.columnManager.getColumnWidth(this.contentWidth);
       let lastShowIndex = computeObj.lastShowIndex;
       this.computeWidth = computeObj.computeWidth;
       if(this.computeWidth < this.contentWidth){