diff --git a/demo/demolist/Demo01.js b/demo/demolist/Demo01.js
index 171425f..b7714ae 100644
--- a/demo/demolist/Demo01.js
+++ b/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 (
-
{
- this.setState({
- selectedRowIndex: index
- });
- }}
/>
-
-
);
}
}
-export default Demo1;
+export default Demo01;
diff --git a/demo/demolist/Demo02.js b/demo/demolist/Demo02.js
index 5325edf..9275368 100644
--- a/demo/demolist/Demo02.js
+++ b/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 = () =>
- class Demo10 extends Component {
- render() {
- return ;
- }
+class Demo02 extends Component {
+ render() {
+ return ;
}
+}
-export default Demo10;
\ No newline at end of file
+export default Demo02;
\ No newline at end of file
diff --git a/demo/demolist/Demo02.scss b/demo/demolist/Demo02.scss
index 1cdec0d..2a00696 100644
--- a/demo/demolist/Demo02.scss
+++ b/demo/demolist/Demo02.scss
@@ -1,5 +1,5 @@
.demo02 {
.u-table-placeholder i{
- font-size: 40px;
+ font-size: 60px;
}
}
\ No newline at end of file
diff --git a/demo/demolist/Demo03.js b/demo/demolist/Demo03.js
index 81c9a34..0e41b3e 100644
--- a/demo/demolist/Demo03.js
+++ b/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 ;
+ return ;
}
}
-export default Demo6;
\ No newline at end of file
+export default Demo03;
\ No newline at end of file
diff --git a/demo/demolist/Demo04.js b/demo/demolist/Demo04.js
index ccec9ca..9f6d600 100644
--- a/demo/demolist/Demo04.js
+++ b/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 ;
+ return ;
}
}
diff --git a/demo/demolist/Demo05.js b/demo/demolist/Demo05.js
index f134d02..610f7b3 100644
--- a/demo/demolist/Demo05.js
+++ b/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 {
标题: 这是一个标题
}
footer={currentData => 表尾: 我是小尾巴
}
// loading={this.state.loading}或者是boolean
@@ -70,4 +69,4 @@ class Demo17 extends Component {
}
}
-export default Demo17;
+export default Demo05;
diff --git a/demo/demolist/Demo8.js b/demo/demolist/Demo101.js
similarity index 100%
rename from demo/demolist/Demo8.js
rename to demo/demolist/Demo101.js
diff --git a/demo/demolist/Demo9.js b/demo/demolist/Demo102.js
similarity index 98%
rename from demo/demolist/Demo9.js
rename to demo/demolist/Demo102.js
index fc0ed8a..c96460c 100644
--- a/demo/demolist/Demo9.js
+++ b/demo/demolist/Demo102.js
@@ -1,6 +1,6 @@
/**
*
-* @title 树形表格
+* @title 层级树型展示
* @description 通过在data中配置children数据,来自动生成树形表格
*
*/
diff --git a/demo/demolist/Demo22.js b/demo/demolist/Demo103.js
similarity index 88%
rename from demo/demolist/Demo22.js
rename to demo/demolist/Demo103.js
index cec3491..081eb20 100644
--- a/demo/demolist/Demo22.js
+++ b/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" }
];
diff --git a/demo/demolist/Demo31.js b/demo/demolist/Demo104.js
similarity index 50%
rename from demo/demolist/Demo31.js
rename to demo/demolist/Demo104.js
index 1d43fb8..7357726 100644
--- a/demo/demolist/Demo31.js
+++ b/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 (
-
- );
- }
- }
+ { 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,25 +46,23 @@ 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
+ handleClick = () => {
+ console.log('这是第' , this.currentIndex , '行');
+ console.log('内容:' , this.currentRecord);
}
+
+ onRowHover=(index,record)=>{
+ this.currentIndex = index;
+ this.currentRecord = record;
+ }
+
+ getHoverContent=()=>{
+ return
+ }
+
render() {
return (
-
+
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 {
- console.log(width+"--调整列宽后触发事件",e.target);
- }}
- />;
+ return (
+
+ );
}
}
-Demo23.defaultProps = defaultProps23;
-
-export default Demo23;
\ No newline at end of file
+export default Demo11;
diff --git a/demo/demolist/Demo12.js b/demo/demolist/Demo12.js
index a358350..fa3bff5 100644
--- a/demo/demolist/Demo12.js
+++ b/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" }
-];
-
-class Demo24 extends Component {
-
- constructor(props) {
- super(props);
- this.state = {
- columns:columns24
+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"
}
- }
-
-
- 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 = (
- )
- column.title = (
-
- {column.title}
-
-
-
-
-
- );
- return column;
- });
-
- }
-
+];
+class Demo12 extends Component {
render() {
- let {columns} = this.state;
- columns = this.renderColumnsDropdown(columns);
- return ;
+ return (
+
+ );
}
}
-export default Demo24;
\ No newline at end of file
+export default Demo12;
diff --git a/demo/demolist/Demo2.js b/demo/demolist/Demo121.js
similarity index 86%
rename from demo/demolist/Demo2.js
rename to demo/demolist/Demo121.js
index 0bb8cbe..394f8e4 100644
--- a/demo/demolist/Demo2.js
+++ b/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);
diff --git a/demo/demolist/Demo27.js b/demo/demolist/Demo131.js
similarity index 96%
rename from demo/demolist/Demo27.js
rename to demo/demolist/Demo131.js
index a57d408..990466d 100644
--- a/demo/demolist/Demo27.js
+++ b/demo/demolist/Demo131.js
@@ -1,7 +1,7 @@
/**
*
* @title 滚动加载
-* @description
+* @description 万行数据渲染
*/
import React, { Component } from "react";
diff --git a/demo/demolist/Demo27.scss b/demo/demolist/Demo131.scss
similarity index 100%
rename from demo/demolist/Demo27.scss
rename to demo/demolist/Demo131.scss
diff --git a/demo/demolist/Demo28.js b/demo/demolist/Demo132.js
similarity index 100%
rename from demo/demolist/Demo28.js
rename to demo/demolist/Demo132.js
diff --git a/demo/demolist/Demo29.js b/demo/demolist/Demo133.js
similarity index 100%
rename from demo/demolist/Demo29.js
rename to demo/demolist/Demo133.js
diff --git a/demo/demolist/Demo30.js b/demo/demolist/Demo134.js
similarity index 100%
rename from demo/demolist/Demo30.js
rename to demo/demolist/Demo134.js
diff --git a/demo/demolist/Demo24.js b/demo/demolist/Demo161.js
similarity index 100%
rename from demo/demolist/Demo24.js
rename to demo/demolist/Demo161.js
diff --git a/demo/demolist/Demo24.scss b/demo/demolist/Demo161.scss
similarity index 100%
rename from demo/demolist/Demo24.scss
rename to demo/demolist/Demo161.scss
diff --git a/demo/demolist/Demo25.js b/demo/demolist/Demo162.js
similarity index 98%
rename from demo/demolist/Demo25.js
rename to demo/demolist/Demo162.js
index 30a010e..c1763bc 100644
--- a/demo/demolist/Demo25.js
+++ b/demo/demolist/Demo162.js
@@ -3,8 +3,6 @@
* @title 表格+搜索
* @description 搜索刷新表格数据
*
- *
- * import {Table} from 'tinper-bee';
*/
import React, { Component } from "react";
diff --git a/demo/demolist/Demo993.js b/demo/demolist/Demo181.js
similarity index 81%
rename from demo/demolist/Demo993.js
rename to demo/demolist/Demo181.js
index 3ff92eb..cbb351b 100644
--- a/demo/demolist/Demo993.js
+++ b/demo/demolist/Demo181.js
@@ -1,85 +1,96 @@
-/**
- *
- * @title 主子表
- * @description 主表点击子表联动
- *
- */
-
-import React, { Component } from "react";
-import Table from "../../src";
-
-const columns7 = [
- { title: "班级", dataIndex: "a", key: "a" },
- { title: "人数", dataIndex: "b", key: "b" },
- { title: "班主任", dataIndex: "c", key: "c" },
- {
- title: "武功级别",
- dataIndex: "d",
- key: "d"
- }
-];
-
-const data7 = [
- { a: "02级一班", b: "2", c: "欧阳锋", d: "大侠", key: "1" },
- { a: "03级二班", b: "3", c: "归海一刀", d: "大侠", key: "2" },
- { a: "05级三班", b: "1", c: "一拳超人", d: "愣头青", key: "3" }
-];
-
-const columns7_1 = [
- { title: "姓名", dataIndex: "a", key: "a" },
- { title: "班级", dataIndex: "b", key: "b" },
- { title: "系别", dataIndex: "c", key: "c" }
-];
-
-class Demo7 extends Component {
- constructor(props) {
- super(props);
- this.state = {
- children_data: []
- };
- }
-
- rowclick = (record, index) => {
- if (record.a === "02级一班") {
- this.setState({
- children_data: [
- { a: "郭靖", b: "02级一班", c: "文学系", key: "1" },
- { a: "黄蓉", b: "02级一班", c: "文学系", key: "2" }
- ]
- });
- } else if (record.a === "03级二班") {
- this.setState({
- children_data: [
- { a: "杨过", b: "03级二班", c: "外语系", key: "1" },
- { a: "小龙女", b: "03级二班", c: "外语系", key: "2" },
- { a: "傻姑", b: "03级二班", c: "外语系", key: "3" }
- ]
- });
- } else if (record.a === "05级三班") {
- this.setState({
- children_data: [{ a: "金圣叹", b: "05级三班", c: "美术系", key: "1" }]
- });
- }
- };
-
- render() {
- return (
-
-
标题: 我是主表
}
- />
- 标题: 我是子表
}
- />
-
- );
- }
-}
-
-export default Demo7;
+/**
+ *
+ * @title 主子表
+ * @description 点击主表行,子表联动切换
+ *
+ */
+
+import React, { Component } from "react";
+import Table from "../../src";
+
+const columns7 = [
+ { title: "班级", dataIndex: "a", key: "a" },
+ { title: "人数", dataIndex: "b", key: "b" },
+ { title: "班主任", dataIndex: "c", key: "c" },
+ {
+ title: "武功级别",
+ dataIndex: "d",
+ key: "d"
+ }
+];
+
+const data7 = [
+ { a: "02级一班", b: "2", c: "欧阳锋", d: "大侠", key: "1" },
+ { a: "03级二班", b: "3", c: "归海一刀", d: "大侠", key: "2" },
+ { a: "05级三班", b: "1", c: "一拳超人", d: "愣头青", key: "3" }
+];
+
+const columns7_1 = [
+ { title: "姓名", dataIndex: "a", key: "a" },
+ { title: "班级", dataIndex: "b", key: "b" },
+ { title: "系别", dataIndex: "c", key: "c" }
+];
+
+class Demo7 extends Component {
+ constructor(props) {
+ super(props);
+ this.state = {
+ children_data: [],
+ selectedRowIndex: -1
+ };
+ }
+
+ rowclick = (record, index) => {
+ if (record.a === "02级一班") {
+ this.setState({
+ children_data: [
+ { a: "郭靖", b: "02级一班", c: "文学系", key: "1" },
+ { a: "黄蓉", b: "02级一班", c: "文学系", key: "2" }
+ ],
+ selectedRowIndex: index
+ });
+ } else if (record.a === "03级二班") {
+ this.setState({
+ children_data: [
+ { 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" }],
+ selectedRowIndex: index
+ });
+ }
+ };
+
+ render() {
+ return (
+
+
{
+ if (this.state.selectedRowIndex == index) {
+ return 'selected';
+ } else {
+ return '';
+ }
+ }}
+ title={currentData => 标题: 我是主表
}
+ />
+ 标题: 我是子表
}
+ />
+
+ );
+ }
+}
+
+export default Demo7;
diff --git a/demo/demolist/Demo31.scss b/demo/demolist/Demo31.scss
deleted file mode 100644
index a36d139..0000000
--- a/demo/demolist/Demo31.scss
+++ /dev/null
@@ -1,11 +0,0 @@
-.opt-btns{
- .u-button{
- background-color: #505F79;
- border-color: #505F79;
- color: #fff;
- &:hover, &:active{
- background-color: #344563;
- border-color: #344563;
- }
- }
-}
\ No newline at end of file
diff --git a/demo/demolist/Demo18.js b/demo/demolist/Demo32.js
similarity index 91%
rename from demo/demolist/Demo18.js
rename to demo/demolist/Demo32.js
index bafc394..f026c26 100644
--- a/demo/demolist/Demo18.js
+++ b/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 (