添加表格编辑示例：单元格编辑完成，行、全表稍后。

demo/demolist/Demo501.js

@@ -0,0 +1,202 @@
+/**
+ *
+ * @title 单元格编辑
+ * @description 可以对单元格进行编辑的表格，示例中给出输入框+必填校验、下拉框编辑模式，以及输入模式的必填校验。
+ *
+ */
+import React, { Component } from "react";
+import { Table } from "tinper-bee";
+import { Icon, Select, Tooltip } from "tinper-bee";
+const Option = Select.Option;
+
+class StringEditCell extends Component {
+  constructor(props, context) {
+    super(props);
+    this.state = {
+      value: this.props.value,
+      editable: false
+    };
+  }
+
+  commitChange = () => {
+    if (this.state.value === "") return;
+    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.commitChange();
+    }
+  };
+
+  handleChange = e => {
+    this.setState({ value: e.target.value });
+  };
+
+  render() {
+    const { value, editable } = this.state;
+    return (
+      <div className="editable-cell">
+        {editable ? (
+          <div className="editable-cell-input-wrapper">
+            <input
+              className="u-form-control"
+              autoFocus
+              defaultValue={this.props.value}
+              value={value}
+              onKeyDown={this.handleKeydown}
+              onChange={this.handleChange}
+              onBlur={this.commitChange}
+            />
+            {value === "" ? (
+              <Tooltip
+                inverse
+                placement="bottom"
+                overlay={
+                  <div className="help-tip">
+                    {"请输入" + this.props.colName}
+                  </div>
+                }
+              >
+                <Icon className="uf-exc-t require" />
+              </Tooltip>
+            ) : null}
+          </div>
+        ) : (
+          <div className="editable-cell-text-wrapper" onClick={this.edit}>
+            {value || " "}
+          </div>
+        )}
+      </div>
+    );
+  }
+}
+
+const SELECT_SOURCE = ["普通", "精良", "稀有", "传奇", "远古传奇", "太古传奇"];
+
+class SelectEditCell extends Component {
+  constructor(props, context) {
+    super(props);
+    this.state = {
+      value: this.props.value,
+      editable: false
+    };
+  }
+
+  handleSelect = (value) => {
+    this.setState({ value });
+  }
+
+  commitChange = () => {
+    this.setState({ editable: false });
+    if (this.props.onChange) {
+      this.props.onChange(this.state.value);
+    }
+  };
+
+  edit = () => {
+    this.setState({ editable: true });
+  };
+
+  render() {
+    const { value, editable } = this.state;
+    return (
+      <div className="editable-cell">
+        {editable ? (
+          <div className="editable-cell-input-wrapper">
+            <Select
+              defaultValue={this.props.value}
+              value={value}
+              onSelect={this.handleSelect}
+              onBlur={this.commitChange}
+              autoFocus
+            >
+              {SELECT_SOURCE.map((item, index) => (
+                <Option key={index} value={item}>
+                  {item}
+                </Option>
+              ))}
+            </Select>
+          </div>
+        ) : (
+          <div className="editable-cell-text-wrapper" onClick={this.edit}>
+            {value || " "}
+          </div>
+        )}
+      </div>
+    );
+  }
+}
+
+const dataSource = [
+  { name: "全能法戒", quality: "远古传奇", level: 70.11 },
+  { name: "绝命", quality: "太古传奇", level: 70 },
+  { name: "蚀刻符印", quality: "太古传奇", level: 70 },
+  { name: "虹光", quality: "传奇", level: 70 },
+  { name: "复仇者护腕", quality: "传奇", level: 70 }
+];
+
+class Demo501 extends Component {
+  constructor(props, context) {
+    super(props);
+    this.columns = [
+      {
+        title: "装备名称",
+        dataIndex: "name",
+        key: "name",
+        render: (text, record, index) => (
+          <StringEditCell
+            value={text}
+            colName={"装备名称"}
+            onChange={this.onCellChange(index, "name")}
+          />
+        )
+      },
+      {
+        title: "品质",
+        dataIndex: "quality",
+        key: "quality",
+        render: (text, record, index) => (
+          <SelectEditCell
+            value={text}
+            onChange={this.onCellChange(index, "quality")}
+          />
+        )
+      },
+      {
+        title: "需求等级",
+        dataIndex: "level",
+        key: "level"
+      }
+    ];
+
+    this.state = {
+      dataSource: dataSource
+    };
+  }
+
+  onCellChange = (index, key) => {
+    return value => {
+      const { dataSource } = this.state;
+      dataSource[index][key] = value;
+      this.setState({ dataSource }, () => console.dir(this.state.dataSource));
+    };
+  };
+
+  render() {
+    return (
+      <div className="demo501">
+        <Table data={this.state.dataSource} columns={this.columns} />
+      </div>
+    );
+  }
+}
+
+export default Demo501;

demo/demolist/Demo501.scss

@@ -0,0 +1,22 @@
+.demo501 {
+  .editable-cell-text-wrapper {
+    &:hover {
+      border: 1px dashed #A5ADBA;
+    }
+  }
+  .require {
+    position: absolute;
+    top: 2px;
+    color: red;
+    font-size: 20px;
+  }
+}
+.help-tip {
+  color: #F44336;
+}
+.tooltip-arrow {
+  border-bottom-color: #F44336 !important;
+}
+.tooltip-inner {
+  border-color: #F44336 !important;
+}

demo/demolist/Demo502.js

@@ -0,0 +1,153 @@
+/**
+ *
+ * @title 行编辑
+ * @description 可以对行进行编辑的表格
+ *
+ */
+import React, { Component } from "react";
+import { Table } from "tinper-bee";
+import { Icon, FormControl } from "tinper-bee";
+
+class EditableCell extends Component {
+  constructor(props, context) {
+    super(props);
+    this.state = {
+      value: this.props.value,
+      editable: false
+    };
+  }
+
+  handleChange = value => {
+    this.setState({ value });
+    if (this.props.onChange) {
+      this.props.onChange(value);
+    }
+  };
+
+  render() {
+    return (
+      <div className="editable-cell">
+        <div className="editable-cell-input-wrapper">
+          {this.props.editable ? (
+            <FormControl
+              value={this.state.value}
+              onChange={this.handleChange}
+            />
+          ) : (
+            this.state.value || " "
+          )}
+        </div>
+      </div>
+    );
+  }
+}
+
+const dataSource = [
+  { name: "全能法戒", quality: "远古传奇", level: 70 },
+  { name: "绝命", quality: "太古传奇", level: 70 },
+  { name: "蚀刻符印", quality: "太古传奇", level: 70 },
+  { name: "虹光", quality: "传奇", level: 70 },
+  { name: "复仇者护腕", quality: "传奇", level: 70 }
+];
+
+class Demo502 extends Component {
+  constructor(props, context) {
+    super(props);
+    this.columns = [
+      {
+        key: "row_edit",
+        width: "45px",
+        render: (text, record, index) => {
+          return this.state.editingRows.indexOf(index) > -1 ? (
+            <Icon
+              type="uf-correct"
+              className="editable-row-icon-check"
+              onClick={this.commitChange(index)}
+            />
+          ) : (
+            <Icon
+              type="uf-pencil"
+              className="editable-row-icon"
+              onClick={this.edit(index)}
+            />
+          );
+        }
+      },
+      {
+        title: "装备名称",
+        dataIndex: "name",
+        key: "name",
+        render: (text, record, index) => (
+          <EditableCell
+            editable={this.state.editingRows.indexOf(index) > -1}
+            value={text}
+            onChange={this.onCellChange(index, "name")}
+          />
+        )
+      },
+      {
+        title: "品质",
+        dataIndex: "quality",
+        key: "quality",
+        render: (text, record, index) => (
+          <EditableCell
+            editable={this.state.editingRows.indexOf(index) > -1}
+            value={text}
+            onChange={this.onCellChange(index, "quality")}
+          />
+        )
+      },
+      {
+        title: "需求等级",
+        dataIndex: "level",
+        key: "level",
+        render: (text, record, index) => (
+          <EditableCell
+            editable={this.state.editingRows.indexOf(index) > -1}
+            value={text}
+            onChange={this.onCellChange(index, "level")}
+          />
+        )
+      }
+    ];
+
+    this.state = {
+      dataSource: dataSource,
+      editingRows: []
+    };
+
+    this.dataBuffer = {};
+  }
+
+  edit = index => () => {
+    let editingRows = [...this.state.editingRows];
+    editingRows.push(index);
+    this.dataBuffer[index] = Object.assign({}, dataSource[index]);
+    this.setState({ editingRows });
+  };
+
+  commitChange = index => () => {
+    let editingRows = [...this.state.editingRows];
+    let dataSource = [...this.state.dataSource];
+    editingRows.splice(editingRows.indexOf(index), 1);
+    dataSource[index] = this.dataBuffer[index];
+    delete this.dataBuffer[index];
+    this.setState({ editingRows, dataSource });
+  };
+
+  onCellChange = (index, key) => value => {
+    this.dataBuffer[index][key] = value;
+  };
+
+  render() {
+    const { dataSource } = this.state;
+    const columns = this.columns;
+    return (
+      <div className="demo502">
+        <Table data={dataSource} columns={columns} />
+      </div>
+    );
+  }
+}
+
+export default Demo502;

demo/demolist/Demo502.scss

@@ -0,0 +1,15 @@
+.demo502 {
+  .u-table-row-hover {
+      .editable-row-icon,
+      .editable-row-icon-check {
+          display: block !important;
+      }
+  }
+  .u-table-row {
+    height: 58px;
+      .editable-row-icon,
+      .editable-row-icon-check {
+          display: none;
+      }
+  }
+}

demo/demolist/Demo503.js

@@ -0,0 +1,154 @@
+/**
+ *
+ * @title 全表编辑
+ * @description 可以对全表进行编辑的表格
+ *
+ */
+import React, { Component } from "react";
+import { Table } from "tinper-bee";
+import { Icon, FormControl } from "tinper-bee";
+
+class EditableCell extends Component {
+  constructor(props, context) {
+    super(props);
+    this.state = {
+      value: this.props.value,
+      editable: false
+    };
+  }
+
+  handleChange = value => {
+    this.setState({ value });
+    if (this.props.onChange) {
+      this.props.onChange(value);
+    }
+  };
+
+  render() {
+    return (
+      <div className="editable-cell">
+        <div className="editable-cell-input-wrapper">
+          {this.props.editable ? (
+            <FormControl
+              value={this.state.value}
+              onChange={this.handleChange}
+            />
+          ) : (
+            this.state.value || " "
+          )}
+        </div>
+      </div>
+    );
+  }
+}
+
+const dataSource = [
+  { name: "全能法戒", quality: "远古传奇", level: 70 },
+  { name: "绝命", quality: "太古传奇", level: 70 },
+  { name: "蚀刻符印", quality: "太古传奇", level: 70 },
+  { name: "虹光", quality: "传奇", level: 70 },
+  { name: "复仇者护腕", quality: "传奇", level: 70 }
+];
+
+class Demo503 extends Component {
+  constructor(props, context) {
+    super(props);
+    this.state = {
+      dataSource: dataSource,
+      editAll: false
+    };
+    this.dataBuffer = [];
+    this.CONST_COL = [
+      {
+        title: "装备名称",
+        dataIndex: "name",
+        key: "name",
+        render: (text, record, index) => (
+          <EditableCell
+            editable={this.state.editAll}
+            value={text}
+            onChange={this.onCellChange(index, "name")}
+          />
+        )
+      },
+      {
+        title: "品质",
+        dataIndex: "quality",
+        key: "quality",
+        render: (text, record, index) => (
+          <EditableCell
+            editable={this.state.editAll}
+            value={text}
+            onChange={this.onCellChange(index, "quality")}
+          />
+        )
+      },
+      {
+        title: "需求等级",
+        dataIndex: "level",
+        key: "level",
+        render: (text, record, index) => (
+          <EditableCell
+            editable={this.state.editAll}
+            value={text}
+            onChange={this.onCellChange(index, "level")}
+          />
+        )
+      }
+    ];
+  }
+
+  edit = () => {
+    this.dataBuffer = [ ...this.state.dataSource ];
+    this.setState({ editAll: true });
+  };
+
+  commitChange = () => {
+    this.setState({
+      editAll: false,
+      dataSource: this.dataBuffer
+    });
+    this.dataBuffer = [];
+  };
+
+  onCellChange = (index, key) => value => {
+    this.dataBuffer[index][key] = value;
+  };
+
+  render() {
+    let columns = [];
+    if (this.state.editAll) {
+      columns.push({
+        title: (
+          <Icon
+            type="uf-correct"
+            className="editable-row-icon-check"
+            onClick={this.commitChange}
+          />
+        ),
+        key: "row_edit",
+        width: "45px"
+      });
+    } else {
+      columns.push({
+        title: (
+          <Icon
+            type="uf-pencil"
+            className="editable-row-icon"
+            onClick={this.edit}
+          />
+        ),
+        key: "row_edit",
+        width: "45px"
+      });
+    }
+    columns = columns.concat(this.CONST_COL);
+    return (
+      <div className="demo502">
+        <Table data={this.state.dataSource} columns={columns} />
+      </div>
+    );
+  }
+}
+
+export default Demo503;

dist/demo.css

@@ -603,6 +603,34 @@
   padding-top: 0px;
   padding-bottom: 0px; }
 
+.demo501 .editable-cell-text-wrapper:hover {
+  border: 1px dashed #A5ADBA; }
+
+.demo501 .require {
+  position: absolute;
+  top: 2px;
+  color: red;
+  font-size: 20px; }
+
+.help-tip {
+  color: #F44336; }
+
+.tooltip-arrow {
+  border-bottom-color: #F44336 !important; }
+
+.tooltip-inner {
+  border-color: #F44336 !important; }
+
+.demo502 .u-table-row-hover .editable-row-icon,
+.demo502 .u-table-row-hover .editable-row-icon-check {
+  display: block !important; }
+
+.demo502 .u-table-row {
+  height: 58px; }
+  .demo502 .u-table-row .editable-row-icon,
+  .demo502 .u-table-row .editable-row-icon-check {
+    display: none; }
+
 th .drop-menu .uf {
   font-size: 12px;
   visibility: hidden;

package.json

@@ -56,7 +56,7 @@
   "bee-loading": "^1.0.6",
   "bee-locale": "0.0.11",
   "bee-menus": "^2.0.2",
-  "bee-select": "^2.0.4",
+  "bee-select": "^2.0.9",
   "classnames": "^2.2.5",
   "component-classes": "^1.2.6",
   "lodash.clonedeep": "^4.5.0",