/** * * @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;