/**
*
* @title 增删改表格
* @description 这是带有增删改功能的表格(此编辑功能未使用render组件)
*
*/
import Button from "bee-button";
import React, { Component } from "react";
import Table from "../../src";
import Animate from "bee-animate";
import Icon from "bee-icon";
import Input from "bee-form-control";
import Popconfirm from "bee-popconfirm";
class EditableCell extends React.Component {
state = {
value: this.props.value,
editable: false
};
handleChange = e => {
const value = e.target.value;
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 (
{editable ? (
) : (
{value || " "}
)}
);
}
}
class Demo2 extends React.Component {
constructor(props) {
super(props);
this.columns = [
{
title: "姓名",
dataIndex: "name",
key: "name",
width: "30%",
render: (text, record, index) => (
)
},
{
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 ? (
) : 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
});
};
getBodyWrapper = body => {
return (
{body.props.children}
);
};
render() {
const { dataSource } = this.state;
const columns = this.columns;
return (
);
}
}
export default Demo2;