修改Table数据源
This commit is contained in:
yangchch6
parent
9bb8194716
commit
332bc1ca31
|
|
@ -11,50 +11,115 @@
|
|||
import React, { Component } from 'react';
|
||||
import Table from '../../src';
|
||||
|
||||
|
||||
|
||||
const columns5 = [
|
||||
const columns = [
|
||||
{
|
||||
title: "Full Name",
|
||||
width: 100,
|
||||
dataIndex: "name",
|
||||
key: "name",
|
||||
fixed: "left"
|
||||
title: "序号",
|
||||
dataIndex: "index",
|
||||
key: "index",
|
||||
width: 80,
|
||||
fixed: 'left',
|
||||
render(text, record, index){return index + 1}
|
||||
},
|
||||
{ title: "Age", width: 100, dataIndex: "age", key: "age", fixed: "left" },
|
||||
{ title: "address", dataIndex: "address", key: "address" }
|
||||
{
|
||||
title: "订单编号",
|
||||
dataIndex: "orderCode",
|
||||
key: "orderCode",
|
||||
width: 100,
|
||||
fixed: 'left',
|
||||
},
|
||||
{
|
||||
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: 100
|
||||
},
|
||||
{
|
||||
title: "凭证日期",
|
||||
dataIndex: "voucherDate",
|
||||
key: "voucherDate",
|
||||
width: 200,
|
||||
|
||||
},
|
||||
{
|
||||
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
|
||||
}
|
||||
];
|
||||
|
||||
const data5 = [
|
||||
{
|
||||
key: "1",
|
||||
name: "John Brown",
|
||||
age: 32,
|
||||
address: "New York Park"
|
||||
const data = [
|
||||
{
|
||||
orderCode:"NU0391025",
|
||||
supplierName: "xx供应商",
|
||||
type_name: "1",
|
||||
purchasing:'组织c',
|
||||
purchasingGroup:"aa",
|
||||
voucherDate:"2018年03月18日",
|
||||
approvalState_name:"已审批",
|
||||
confirmState_name:"执行中",
|
||||
closeState_name:"未关闭",
|
||||
key: "1"
|
||||
},
|
||||
{
|
||||
orderCode:"NU0391026",
|
||||
supplierName: "xx供应商",
|
||||
type_name: "2",
|
||||
purchasing:'组织a',
|
||||
purchasingGroup:"bb",
|
||||
voucherDate:"2018年02月05日",
|
||||
approvalState_name:"已审批",
|
||||
confirmState_name:"待确认",
|
||||
closeState_name:"未关闭",
|
||||
key: "2"
|
||||
},
|
||||
{
|
||||
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"
|
||||
{
|
||||
orderCode:"NU0391027",
|
||||
supplierName: "xx供应商",
|
||||
type_name: "3",
|
||||
purchasing:'组织b',
|
||||
purchasingGroup:"aa",
|
||||
voucherDate:"2018年07月01日",
|
||||
approvalState_name:"已审批",
|
||||
confirmState_name:"终止",
|
||||
closeState_name:"已关闭",
|
||||
key: "3"
|
||||
}
|
||||
];
|
||||
|
||||
class Demo51 extends Component {
|
||||
render() {
|
||||
return <Table columns={columns5} data={data5} scroll={{ x: "110%", y: 240 }} />;
|
||||
return <Table columns={columns} data={data} scroll={{ x: "110%", y: 240 }} />;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -12,12 +12,13 @@ import React, { Component } from 'react';
|
|||
import {Popconfirm} from 'tinper-bee';
|
||||
import Table from '../../src';
|
||||
|
||||
const columns5 = [
|
||||
const columns = [
|
||||
{
|
||||
title: "序号",
|
||||
dataIndex: "index",
|
||||
key: "index",
|
||||
width: 100,
|
||||
width: 80,
|
||||
render(text, record, index){return index + 1}
|
||||
},
|
||||
{
|
||||
title: "订单编号",
|
||||
|
|
@ -47,13 +48,13 @@ const columns5 = [
|
|||
title: "采购组",
|
||||
dataIndex: "purchasingGroup",
|
||||
key: "purchasingGroup",
|
||||
width: 300
|
||||
width: 100
|
||||
},
|
||||
{
|
||||
title: "凭证日期",
|
||||
dataIndex: "voucherDate",
|
||||
key: "voucherDate",
|
||||
width: 100,
|
||||
width: 200,
|
||||
|
||||
},
|
||||
{
|
||||
|
|
@ -94,70 +95,48 @@ const columns5 = [
|
|||
}
|
||||
];
|
||||
|
||||
const data5 = [
|
||||
const data = [
|
||||
{
|
||||
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"
|
||||
orderCode:"NU0391025",
|
||||
supplierName: "xx供应商",
|
||||
type_name: "1",
|
||||
purchasing:'组织c',
|
||||
purchasingGroup:"aa",
|
||||
voucherDate:"2018年03月18日",
|
||||
approvalState_name:"已审批",
|
||||
confirmState_name:"执行中",
|
||||
closeState_name:"未关闭",
|
||||
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操作",
|
||||
orderCode:"NU0391026",
|
||||
supplierName: "xx供应商",
|
||||
type_name: "2",
|
||||
purchasing:'组织a',
|
||||
purchasingGroup:"bb",
|
||||
voucherDate:"2018年02月05日",
|
||||
approvalState_name:"已审批",
|
||||
confirmState_name:"待确认",
|
||||
closeState_name:"未关闭",
|
||||
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操作",
|
||||
orderCode:"NU0391027",
|
||||
supplierName: "xx供应商",
|
||||
type_name: "3",
|
||||
purchasing:'组织b',
|
||||
purchasingGroup:"aa",
|
||||
voucherDate:"2018年07月01日",
|
||||
approvalState_name:"已审批",
|
||||
confirmState_name:"终止",
|
||||
closeState_name:"已关闭",
|
||||
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 }} />;
|
||||
return <Table columns={columns} data={data} scroll={{ x:'110%', y: 200 }} />;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -12,78 +12,118 @@ import Table from '../../src';
|
|||
|
||||
const { Item } = Menu;
|
||||
|
||||
const columns24 = [
|
||||
const columns = [
|
||||
{
|
||||
title: "名字",
|
||||
dataIndex: "a",
|
||||
key: "a",
|
||||
width: 100,
|
||||
fixed: "left",
|
||||
title: "序号",
|
||||
dataIndex: "index",
|
||||
key: "index",
|
||||
width: 80,
|
||||
fixed: 'left',
|
||||
render(text, record, index){return index + 1}
|
||||
},
|
||||
{
|
||||
title: "性别",
|
||||
dataIndex: "b",
|
||||
key: "b",
|
||||
width: 100,
|
||||
fixed: "left",
|
||||
title: "订单编号",
|
||||
dataIndex: "orderCode",
|
||||
key: "orderCode",
|
||||
width: 100,
|
||||
fixed: 'left',
|
||||
},
|
||||
{
|
||||
title: "年龄",
|
||||
dataIndex: "c",
|
||||
key: "c",
|
||||
width: 100,
|
||||
title: "供应商名称",
|
||||
dataIndex: "supplierName",
|
||||
key: "supplierName",
|
||||
width: 150
|
||||
},
|
||||
{
|
||||
title: "武功级别",
|
||||
dataIndex: "d",
|
||||
key: "d",
|
||||
width: 150
|
||||
title: "类型",
|
||||
dataIndex: "type_name",
|
||||
key: "type_name",
|
||||
width: 100
|
||||
},
|
||||
{
|
||||
title: "对手",
|
||||
dataIndex: "e",
|
||||
key: "e",
|
||||
width: 100
|
||||
title: "采购组织",
|
||||
dataIndex: "purchasing",
|
||||
key: "purchasing",
|
||||
width: 100
|
||||
},
|
||||
{
|
||||
title: "帮派",
|
||||
dataIndex: "f",
|
||||
key: "f",
|
||||
width: 100
|
||||
title: "采购组",
|
||||
dataIndex: "purchasingGroup",
|
||||
key: "purchasingGroup",
|
||||
width: 100
|
||||
},
|
||||
{
|
||||
title: "武功类型",
|
||||
dataIndex: "g",
|
||||
key: "g",
|
||||
width: 150
|
||||
title: "凭证日期",
|
||||
dataIndex: "voucherDate",
|
||||
key: "voucherDate",
|
||||
width: 200,
|
||||
|
||||
},
|
||||
{
|
||||
title: "师傅",
|
||||
dataIndex: "k",
|
||||
key: "k",
|
||||
// width: 100
|
||||
title: "审批状态",
|
||||
dataIndex: "approvalState_name",
|
||||
key: "approvalState_name",
|
||||
width: 100
|
||||
},
|
||||
{
|
||||
title: "攻击系数",
|
||||
dataIndex: "h",
|
||||
key: "h",
|
||||
width: 100
|
||||
title: "确认状态",
|
||||
dataIndex: "confirmState_name",
|
||||
key: "confirmState_name",
|
||||
width: 100
|
||||
},
|
||||
{
|
||||
title: "关闭状态",
|
||||
dataIndex: "closeState_name",
|
||||
key: "closeState_name",
|
||||
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" }
|
||||
];
|
||||
const data = [
|
||||
{
|
||||
orderCode:"NU0391025",
|
||||
supplierName: "xx供应商",
|
||||
type_name: "1",
|
||||
purchasing:'组织c',
|
||||
purchasingGroup:"aa",
|
||||
voucherDate:"2018年03月18日",
|
||||
approvalState_name:"已审批",
|
||||
confirmState_name:"执行中",
|
||||
closeState_name:"未关闭",
|
||||
key: "1"
|
||||
},
|
||||
{
|
||||
orderCode:"NU0391026",
|
||||
supplierName: "xx供应商",
|
||||
type_name: "2",
|
||||
purchasing:'组织a',
|
||||
purchasingGroup:"bb",
|
||||
voucherDate:"2018年02月05日",
|
||||
approvalState_name:"已审批",
|
||||
confirmState_name:"待确认",
|
||||
closeState_name:"未关闭",
|
||||
key: "2"
|
||||
},
|
||||
{
|
||||
orderCode:"NU0391027",
|
||||
supplierName: "xx供应商",
|
||||
type_name: "3",
|
||||
purchasing:'组织b',
|
||||
purchasingGroup:"aa",
|
||||
voucherDate:"2018年07月01日",
|
||||
approvalState_name:"已审批",
|
||||
confirmState_name:"终止",
|
||||
closeState_name:"已关闭",
|
||||
key: "3"
|
||||
}
|
||||
];
|
||||
|
||||
class Demo24 extends Component {
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
columns:columns24
|
||||
columns:columns
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -149,7 +189,7 @@ class Demo24 extends Component {
|
|||
columns = this.renderColumnsDropdown(columns);
|
||||
return(
|
||||
<div className="demo24">
|
||||
<Table columns={columns} data={data24} scroll={{ x: "110%", y: 240 }}/>
|
||||
<Table columns={columns} data={data} scroll={{ x: "110%", y: 240 }}/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,22 +2,54 @@
|
|||
*
|
||||
* @title 列过滤面板
|
||||
* @parent 列操作-隐藏 Hide
|
||||
* @description 点击表格右侧按钮，进行表格列的数据过滤。可以自定义设置显示某列，通过ifshow属性控制，默认为true都显示。afterFilter为过滤之后的回调函数
|
||||
* @description 点击表头右侧按钮，设置显示或隐藏表格列。可以自定义设置显示某列，通过ifshow属性控制，默认值为true（显示表格所有列）。afterFilter方法为列过滤后触发的回调函数。
|
||||
*
|
||||
*/
|
||||
|
||||
|
||||
import React, { Component } from 'react';
|
||||
import {Icon,Checkbox,Popover,Popconfirm} from "tinper-bee";
|
||||
|
||||
import {Icon,Popover} from "tinper-bee";
|
||||
import Table from '../../src';
|
||||
import filterColumn from '../../src/lib/filterColumn';
|
||||
import sum from '../../src/lib/sum';
|
||||
|
||||
const data21 = [
|
||||
{ a: "杨过", b: "男", c: 30,d:'内行',e: "操作", key: "2" },
|
||||
{ a: "令狐冲", b: "男", c: 41,d:'大侠',e: "操作", key: "1" },
|
||||
{ a: "郭靖", b: "男", c: 25,d:'大侠',e: "操作", key: "3" }
|
||||
const data = [
|
||||
{
|
||||
orderCode:"NU0391025",
|
||||
supplierName: "xx供应商",
|
||||
type_name: "1",
|
||||
purchasing:'组织c',
|
||||
purchasingGroup:"aa",
|
||||
voucherDate:"2018年03月18日",
|
||||
approvalState_name:"已审批",
|
||||
confirmState_name:"执行中",
|
||||
closeState_name:"未关闭",
|
||||
key: "1"
|
||||
},
|
||||
{
|
||||
orderCode:"NU0391026",
|
||||
supplierName: "xx供应商",
|
||||
type_name: "2",
|
||||
purchasing:'组织a',
|
||||
purchasingGroup:"bb",
|
||||
voucherDate:"2018年02月05日",
|
||||
approvalState_name:"已审批",
|
||||
confirmState_name:"待确认",
|
||||
closeState_name:"未关闭",
|
||||
key: "2"
|
||||
},
|
||||
{
|
||||
orderCode:"NU0391027",
|
||||
supplierName: "xx供应商",
|
||||
type_name: "3",
|
||||
purchasing:'组织b',
|
||||
purchasingGroup:"aa",
|
||||
voucherDate:"2018年07月01日",
|
||||
approvalState_name:"已审批",
|
||||
confirmState_name:"终止",
|
||||
closeState_name:"已关闭",
|
||||
key: "3"
|
||||
}
|
||||
];
|
||||
|
||||
const FilterColumnTable = filterColumn(Table, Popover, Icon);
|
||||
|
|
@ -30,34 +62,41 @@ class Demo21 extends Component {
|
|||
constructor(props) {
|
||||
super(props);
|
||||
this.state ={
|
||||
columns21: [
|
||||
{
|
||||
title: "名字",
|
||||
dataIndex: "a",
|
||||
key: "a"
|
||||
// width: 100
|
||||
},
|
||||
{
|
||||
title: "性别",
|
||||
dataIndex: "b",
|
||||
key: "b",
|
||||
// width: 100
|
||||
},
|
||||
{
|
||||
title: "年龄",
|
||||
dataIndex: "c",
|
||||
key: "c",
|
||||
ifshow:false,
|
||||
// width: 200,
|
||||
// sumCol: true,
|
||||
sorter: (a, b) => a.c - b.c
|
||||
},
|
||||
{
|
||||
title: "武功级别",
|
||||
dataIndex: "d",
|
||||
key: "d"
|
||||
}
|
||||
]};
|
||||
columns: [
|
||||
{
|
||||
title: "序号",
|
||||
dataIndex: "index",
|
||||
key: "index",
|
||||
width: 80,
|
||||
fixed: 'left',
|
||||
render(text, record, index){return index + 1}
|
||||
},
|
||||
{
|
||||
title: "订单编号",
|
||||
dataIndex: "orderCode",
|
||||
key: "orderCode",
|
||||
width: 100,
|
||||
fixed: 'left',
|
||||
},
|
||||
{
|
||||
title: "供应商名称",
|
||||
dataIndex: "supplierName",
|
||||
key: "supplierName",
|
||||
width: 150
|
||||
},
|
||||
{
|
||||
title: "类型",
|
||||
dataIndex: "type_name",
|
||||
key: "type_name",
|
||||
width: 100
|
||||
},
|
||||
{
|
||||
title: "采购组织",
|
||||
dataIndex: "purchasing",
|
||||
key: "purchasing",
|
||||
width: 100
|
||||
},
|
||||
]};
|
||||
}
|
||||
afterFilter = (optData,columns)=>{
|
||||
if(optData.key == 'b'){
|
||||
|
|
@ -75,11 +114,14 @@ class Demo21 extends Component {
|
|||
}
|
||||
|
||||
render() {
|
||||
|
||||
return <FilterColumnTable columns={this.state.columns21} data={data21} afterFilter={this.afterFilter} showFilterPopover={this.state.showFilterPopover}/>;
|
||||
return <FilterColumnTable
|
||||
columns={this.state.columns}
|
||||
data={data}
|
||||
afterFilter={this.afterFilter}
|
||||
showFilterPopover={this.state.showFilterPopover}
|
||||
/>;
|
||||
}
|
||||
}
|
||||
|
||||
Demo21.defaultProps = defaultProps21;
|
||||
|
||||
|
||||
export default Demo21;
|
||||
|
|
@ -2,7 +2,7 @@
|
|||
*
|
||||
* @title 多列排序
|
||||
* @parent 列操作-排序 Sort
|
||||
* @description 多列排序、全选功能、合计（通过使用的封装好的功能方法实现复杂功能，简单易用！）新增回调函数(sorterClick)
|
||||
* @description 结合多列排序、全选功能、合计功能的表格示例。新增排序后触发的回调函数sorterClick。
|
||||
*
|
||||
*/
|
||||
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
*
|
||||
* @title 拖拽改变列顺序
|
||||
* @parent 列操作-拖拽 Drag
|
||||
* @description 点击列的表头，进行左右拖拽，注意：固定列不可以交换
|
||||
* @description 点击选择表头并左右拖拽，可以改变表格列顺序。onDrop方法是拖拽交换列后触发的回调函数。注意：固定列不可以交换。
|
||||
*/
|
||||
import React, { Component } from 'react';
|
||||
import {Icon} from "tinper-bee";
|
||||
|
|
@ -10,7 +10,7 @@ import {Icon} from "tinper-bee";
|
|||
import Table from '../../src';
|
||||
import dragColumn from '../../src/lib/dragColumn';
|
||||
|
||||
const columns22 = [
|
||||
const columns = [
|
||||
{
|
||||
title: "名字",
|
||||
dataIndex: "a",
|
||||
|
|
@ -39,7 +39,7 @@ const columns22 = [
|
|||
}
|
||||
];
|
||||
|
||||
const data22 = [
|
||||
const data = [
|
||||
{ a: "杨过", b: "男", c: 30,d:'内行', key: "2" },
|
||||
{ a: "令狐冲", b: "男", c: 41,d:'大侠', key: "1" },
|
||||
{ a: "郭靖", b: "男", c: 25,d:'大侠', key: "3" }
|
||||
|
|
@ -57,13 +57,20 @@ class Demo22 extends Component {
|
|||
}
|
||||
|
||||
render() {
|
||||
return <DragColumnTable columns={columns22} data={data22} bordered
|
||||
|
||||
draggable={true}
|
||||
return <DragColumnTable
|
||||
columns={columns}
|
||||
data={data}
|
||||
bordered
|
||||
draggable={true}
|
||||
onDrop ={(event,data,columns)=>{
|
||||
console.log("--拖拽交换列后触发事件");
|
||||
console.log("event.target:",event.target);
|
||||
console.log("data:",data);
|
||||
console.log("拖拽完成后的columns:",columns);
|
||||
}}
|
||||
/>;
|
||||
}
|
||||
}
|
||||
|
||||
Demo22.defaultProps = defaultProps22;
|
||||
|
||||
|
||||
export default Demo22;
|
||||
|
|
@ -2,7 +2,7 @@
|
|||
*
|
||||
* @title 拖拽改变列宽度
|
||||
* @parent 列操作-拖拽 Drag
|
||||
* @description 注：不支持tree结构的表头、合并表头的table
|
||||
* @description onDropBorder方法为调整列宽后触发的回调函数。注：不支持tree结构的表头、合并表头的table。
|
||||
*/
|
||||
import React, { Component } from 'react';
|
||||
import {Icon} from "tinper-bee";
|
||||
|
|
@ -62,14 +62,17 @@ class Demo23 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 <DragColumnTable
|
||||
columns={columns23}
|
||||
data={data23}
|
||||
bordered
|
||||
dragborder={true}
|
||||
draggable={true}
|
||||
scroll={{y:200}}
|
||||
onDropBorder ={(e,width)=>{
|
||||
console.log(width+"--调整列宽后触发事件",e.target);
|
||||
}}
|
||||
/>;
|
||||
}
|
||||
}
|
||||
Demo23.defaultProps = defaultProps23;
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
/**
|
||||
*
|
||||
* @title 选中行颜色、自定义表格标题和表尾
|
||||
* @title 自定义表格标题、表尾、选中行颜色
|
||||
* @parent 扩展行 Expanded Row
|
||||
* @description 选中行的样式可自定义
|
||||
* @description 可根据业务场景设置不同的`title`和`footer`。选中行颜色可用rowClassName作为选择器自定义css样式。
|
||||
*/
|
||||
|
||||
import React, { Component } from "react";
|
||||
|
|
@ -11,15 +11,16 @@ import {Button,Tooltip,} from "tinper-bee";
|
|||
import Table from "../../src";
|
||||
|
||||
const columns = [
|
||||
{ title: "用户名", dataIndex: "a", key: "a", width:80 , className:"rowClassName"},
|
||||
{ id: "123", title: "性别", dataIndex: "b", key: "b", width: 100 },
|
||||
{ title: "年龄", dataIndex: "c", key: "c", width: 200 },
|
||||
{ title: "员工编号", dataIndex: "a", key: "a", width: 300, className: "rowClassName"},
|
||||
{ title: "员工姓名", dataIndex: "b", key: "b", width: 500 },
|
||||
{ title: "性别", dataIndex: "c", key: "c", width: 500 },
|
||||
{ title: "部门", dataIndex: "d", key: "d", width: 200 }
|
||||
];
|
||||
|
||||
const data = [
|
||||
{ a: "令狐冲", b: "男", c: 41, key: "1" },
|
||||
{ a: "黄蓉", b: "男", c: 67, key: "2" },
|
||||
{ a: "郭靖", b: "男", c: 25, key: "3" }
|
||||
{ a: "ASVAL_201903280005", b: "小张", c: "男", d: "财务二科", key: "1" },
|
||||
{ a: "ASVAL_201903200004", b: "小明", c: "男", d: "财务一科", key: "2" },
|
||||
{ a: "ASVAL_201903120002", b: "小红", c: "女", d: "财务一科", key: "3" }
|
||||
];
|
||||
|
||||
class Demo26 extends Component {
|
||||
|
|
@ -49,8 +50,8 @@ class Demo26 extends Component {
|
|||
selectedRowIndex: index
|
||||
});
|
||||
}}
|
||||
title={currentData => <div>标题: 这是一个标题</div>}
|
||||
footer={currentData => <div>表尾: 我是小尾巴</div>}
|
||||
title={currentData => <div>员工信息统计表</div>}
|
||||
footer={currentData => <div>合计: 共{data.length}条数据</div>}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
*
|
||||
* @title 自定义行高
|
||||
* @parent 扩展行 Expanded Row
|
||||
* @description 设置`height`属性自定义表格行高，设置`headerHeight`属性自定义表头高度。
|
||||
* @description 设置`height`属性自定义表体行高，设置`headerHeight`属性自定义表头高度。
|
||||
*/
|
||||
|
||||
import React, { Component } from "react";
|
||||
|
|
@ -10,32 +10,16 @@ import {Button,Tooltip} from "tinper-bee";
|
|||
import Table from "../../src";
|
||||
|
||||
const columns = [
|
||||
{
|
||||
title: "用户名", dataIndex: "a", key: "a", width: 300, 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: 500},
|
||||
{ title: "年龄", dataIndex: "c", key: "c", width: 200 }
|
||||
{ title: "员工编号", dataIndex: "a", key: "a", width: 300, className: "rowClassName"},
|
||||
{ title: "员工姓名", dataIndex: "b", key: "b", width: 500 },
|
||||
{ title: "性别", dataIndex: "c", key: "c", width: 500 },
|
||||
{ title: "部门", dataIndex: "d", key: "d", width: 200 }
|
||||
];
|
||||
|
||||
const data = [
|
||||
{ a: "令狐冲", b: "男", c: 41, key: "1" },
|
||||
{ a: "杨过叔叔的女儿黄蓉", b: "男", c: 67, key: "2" },
|
||||
{ a: "郭靖", b: "男", c: 25, key: "3" }
|
||||
{ a: "ASVAL_201903280005", b: "小张", c: "男", d: "财务二科", key: "1" },
|
||||
{ a: "ASVAL_201903200004", b: "小明", c: "男", d: "财务一科", key: "2" },
|
||||
{ a: "ASVAL_201903120002", b: "小红", c: "女", d: "财务一科", key: "3" }
|
||||
];
|
||||
|
||||
class Demo1 extends Component {
|
||||
|
|
@ -63,7 +47,6 @@ class Demo1 extends Component {
|
|||
|
||||
render() {
|
||||
return (
|
||||
|
||||
<Table
|
||||
columns={columns}
|
||||
data={data}
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -7,7 +7,6 @@
|
|||
@import url(../node_modules/bee-dropdown/build/Dropdown.css);
|
||||
@import url(../node_modules/bee-input-number/build/InputNumber.css);
|
||||
@import url(../node_modules/bee-modal/build/Modal.css);
|
||||
@import url(../node_modules/tinper-bee/assets/tinper-bee.css);
|
||||
.red {
|
||||
color: rgb(244,67,54) !important; }
|
||||
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue