示例按功能特性分类

demo/demolist/Demo01.js

@@ -2,7 +2,7 @@
 *
 * @title 基本表格
 * 【Tooltip】
-* @description
+* @description 鼠标hover行时呼出操作按钮
 */
 
 import React, { Component } from "react";
@@ -38,13 +38,12 @@ const data = [
   { a: "郭靖", b: "男", c: 25, key: "3" }
 ];
 
-class Demo1 extends Component {
+class Demo01 extends Component {
 
   constructor(props) {
     super(props);
     this.state = {
-      data: data,
-      selectedRowIndex: 0
+      data: data
     }
   }
   handleClick = () => {
@@ -63,7 +62,6 @@ class Demo1 extends Component {
 
   render() {
     return (
-   
         <Table
           columns={columns}
           data={data}
@@ -72,16 +70,9 @@ class Demo1 extends Component {
           headerHeight={40}
           hoverContent={this.getHoverContent}
           onRowHover={this.onRowHover}
-          onRowClick={(record, index, indent) => {
-            this.setState({
-              selectedRowIndex: index
-            });
-          }}
         />
-
-     
     );
   }
 }
 
-export default Demo1;
+export default Demo01;

demo/demolist/Demo02.js

@@ -2,8 +2,7 @@
 *
 * @title 默认无数据展示
 * @description 无数据时显示效果展示（可自定义）
- *
-* import {Table} from 'tinper-bee';
+*
 */
 
 
@@ -12,7 +11,7 @@ import Table from '../../src';
 import Icon from 'bee-icon';
 
 
-const columns10 = [
+const columns02 = [
     {
       title: "Name",
       dataIndex: "name",
@@ -32,16 +31,14 @@ const columns10 = [
     }
   ];
   
-  const data10 = [
-    
-  ];
+  const data02 = [];
 
   const emptyFunc = () => <Icon type="uf-nodata"></Icon>
   
-  class Demo10 extends Component {
-    render() {
-      return <Table className="demo02" columns={columns10} data={data10} emptyText={emptyFunc} />;
-    }
+class Demo02 extends Component {
+  render() {
+    return <Table className="demo02" columns={columns02} data={data02} emptyText={emptyFunc} />;
   }
+}
 
-export default Demo10;
+export default Demo02;

demo/demolist/Demo02.scss

@@ -1,5 +1,5 @@
 .demo02 {
     .u-table-placeholder i{
-        font-size: 40px;
+        font-size: 60px;
     }
 }

demo/demolist/Demo03.js

@@ -1,17 +1,13 @@
 /**
 *
 * @title 固定表头
-* @description 当滚动纵向滚动条时，表头固定。还可以设置scroll来支持横向或纵向滚动
-*
+* @description 设置`scroll.y`指定滚动区域的高度，添加纵向滚动条，达到固定表头效果
 */
 
-
 import React, { Component } from 'react';
 import Table from '../../src';
-import dragColumn from "../../src/lib/dragColumn";;
-const DragColumnTable = dragColumn(Table);
 
-const columns6 = [
+const columns03 = [
   {
     title: "Full Name",
     width: 100,
@@ -22,7 +18,7 @@ const columns6 = [
   { title: "Address", dataIndex: "address", key: "1" }
 ];
 
-const data6 = [
+const data03 = [
   {
     key: "1",
     name: "John Brown",
@@ -72,10 +68,10 @@ const data6 = [
   }
 ];
 
-class Demo6 extends Component {
+class Demo03 extends Component {
   render() {
-    return <DragColumnTable columns={columns6} data={data6} scroll={{y: 150 }} dragborder={true}  />;
+    return <Table columns={columns03} data={data03} scroll={{y: 150 }} />;
   }
 }
 
-export default Demo6; 
+export default Demo03; 

demo/demolist/Demo04.js

@@ -9,7 +9,7 @@
 import React, { Component } from 'react';
 import Table from '../../src';
 
-const columns6 = [
+const columns04 = [
   {
     title: "Full Name",
     width: 100,
@@ -20,7 +20,7 @@ const columns6 = [
   { title: "Address", dataIndex: "address", key: "1" }
 ];
 
-const data6 = [
+const data04 = [
   {
     key: "1",
     name: "John Brown",
@@ -72,7 +72,7 @@ const data6 = [
 
 class Demo04 extends Component {
   render() {
-    return <Table className="demo04" columns={columns6} data={data6} />;
+    return <Table className="demo04" columns={columns04} data={data04} />;
   }
 }
 

demo/demolist/Demo05.js

@@ -1,7 +1,7 @@
 /**
 *
 * @title 表格 Loading 加载
-* @description  loading可以传boolean或者obj对象，obj为bee-loading组件的参数类型
+* @description  loading可以传boolean或者object对象，object为bee-loading组件的参数类型
 *
 */
 
@@ -9,7 +9,7 @@ import React, { Component } from "react";
 import Table from "../../src";
 import {Button,Popconfirm} from "tinper-bee";
 
-const columns17 = [
+const columns05 = [
   { title: "用户名", dataIndex: "a", key: "a", width: 100 },
   { id: "123", title: "性别", dataIndex: "b", key: "b", width: 100 },
   { title: "年龄", dataIndex: "c", key: "c", width: 200 },
@@ -29,13 +29,13 @@ const columns17 = [
   }
 ];
 
-const data17 = [
+const data05 = [
   { a: "令狐冲", b: "男", c: 41, d: "操作", key: "1" },
   { a: "杨过", b: "男", c: 67, d: "操作", key: "2" },
   { a: "郭靖", b: "男", c: 25, d: "操作", key: "3" }
 ];
 
-class Demo17 extends Component {
+class Demo05 extends Component {
   constructor(props){
     super(props);
     this.state = {
@@ -52,14 +52,13 @@ class Demo17 extends Component {
       <div>
         <Button
           className="editable-add-btn"
-          type="ghost"
           onClick={this.changeLoading}
         >
           切换loading
         </Button>
         <Table
-          columns={columns17}
-          data={data17}
+          columns={columns05}
+          data={data05}
           title={currentData => <div>标题: 这是一个标题</div>}
           footer={currentData => <div>表尾: 我是小尾巴</div>}
           // loading={this.state.loading}或者是boolean
@@ -70,4 +69,4 @@ class Demo17 extends Component {
   }
 }
 
-export default Demo17;
+export default Demo05;

demo/demolist/Demo102.js

@@ -1,6 +1,6 @@
 /**
 *
-* @title 树形表格
+* @title 层级树型展示
 * @description 通过在data中配置children数据，来自动生成树形表格
 *
 */

demo/demolist/Demo103.js

@@ -1,6 +1,6 @@
 /**
 *
-* @title 选中行颜色、表头表体
+* @title 选中行颜色、自定义表格标题和表尾
 * @description
 */
 
@@ -17,7 +17,7 @@ const columns = [
 
 const data = [
   { a: "令狐冲", b: "男", c: 41, key: "1" },
-  { a: "杨过叔叔的女儿黄蓉", b: "男", c: 67, key: "2" },
+  { a: "黄蓉", b: "男", c: 67, key: "2" },
   { a: "郭靖", b: "男", c: 25, key: "3" }
 ];
 

demo/demolist/Demo104.js

@@ -1,16 +1,16 @@
 /**
 *
-* @title hover呼出操作栏
-* @description
+* @title 自定义行高
+* @description 设置`height`属性自定义表格行高，设置`headerHeight`属性自定义表头高度。
 */
 
 import React, { Component } from "react";
-import {Tooltip,Button,Popconfirm} from "tinper-bee";
+import {Button,Tooltip} from "tinper-bee";
 import Table from "../../src";
 
 const columns = [
   {
-    title: "用户名", dataIndex: "a", key: "a", width: 80, className: "rowClassName",
+    title: "用户名", dataIndex: "a", key: "a", width: 300, className: "rowClassName",
     fixed:'left',
     render: (text, record, index) => {
       return (
@@ -27,33 +27,17 @@ const columns = [
       );
     }
   },
-  { 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} >
-          <Popconfirm trigger="click" placement="right" content={'这是第' + index + '行，内容为:' + text}>
-            <a href="javascript:;" tooltip={text} >
-              一些操作
-            </a>
-          </Popconfirm>
-        </div>
-      );
-    }
-  }
+  { id: "123", title: "性别", dataIndex: "b", key: "b", width: 500},
+  { title: "年龄", dataIndex: "c", key: "c", width: 200 }
 ];
 
 const data = [
-  { a: "令狐冲", b: "男", c: 41, d: "操作", key: "1" },
-  { a: "杨过叔叔的女儿黄蓉", b: "男", c: 67, d: "操作", key: "2" },
-  { a: "郭靖", b: "男", c: 25, d: "操作", key: "3" }
+  { a: "令狐冲", b: "男", c: 41, key: "1" },
+  { a: "杨过叔叔的女儿黄蓉", b: "男", c: 67, key: "2" },
+  { a: "郭靖", b: "男", c: 25, key: "3" }
 ];
 
-class Demo35 extends Component {
+class Demo1 extends Component {
 
   constructor(props) {
     super(props);
@@ -62,22 +46,20 @@ class Demo35 extends Component {
       selectedRowIndex: 0
     }
   }
-
-  delFun=()=>{
-  //  console.log('click'+this.currentIndex);
-  let {data} = this.state;
-  data.splice(this.currentIndex,1);
-  this.setState({
-    data
-  });
- }
- onRowHover=(index,record)=>{
-  this.currentIndex = index;
-  this.currentRecord = record;
- }
-  getHoverContent=()=>{
-    return <div className="opt-btns"><Button size="sm" onClick={this.delFun}>删除</Button> </div>
+  handleClick = () => {
+    console.log('这是第' , this.currentIndex , '行');
+    console.log('内容：' , this.currentRecord);
   }
+
+  onRowHover=(index,record)=>{
+    this.currentIndex = index;
+    this.currentRecord = record;
+  }
+
+  getHoverContent=()=>{
+    return <div className="opt-btns"><Button size="sm" onClick={this.handleClick}>一些操作</Button> </div>
+  }
+
   render() {
     return (
    
@@ -101,4 +83,4 @@ class Demo35 extends Component {
   }
 }
 
-export default Demo35;
+export default Demo1;

demo/demolist/Demo105.js

@@ -1,6 +1,6 @@
 /**
 *
-* @title 表格行、列合并
+* @title 自定义行、列合并
 * @description 表头只支持列合并，使用 column 里的 colSpan 进行设置。表格支持行/列合并，使用 render 里的单元格属性 colSpan 或者 rowSpan 设值为 0 时，设置的表格不会渲染。
 *
 */

demo/demolist/Demo11.js

@@ -1,77 +1,139 @@
 /**
 *
-* @title 拖拽列宽度
-* @description 注：不支持tree结构的表头、合并表头的table
+* @title 横向滚动条
+* @description 设置`scroll`属性支持横向或纵向滚动，x/y的取值可以是正整数、百分比、布尔值
 */
-import React, { Component } from 'react';
-import {Icon} from "tinper-bee";
 
-import Table from '../../src'; 
-import dragColumn from '../../src/lib/dragColumn';
+import React, { Component } from "react";
+import Table from "../../src";
 
-const columns23 = [
-  {
-    title: "名字",
-    dataIndex: "a",
-    key: "a",
-    width: '200',
-    fixed:'left'
-  },
-  {
-    title: "性别",
-    dataIndex: "b",
-    key: "b",
-    width: '600'
-  },
-  {
-    title: "年龄",
-    dataIndex: "c",
-    key: "c",
-    width: '200',
-    sumCol: true,
-    sorter: (a, b) => a.c - b.c
-  }, 
-  {
-    title: "武功级别",
-    dataIndex: "d",
-    key: "d",
-    width: 500,
-  }
+const columns11 = [
+    {
+        title: "序号",
+        dataIndex: "index",
+        key: "index",
+        width: 200, 
+    },
+    {
+        title: "订单编号",
+        dataIndex: "orderCode",
+        key: "orderCode",
+        width: 200, 
+    },
+    {
+        title: "供应商名称",
+        dataIndex: "supplierName",
+        key: "supplierName",
+        width: 200
+    },
+    {
+        title: "类型",
+        dataIndex: "type_name",
+        key: "type_name",
+        width: 200
+    },
+    {
+        title: "采购组织",
+        dataIndex: "purchasing",
+        key: "purchasing",
+        width: 200
+    },
+    {
+        title: "采购组",
+        dataIndex: "purchasingGroup",
+        key: "purchasingGroup",
+         width: 300
+    },
+    {
+        title: "凭证日期",
+        dataIndex: "voucherDate",
+        key: "voucherDate",
+        width: 200,
+        
+    },
+    {
+        title: "审批状态",
+        dataIndex: "approvalState_name",
+        key: "approvalState_name",
+        width: 200
+    },
+    {
+        title: "确认状态",
+        dataIndex: "confirmState_name",
+        key: "confirmState_name",
+         width: 200
+    }, 
+    {
+        title: "关闭状态",
+        dataIndex: "closeState_name",
+        key: "closeState_name",
+        width: 200
+    }
 ];
 
-const data23 = [
-  { a: "杨过", b: "男", c: 30,d:'内行', key: "2" },
-  { a: "令狐冲", b: "男", c: 41,d:'大侠', key: "1" },
-  { a: "郭靖", b: "男", c: 25,d:'大侠', key: "31" } , { a: "杨过", b: "男", c: 30,d:'内行', key: "21" },
-  { a: "令狐冲", b: "男", c: 41,d:'大侠', key: "11" },
-  { a: "郭靖", b: "男", c: 25,d:'大侠', key: "32" } , { a: "杨过", b: "男", c: 30,d:'内行', key: "22" },
-  { a: "令狐冲", b: "男", c: 41,d:'大侠', key: "12" },
-  { a: "郭靖", b: "男", c: 25,d:'大侠', key: "3" }
+const data11 = [
+    { 
+        index: 1, 
+        orderCode:"2343", 
+        supplierName: "xxx",
+        type_name: "123",
+        purchasing:'内行', 
+        purchasingGroup:"323",
+        voucherDate:"kkkk",
+        approvalState_name:"vvvv",
+        confirmState_name:"aaaa",
+        closeState_name:"vnnnnn",
+        key: "1"
+    }, 
+    { 
+      index: 2, 
+      _checked:true,
+      orderCode:"222", 
+      supplierName: "22xxx",
+      type_name: "1223",
+      purchasing:'内行2', 
+      purchasingGroup:"3223",
+      voucherDate:"222kk",
+      approvalState_name:"22vvvv",
+      confirmState_name:"2aaaa",
+      closeState_name:"2vnnnnn",
+      key: "2"
+    },
+    { 
+      index: 3, 
+      orderCode:"222", 
+      supplierName: "22xxx",
+      _disabled:true,
+      type_name: "1223",
+      purchasing:'内行2', 
+      purchasingGroup:"3223",
+      voucherDate:"222kk",
+      approvalState_name:"22vvvv",
+      confirmState_name:"2aaaa",
+      closeState_name:"2vnnnnn",
+      key: "3"
+    },
+    { 
+      index: 4, 
+      orderCode:"222", 
+      supplierName: "22xxx",
+      type_name: "1223",
+      purchasing:'内行2', 
+      purchasingGroup:"3223",
+      voucherDate:"222kk",
+      approvalState_name:"22vvvv",
+      confirmState_name:"2aaaa",
+      closeState_name:"2vnnnnn",
+      key: "4"
+    },
 ];
 
-const DragColumnTable = dragColumn(Table);
-
-const defaultProps23 = {
-  prefixCls: "bee-table"
-};
-
-class Demo23 extends Component {
-  constructor(props) {
-    super(props); 
-  }
-
+class Demo11 extends Component {
   render() {
-    return <DragColumnTable columns={columns23} data={data23} bordered
-    dragborder={true} 
-    draggable={true} 
-    scroll={{y:200}}
-    onDropBorder ={(e,width)=>{
-      console.log(width+"--调整列宽后触发事件",e.target);
-    }}
-    />;
+    return (
+        <Table columns={columns11} data={data11} scroll={{x:true}} />
+    );
   }
 }
-Demo23.defaultProps = defaultProps23;
 
-
-export default Demo23;
+export default Demo11;

demo/demolist/Demo12.js

@@ -1,176 +1,78 @@
 /**
 *
-* @title 动态设置固定列
-* @description 动态设置固、取消固定列
-* @description 动态固定列设置 一个table动态设置一个方向【fixed: "left"，fixed: "right"】。
-*
+* @title 纵向滚动条
+* @description 设置`scroll`属性支持横向或纵向滚动，x/y的取值可以是正整数、百分比、布尔值
 */
-import React, { Component } from 'react';
-import {Icon,Menu,Dropdown} from "tinper-bee";
 
-import Table from '../../src';
+import React, { Component } from "react";
+import Table from "../../src";
 
-const { Item } = Menu;
-// const columns24 = [
-//   {
-//     title: "Full Name",
-//     width: 100,
-//     dataIndex: "name",
-//     key: "name",
-//     fixed: "left",
-//   },
-//   { title: "Age", width: 100, dataIndex: "age", key: "age", fixed: "left" },
-//   { title: "Column 1", dataIndex: "address", key: "1"  },
-//   { title: "Column 2", dataIndex: "address2", key: "2" },
-//   { title: "Column 3", dataIndex: "address", key: "3" },
-//   { title: "Column 4", dataIndex: "address", key: "4" },
-//   { title: "Column 24", dataIndex: "address", key: "24" },
-//   { title: "Column 6", dataIndex: "address", key: "6" },
-//   { title: "Column 7", dataIndex: "address", key: "7" },
-//   { title: "Column 8", dataIndex: "address", key: "8" }
-// ];
-
-
-const columns24 = [
-  {
-    title: "名字",
-    dataIndex: "a",
-    key: "a",
-    width: 100,
-    fixed: "left",
-  },
-  {
-    title: "性别",
-    dataIndex: "b",
-    key: "b",
-    width: 100,
-    fixed: "left",
-  },
-  {
-    title: "年龄",
-    dataIndex: "c",
-    key: "c",
-    width: 100, 
-  },
-  {
-    title: "武功级别",
-    dataIndex: "d",
-    key: "d",
-    width: 150 
-  },
-  {
-    title: "对手",
-    dataIndex: "e",
-    key: "e",
-    width: 100 
-  },
-  {
-    title: "帮派",
-    dataIndex: "f",
-    key: "f",
-    width: 100 
-  },
-  {
-    title: "武功类型",
-    dataIndex: "g",
-    key: "g",
-    width: 100 
-  },
-  {
-    title: "师傅",
-    dataIndex: "k",
-    key: "k",
-    // width: 100 
-  },
-  {
-    title: "攻击系数",
-    dataIndex: "h",
-    key: "h",
-    width: 100 
-  }
+const columns12 = [
+    {
+      title: "Full Name",
+      width: 100,
+      dataIndex: "name",
+      key: "name"
+    },
+    { title: "Age", width: 100, dataIndex: "age", key: "age"},
+    { title: "Address", dataIndex: "address", key: "1" }
 ];
 
-
-const data24 = [
-  { a: "杨过", b: "男", c: 30,d:'内行',e:'黄荣',f:'古墓派',g:'剑术',k:'小龙女',h:'0.5', key: "1" },
-  { a: "令狐冲", b: "男", c: 41,d:'剑客',e:'自己',f:'无',g:'剑术',k:'无',h:'0.5', key: "2" },
-  { a: "郭靖", b: "男", c: 25,d:'大侠',e:'黄荣',f:'朝廷',g:'内容',k:'外侵势力',h:'0.6', key: "3" }
+const data12 = [
+    {
+        key: "1",
+        name: "John Brown",
+        age: 32,
+        address: "New York Park"
+    },
+    {
+        key: "2",
+        name: "Jim Green",
+        age: 40,
+        address: "London Park"
+    },
+    {
+        key: "3",
+        name: "Jim Green",
+        age: 40,
+        address: "London Park"
+    },
+    {
+        key: "4",
+        name: "Jim Green",
+        age: 40,
+        address: "London Park"
+    },{
+        key: "11",
+        name: "John Brown",
+        age: 32,
+        address: "New York Park"
+    },
+    {
+        key: "12",
+        name: "Jim Green",
+        age: 40,
+        address: "London Park"
+    },
+    {
+        key: "13",
+        name: "Jim Green",
+        age: 40,
+        address: "London Park"
+    },
+    {
+        key: "14",
+        name: "Jim Green",
+        age: 40,
+        address: "London Park"
+    }
 ];
- 
-class Demo24 extends Component {
-
-  constructor(props) {
-    super(props);
-    this.state = {
-      columns:columns24
-    }
-  }
-
-  
-    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 = '解锁'
-      }
-      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;
-    });
-    
-  }
-
+class Demo12 extends Component {
   render() {
-    let {columns} = this.state;
-     columns = this.renderColumnsDropdown(columns);
-    return <div className="demo24">
-            <Table columns={columns} data={data24} scroll={{ x: "110%", y: 240 }}/>
-          </div>;
+    return (
+        <Table bordered columns={columns12} data={data12} scroll={{y:150 }} />
+    );
   }
 }
 
-export default Demo24;
+export default Demo12;

demo/demolist/Demo121.js

@@ -1,7 +1,7 @@
 /**
 *
 * @title 多选表格
-* @description 点击表格左列按钮即可选中，并且在选中的回调函数中能获取到选中的数据
+* @description 点击表格左列按钮即可选中，并且在选中的回调函数中能获取到选中的数据。支持多选、全选和禁止选择。
 *
 */
 
@@ -42,7 +42,9 @@ const columns12 = [
 const data12 = [
   { a: "杨过", b: "男", c: 30,d:'内行', key: "2",_checked:true },
   { a: "令狐冲", b: "男", c: 41,d:'大侠', key: "1" ,_checked:false},
-  { a: "郭靖", b: "男", c: 25,d:'大侠', key: "3" ,_checked:false}
+  { a: "郭靖", b: "男", c: 25,d:'大侠', key: "3" ,_checked:false},
+  { a: "郭靖1", b: "男", c: 25,d:'大侠', key: "4" ,_disabled:true},
+  { a: "郭靖2", b: "男", c: 25,d:'大侠', key: "5" ,_checked:false}
 ];
 //拼接成复杂功能的table组件不能在render中定义，需要像此例子声明在组件的外侧，不然操作state会导致功能出现异常
 let MultiSelectTable  = multiSelect(Table, Checkbox);

demo/demolist/Demo131.js

@@ -1,7 +1,7 @@
 /**
 *
 * @title 滚动加载
-* @description
+* @description 万行数据渲染
 */
 
 import React, { Component } from "react";

demo/demolist/Demo162.js

@@ -3,8 +3,6 @@
  * @title 表格+搜索
  * @description 搜索刷新表格数据
  *
- *
- * import {Table} from 'tinper-bee';
  */
 
 import React, { Component } from "react";

demo/demolist/Demo181.js

@@ -1,7 +1,7 @@
 /**
  *
  * @title 主子表
- * @description 主表点击子表联动
+ * @description 点击主表行，子表联动切换
  *
  */
 
@@ -35,7 +35,8 @@ class Demo7 extends Component {
   constructor(props) {
     super(props);
     this.state = {
-      children_data: []
+      children_data: [],
+      selectedRowIndex: -1
     };
   }
 
@@ -45,7 +46,8 @@ class Demo7 extends Component {
         children_data: [
           { a: "郭靖", b: "02级一班", c: "文学系", key: "1" },
           { a: "黄蓉", b: "02级一班", c: "文学系", key: "2" }
-        ]
+        ],
+        selectedRowIndex: index
       });
     } else if (record.a === "03级二班") {
       this.setState({
@@ -53,11 +55,13 @@ class Demo7 extends Component {
           { a: "杨过", b: "03级二班", c: "外语系", key: "1" },
           { a: "小龙女", b: "03级二班", c: "外语系", key: "2" },
           { a: "傻姑", b: "03级二班", c: "外语系", key: "3" }
-        ]
+        ],
+        selectedRowIndex: index
       });
     } else if (record.a === "05级三班") {
       this.setState({
-        children_data: [{ a: "金圣叹", b: "05级三班", c: "美术系", key: "1" }]
+        children_data: [{ a: "金圣叹", b: "05级三班", c: "美术系", key: "1" }],
+        selectedRowIndex: index
       });
     }
   };
@@ -69,6 +73,13 @@ class Demo7 extends Component {
           columns={columns7}
           data={data7}
           onRowClick={this.rowclick}
+          rowClassName={(record,index,indent)=>{
+            if (this.state.selectedRowIndex == index) {
+                return 'selected';
+            } else {
+                return '';
+            }
+          }}
           title={currentData => <div>标题: 我是主表</div>}
         />
         <Table

demo/demolist/Demo31.scss

@@ -1,11 +0,0 @@
-.opt-btns{
-    .u-button{
-        background-color: #505F79;
-        border-color: #505F79;
-        color: #fff;
-        &:hover, &:active{
-            background-color: #344563;
-            border-color: #344563;
-        }
-    }
-}

demo/demolist/Demo32.js

@@ -102,11 +102,11 @@ for (let i = 0; i < 20; i++) {
   });
 }
 
-class Demo3 extends Component {
+class Demo32 extends Component {
   render() {
     return (
       <Table
-        className={'demo3'}
+        className={'demo32'}
         columns={columns}
         data={data}
         headerHeight={40} //自定义表头高度
@@ -117,4 +117,4 @@ class Demo3 extends Component {
   }
 }
 
-export default Demo3;
+export default Demo32;

demo/demolist/Demo32.scss

@@ -1,4 +1,4 @@
-.demo3{
+.demo32{
     .u-table-thead th {
         padding-top: 0px;
         padding-bottom: 0px;

demo/demolist/Demo35.js

@@ -105,7 +105,7 @@ function getData(){
   return data;
 }
 
-class Demo18 extends Component {
+class Demo35 extends Component {
   
   constructor(props) {
     super(props);
@@ -126,7 +126,6 @@ class Demo18 extends Component {
       <div>
         <Button 
           className="editable-add-btn"
-          type="ghost"
           onClick={this.changeData}
         >
           动态设置数据源
@@ -142,4 +141,4 @@ class Demo18 extends Component {
     );
   }
 }
-export default Demo18;
+export default Demo35;

demo/demolist/Demo41.js

@@ -37,7 +37,7 @@ const dataSource = [
     value: "yiminghe"
   }
 ];
-class Demo14 extends React.Component {
+class Demo41 extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
@@ -282,7 +282,6 @@ class Demo14 extends React.Component {
       <div>
         <Button
           className="editable-add-btn"
-          type="ghost"
           onClick={this.handleAdd}
         >
           添加一行
@@ -290,7 +289,6 @@ class Demo14 extends React.Component {
         <Button
           style={{marginLeft:"5px"}}
           className="editable-add-btn"
-          type="ghost"
           onClick={this.getData}
         >
           获取数据
@@ -305,4 +303,4 @@ class Demo14 extends React.Component {
   }
 }
 
-export default Demo14;
+export default Demo41;

demo/demolist/Demo51.js

@@ -1,7 +1,7 @@
 /**
 *
-* @title 固定列
-* @description 固定列到表格的某侧
+* @title 左侧固定列
+* @description 固定列到表格的左侧
 *
 */
 
@@ -51,10 +51,10 @@ const data5 = [
   }
 ];
 
-class Demo5 extends Component {
+class Demo51 extends Component {
   render() {
     return <Table columns={columns5} data={data5} scroll={{ x: "110%", y: 240 }}  />;
   }
 }
 
-export default Demo5;
+export default Demo51;

demo/demolist/Demo52.js

@@ -0,0 +1,163 @@
+/**
+*
+* @title 右侧固定列
+* @description 固定列到表格的右侧
+*
+*/
+
+
+
+import React, { Component } from 'react';
+import {Popconfirm} from 'tinper-bee';
+import Table from '../../src';
+
+const columns5 = [
+    {
+        title: "序号",
+        dataIndex: "index",
+        key: "index",
+        width: 100, 
+    },
+    {
+        title: "订单编号",
+        dataIndex: "orderCode",
+        key: "orderCode",
+        width: 100, 
+    },
+    {
+        title: "供应商名称",
+        dataIndex: "supplierName",
+        key: "supplierName",
+        width: 100
+    },
+    {
+        title: "类型",
+        dataIndex: "type_name",
+        key: "type_name",
+        width: 100
+    },
+    {
+        title: "采购组织",
+        dataIndex: "purchasing",
+        key: "purchasing",
+        width: 100
+    },
+    {
+        title: "采购组",
+        dataIndex: "purchasingGroup",
+        key: "purchasingGroup",
+         width: 300
+    },
+    {
+        title: "凭证日期",
+        dataIndex: "voucherDate",
+        key: "voucherDate",
+        width: 100,
+        
+    },
+    {
+        title: "审批状态",
+        dataIndex: "approvalState_name",
+        key: "approvalState_name",
+        width: 100
+    },
+    {
+        title: "确认状态",
+        dataIndex: "confirmState_name",
+        key: "confirmState_name",
+         width: 100
+    }, 
+    {
+        title: "关闭状态",
+        dataIndex: "closeState_name",
+        key: "closeState_name",
+        width: 100
+    },
+    {
+        title: "操作",
+        dataIndex: "d",
+        key: "d",
+        width:100,
+        fixed: "right",
+        render(text, record, index) {
+            return (
+                <div className='operation-btn'>
+                  <Popconfirm trigger="click" placement="right" content={'这是第' + index + '行，内容为:' + text}>
+                      <a href="javascript:;" tooltip={text} >
+                      一些操作
+                      </a>
+                  </Popconfirm>
+                </div>
+            )
+        }
+    }
+];
+
+const data5 = [
+    { 
+        index: 1, 
+        orderCode:"2343", 
+        supplierName: "xxx",
+        type_name: "123",
+        purchasing:'内行', 
+        purchasingGroup:"323",
+        voucherDate:"kkkk",
+        approvalState_name:"vvvv",
+        confirmState_name:"aaaa",
+        closeState_name:"vnnnnn",
+        d:"操作",
+        key: "1"
+    }, 
+    { 
+      index: 2, 
+      _checked:true,
+      orderCode:"222", 
+      supplierName: "22xxx",
+      type_name: "1223",
+      purchasing:'内行2', 
+      purchasingGroup:"3223",
+      voucherDate:"222kk",
+      approvalState_name:"22vvvv",
+      confirmState_name:"2aaaa",
+      closeState_name:"2vnnnnn",
+      d:"2操作",
+      key: "2"
+    },
+    { 
+      index: 3, 
+      orderCode:"222", 
+      supplierName: "22xxx",
+      _disabled:true,
+      type_name: "1223",
+      purchasing:'内行2', 
+      purchasingGroup:"3223",
+      voucherDate:"222kk",
+      approvalState_name:"22vvvv",
+      confirmState_name:"2aaaa",
+      closeState_name:"2vnnnnn",
+      d:"3操作",
+      key: "3"
+    },
+    { 
+      index: 4, 
+      orderCode:"222", 
+      supplierName: "22xxx",
+      type_name: "1223",
+      purchasing:'内行2', 
+      purchasingGroup:"3223",
+      voucherDate:"222kk",
+      approvalState_name:"22vvvv",
+      confirmState_name:"2aaaa",
+      closeState_name:"2vnnnnn",
+      d:"4操作",
+      key: "4"
+    },
+];
+
+class Demo52 extends Component {
+  render() {
+    return <Table columns={columns5} data={data5} scroll={{ x:true, y: 200 }}  />;
+  }
+}
+
+export default Demo52;

demo/demolist/Demo53.js

@@ -0,0 +1,176 @@
+/**
+*
+* @title 动态设置列锁定、解除锁定
+* @description 动态设置固、取消固定列
+* @description 动态固定列设置 一个table动态设置一个方向【fixed: "left"，fixed: "right"】。
+*
+*/
+import React, { Component } from 'react';
+import {Icon,Menu,Dropdown} from "tinper-bee";
+
+import Table from '../../src';
+
+const { Item } = Menu;
+// const columns24 = [
+//   {
+//     title: "Full Name",
+//     width: 100,
+//     dataIndex: "name",
+//     key: "name",
+//     fixed: "left",
+//   },
+//   { title: "Age", width: 100, dataIndex: "age", key: "age", fixed: "left" },
+//   { title: "Column 1", dataIndex: "address", key: "1"  },
+//   { title: "Column 2", dataIndex: "address2", key: "2" },
+//   { title: "Column 3", dataIndex: "address", key: "3" },
+//   { title: "Column 4", dataIndex: "address", key: "4" },
+//   { title: "Column 24", dataIndex: "address", key: "24" },
+//   { title: "Column 6", dataIndex: "address", key: "6" },
+//   { title: "Column 7", dataIndex: "address", key: "7" },
+//   { title: "Column 8", dataIndex: "address", key: "8" }
+// ];
+
+
+const columns24 = [
+  {
+    title: "名字",
+    dataIndex: "a",
+    key: "a",
+    width: 100,
+    fixed: "left",
+  },
+  {
+    title: "性别",
+    dataIndex: "b",
+    key: "b",
+    width: 100,
+    fixed: "left",
+  },
+  {
+    title: "年龄",
+    dataIndex: "c",
+    key: "c",
+    width: 100, 
+  },
+  {
+    title: "武功级别",
+    dataIndex: "d",
+    key: "d",
+    width: 150 
+  },
+  {
+    title: "对手",
+    dataIndex: "e",
+    key: "e",
+    width: 100 
+  },
+  {
+    title: "帮派",
+    dataIndex: "f",
+    key: "f",
+    width: 100 
+  },
+  {
+    title: "武功类型",
+    dataIndex: "g",
+    key: "g",
+    width: 100 
+  },
+  {
+    title: "师傅",
+    dataIndex: "k",
+    key: "k",
+    // width: 100 
+  },
+  {
+    title: "攻击系数",
+    dataIndex: "h",
+    key: "h",
+    width: 100 
+  }
+];
+
+
+const data24 = [
+  { a: "杨过", b: "男", c: 30,d:'内行',e:'黄荣',f:'古墓派',g:'剑术',k:'小龙女',h:'0.5', key: "1" },
+  { a: "令狐冲", b: "男", c: 41,d:'剑客',e:'自己',f:'无',g:'剑术',k:'无',h:'0.5', key: "2" },
+  { a: "郭靖", b: "男", c: 25,d:'大侠',e:'黄荣',f:'朝廷',g:'内容',k:'外侵势力',h:'0.6', key: "3" }
+]; 
+ 
+class Demo24 extends Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      columns:columns24
+    }
+  }
+
+  
+    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 = '解锁'
+      }
+      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() {
+    let {columns} = this.state;
+     columns = this.renderColumnsDropdown(columns);
+    return <div className="demo24">
+            <Table columns={columns} data={data24} scroll={{ x: "110%", y: 240 }}/>
+          </div>;
+  }
+}
+
+export default Demo24;

demo/demolist/Demo71.js

@@ -1,6 +1,6 @@
 /**
 *
-* @title 列过滤
+* @title 列过滤面板
 * @description 点击表格右侧按钮，进行表格列的数据过滤。可以自定义设置显示某列，通过ifshow属性控制，默认为true都显示。afterFilter为过滤之后的回调函数
 *
 */

demo/demolist/Demo83.js

@@ -1,6 +1,6 @@
 /**
  *
- * @title 多功能表格
+ * @title 多列排序
  * @description 多列排序、全选功能、合计（通过使用的封装好的功能方法实现复杂功能，简单易用！）新增回调函数(sorterClick)
  *
  */

demo/demolist/Demo91.js

@@ -1,6 +1,6 @@
 /**
 *
-* @title 列交换
+* @title 拖拽改变列顺序
 * @description 点击列的表头，进行左右拖拽，注意：固定列不可以交换
 */
 import React, { Component } from 'react';

demo/demolist/Demo92.js

@@ -0,0 +1,77 @@
+/**
+*
+* @title 拖拽改变列宽度
+* @description 注：不支持tree结构的表头、合并表头的table
+*/
+import React, { Component } from 'react';
+import {Icon} from "tinper-bee";
+
+import Table from '../../src'; 
+import dragColumn from '../../src/lib/dragColumn';
+
+const columns23 = [
+  {
+    title: "名字",
+    dataIndex: "a",
+    key: "a",
+    width: '200',
+    fixed:'left'
+  },
+  {
+    title: "性别",
+    dataIndex: "b",
+    key: "b",
+    width: '600'
+  },
+  {
+    title: "年龄",
+    dataIndex: "c",
+    key: "c",
+    width: '200',
+    sumCol: true,
+    sorter: (a, b) => a.c - b.c
+  }, 
+  {
+    title: "武功级别",
+    dataIndex: "d",
+    key: "d",
+    width: 500,
+  }
+];
+
+const data23 = [
+  { a: "杨过", b: "男", c: 30,d:'内行', key: "2" },
+  { a: "令狐冲", b: "男", c: 41,d:'大侠', key: "1" },
+  { a: "郭靖", b: "男", c: 25,d:'大侠', key: "31" } , { a: "杨过", b: "男", c: 30,d:'内行', key: "21" },
+  { a: "令狐冲", b: "男", c: 41,d:'大侠', key: "11" },
+  { a: "郭靖", b: "男", c: 25,d:'大侠', key: "32" } , { a: "杨过", b: "男", c: 30,d:'内行', key: "22" },
+  { a: "令狐冲", b: "男", c: 41,d:'大侠', key: "12" },
+  { a: "郭靖", b: "男", c: 25,d:'大侠', key: "3" }
+];
+
+const DragColumnTable = dragColumn(Table);
+
+const defaultProps23 = {
+  prefixCls: "bee-table"
+};
+
+class Demo23 extends Component {
+  constructor(props) {
+    super(props); 
+  }
+
+  render() {
+    return <DragColumnTable columns={columns23} data={data23} bordered
+    dragborder={true} 
+    draggable={true} 
+    scroll={{y:200}}
+    onDropBorder ={(e,width)=>{
+      console.log(width+"--调整列宽后触发事件",e.target);
+    }}
+    />;
+  }
+}
+Demo23.defaultProps = defaultProps23;
+
+
+export default Demo23;

demo/demolist/Demo991.js

@@ -1,212 +0,0 @@
-/**
-* @title 多功能表格
-* @description  根据列进行过滤、拖拽交换列综合使用案例
-*/
-
-import React, { Component } from 'react';
-import {Icon,Checkbox,Popover,Popconfirm} from "tinper-bee";
-
-import Table from '../../src';
-import multiSelect from '../../src/lib/multiSelect';
-import filterColumn from '../../src/lib/filterColumn';
-import dragColumn from "../../src/lib/dragColumn";
-import sum from '../../src/lib/sum';
-
- //Cloumns1
-function getCloumns(){
-  const column = [
-      {
-          title: "序号",
-          dataIndex: "index",
-          key: "index",
-          width: 100, 
-      },
-      {
-          title: "订单编号",
-          dataIndex: "orderCode",
-          key: "orderCode",
-          width: 100, 
-      },
-      {
-          title: "供应商名称",
-          dataIndex: "supplierName",
-          key: "supplierName",
-          width: 100
-      },
-      {
-          title: "类型",
-          dataIndex: "type_name",
-          key: "type_name",
-          width: 100
-      },
-      {
-          title: "采购组织",
-          dataIndex: "purchasing",
-          key: "purchasing",
-          width: 100
-      },
-      {
-          title: "采购组",
-          dataIndex: "purchasingGroup",
-          key: "purchasingGroup",
-           width: 300
-      },
-      {
-          title: "凭证日期",
-          dataIndex: "voucherDate",
-          key: "voucherDate",
-          width: 100,
-          
-      },
-      {
-          title: "审批状态",
-          dataIndex: "approvalState_name",
-          key: "approvalState_name",
-          width: 100
-      },
-      {
-          title: "确认状态",
-          dataIndex: "confirmState_name",
-          key: "confirmState_name",
-           width: 100
-      }, 
-      {
-          title: "关闭状态",
-          dataIndex: "closeState_name",
-          key: "closeState_name",
-          width: 100
-      },
-      {
-          title: "操作",
-          dataIndex: "d",
-          key: "d",
-          width:100,
-          fixed: "right",
-          render(text, record, index) {
-              return (
-                  <div className='operation-btn'>
-                    <Popconfirm trigger="click" placement="right" content={'这是第' + index + '行，内容为:' + text}>
-                        <a href="javascript:;" tooltip={text} >
-                        一些操作
-                        </a>
-                    </Popconfirm>
-                  </div>
-              )
-          }
-      }
-  ];
-  return column;
-}
-
-const dataList = [ 
-  { 
-      index: 1, 
-      orderCode:"2343", 
-      supplierName: "xxx",
-      type_name: "123",
-      purchasing:'内行', 
-      purchasingGroup:"323",
-      voucherDate:"kkkk",
-      approvalState_name:"vvvv",
-      confirmState_name:"aaaa",
-      closeState_name:"vnnnnn",
-      d:"操作",
-      key: "1"
-  }, 
-  { 
-    index: 2, 
-    _checked:true,
-    orderCode:"222", 
-    supplierName: "22xxx",
-    type_name: "1223",
-    purchasing:'内行2', 
-    purchasingGroup:"3223",
-    voucherDate:"222kk",
-    approvalState_name:"22vvvv",
-    confirmState_name:"2aaaa",
-    closeState_name:"2vnnnnn",
-    d:"2操作",
-    key: "2"
-  },
-  { 
-    index: 3, 
-    orderCode:"222", 
-    supplierName: "22xxx",
-    _disabled:true,
-    type_name: "1223",
-    purchasing:'内行2', 
-    purchasingGroup:"3223",
-    voucherDate:"222kk",
-    approvalState_name:"22vvvv",
-    confirmState_name:"2aaaa",
-    closeState_name:"2vnnnnn",
-    d:"3操作",
-    key: "3"
-  },
-  { 
-    index: 4, 
-    orderCode:"222", 
-    supplierName: "22xxx",
-    type_name: "1223",
-    purchasing:'内行2', 
-    purchasingGroup:"3223",
-    voucherDate:"222kk",
-    approvalState_name:"22vvvv",
-    confirmState_name:"2aaaa",
-    closeState_name:"2vnnnnn",
-    d:"4操作",
-    key: "4"
-  },
-]
-
-const DragColumnTable = filterColumn(dragColumn(multiSelect(Table, Checkbox)),Popover);
-
-const defaultProps25 = {
-  prefixCls: "bee-table"
-};
-
-class Demo25 extends Component {
-  constructor(props) {
-    super(props);
-  }
-
-  getSelectedDataFunc=(data)=>{
-      console.log("data",data);
-  }
- 
-  getCloumnsScroll=(columns)=>{
-    let sum = 0;
-    columns.forEach((da)=>{
-        sum += da.width;
-    })
-    console.log("sum",sum);
-    return (sum);
-  }
-
-  selectedRow=(record, index)=>{
-
-  }
-
-  render() {
-    let columns = getCloumns();
-    
-    return <div className="demo25">
-            <DragColumnTable 
-                columns={columns}
-                data={dataList} 
-                getSelectedDataFunc={this.getSelectedDataFunc}
-                
-                checkMinSize={7}
-                draggable={true}
-                multiSelect={{type: "checkbox"}}
-                scroll={{x:true, y: 100}}
-                selectedRow={this.selectedRow}
-                // scroll={{x:this.getCloumnsScroll(columns), y: 150}}
-                />
-            </div>
-  }
-}
-Demo25.defaultProps = defaultProps25;
-
-
-export default Demo25;

demo/demolist/Demo992.js

@@ -1,186 +0,0 @@
-/**
-*
-* @title 增删改表格
-* @description 这是带有增删改功能的表格（此编辑功能未使用render组件）
-*
-*/
-import React, { Component } from "react";
-import Table from "../../src";
-import {Button,Icon,FormControl as Input,Popconfirm} from "tinper-bee";
-class EditableCell extends React.Component {
-  state = {
-    value: this.props.value,
-    editable: false
-  };
-  handleChange = e => {
-    const value = e;
-    this.setState({ value });
-  };
-  check = () => {
-    this.setState({ editable: false });
-    if (this.props.onChange) {
-      this.props.onChange(this.state.value);
-    }
-  };
-  edit = () => {
-    this.setState({ editable: true });
-  };
-  handleKeydown = event => {
-    if (event.keyCode == 13) {
-      this.check();
-    }
-  };
-  render() {
-    const { value, editable } = this.state;
-    return (
-      <div className="editable-cell">
-        {editable ? (
-          <div className="editable-cell-input-wrapper">
-            <Input
-              value={value}
-              onChange={this.handleChange}
-              onKeyDown={this.handleKeydown}
-            />
-            <Icon
-              type="uf-correct"
-              className="editable-cell-icon-check"
-              onClick={this.check}
-            />
-          </div>
-        ) : (
-          <div className="editable-cell-text-wrapper">
-            {value || " "}
-            <Icon
-              type="uf-pencil"
-              className="editable-cell-icon"
-              onClick={this.edit}
-            />
-          </div>
-        )}
-      </div>
-    );
-  }
-}
-
-class Demo2 extends React.Component {
-  constructor(props) {
-    super(props);
-    this.columns = [
-      {
-        title: "姓名",
-        dataIndex: "name",
-        key: "name",
-        width: "30%",
-        render: (text, record, index) => (
-          <EditableCell
-            value={text}
-            onChange={this.onCellChange(index, "name")}
-          />
-        )
-      },
-      {
-        title: "年龄",
-        dataIndex: "age",
-        key: "age"
-      },
-      {
-        title: "你懂的",
-        dataIndex: "address",
-        key: "address"
-      },
-      {
-        title: "操作",
-        dataIndex: "operation",
-        key: "operation",
-        render: (text, record, index) => {
-          return this.state.dataSource.length > 1 ? (
-            <Popconfirm content="确认删除?" id="aa" onClose={this.onDelete(index)}>
-              <Icon type="uf-del" />
-            </Popconfirm>
-          ) : null;
-        }
-      }
-    ];
-
-    this.state = {
-      dataSource: [
-        {
-          key: "0",
-          name: "沉鱼",
-          age: "18",
-          address: "96, 77, 89"
-        },
-        {
-          key: "1",
-          name: "落雁",
-          age: "16",
-          address: "90, 70, 80"
-        },
-        {
-          key: "2",
-          name: "闭月",
-          age: "17",
-          address: "80, 60, 80"
-        },
-        {
-          key: "3",
-          name: "羞花",
-          age: "20",
-          address: "120, 60, 90"
-        }
-      ],
-      count: 4
-    };
-  }
-  onCellChange = (index, key) => {
-    return value => {
-      const dataSource = [...this.state.dataSource];
-      dataSource[index][key] = value;
-      this.setState({ dataSource });
-    };
-  };
-  onDelete = (index) => {
-    return () => {
-      const dataSource = [...this.state.dataSource];
-      dataSource.splice(index, 1);
-      this.setState({ dataSource });
-    }
-  };
-  handleAdd = () => {
-    const { count, dataSource } = this.state;
-    const newData = {
-      key: count,
-      name: `凤姐 ${count}`,
-      age: 32,
-      address: `100 100 100`
-    };
-    this.setState({
-      dataSource: [...dataSource, newData],
-      count: count + 1
-    });
-  };
-
-
-  render() {
-    const { dataSource } = this.state;
-    const columns = this.columns;
-    return (
-      <div>
-        <Button
-          colors="secondary"
-          className="editable-add-btn"
-          type="ghost"
-          onClick={this.handleAdd}
-        >
-          添加
-        </Button>
-        <Table
-          data={dataSource}
-          columns={columns}
-        />
-      </div>
-    );
-  }
-}
-
-export default Demo2;

demo/demolist/Demo994.js

@@ -1,168 +0,0 @@
-/**
-*
-* @title 模态框中行过滤
-* @description 通过Modal组件来展示表格的过滤相关能力，并且通过filterDropdownIncludeKeys设置可选条件
-*
-*/
-
-
-import React, { Component } from 'react';
-import {Modal,Button} from "tinper-bee";
-import Table from '../../src';
-
-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;

dist/demo.css

@@ -579,7 +579,7 @@
     right: 15px; }
 
 .demo02 .u-table-placeholder i {
-  font-size: 40px; }
+  font-size: 60px; }
 
 .demo04.u-table tr:nth-child(2n) {
   background: #f7f9fb; }
@@ -587,17 +587,6 @@
 .demo04.u-table tr.u-table-row-hover, .demo04 .u-table tr:hover {
   background: #ebecf0; }
 
-th .drop-menu .uf {
-  font-size: 12px;
-  visibility: hidden;
-  margin-left: 15px; }
-
-th:hover .uf {
-  visibility: visible; }
-
-.demo3 .u-table-thead th {
-  padding-top: 0px;
-  padding-bottom: 0px; }
 
 .demo8 .u-table {
   margin-bottom: 11px; }
@@ -610,13 +599,16 @@ th:hover .uf {
   -ms-flex-pack: center;
   justify-content: center; }
 
+.demo32 .u-table-thead th {
+  padding-top: 0px;
+  padding-bottom: 0px; }
 
-.opt-btns .u-button {
-  background-color: #505F79;
-  border-color: #505F79;
-  color: #fff; }
-  .opt-btns .u-button:hover, .opt-btns .u-button:active {
-    background-color: #344563;
-    border-color: #344563; }
+th .drop-menu .uf {
+  font-size: 12px;
+  visibility: hidden;
+  margin-left: 15px; }
+
+th:hover .uf {
+  visibility: visible; }
 
 /*# sourceMappingURL=demo.css.map */