feat(bee-table): column render方法新增第四个参数为column设置的属性

2020-04-16 14:19:24 +08:00 · 2020-04-16 14:19:24 +08:00 · b4b0c95c9c
parent 3a6626c43b
commit b4b0c95c9c
10 changed files with 10972 additions and 213 deletions
--- a/build/Table.js
+++ b/build/Table.js
@ -951,8 +951,6 @@ var Table = function (_Component) {
      if (rootIndex == -1) {
        index = i + lazyParentIndex;
      }
-      console.log('preHeight', props.preHeight);
-      console.log('height: ', height);
      rst.push(_react2["default"].createElement(_TableRow2["default"], _extends({
        indent: indent,
        indentSize: props.indentSize,
--- a/build/TableCell.js
+++ b/build/TableCell.js
@ -38,6 +38,8 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "d

 function _defaults(obj, defaults) { var keys = Object.getOwnPropertyNames(defaults); for (var i = 0; i < keys.length; i++) { var key = keys[i]; var value = Object.getOwnPropertyDescriptor(defaults, key); if (value && value.configurable && obj[key] === undefined) { Object.defineProperty(obj, key, value); } } return obj; }

+function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
+
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

 function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
@ -313,12 +315,15 @@ var TableCell = function (_Component) {
        bodyDisplayInRow = _props2.bodyDisplayInRow,
        lazyStartIndex = _props2.lazyStartIndex,
        lazyEndIndex = _props2.lazyEndIndex;
+
    var dataIndex = column.dataIndex,
        render = column.render,
        fieldType = column.fieldType,
        linkConfig = column.linkConfig,
        fontColor = column.fontColor,
-        bgColor = column.bgColor;
+        bgColor = column.bgColor,
+        other = _objectWithoutProperties(column, ['dataIndex', 'render', 'fieldType', 'linkConfig', 'fontColor', 'bgColor']);
+
    var _column$className = column.className,
        className = _column$className === undefined ? '' : _column$className;

@ -330,7 +335,8 @@ var TableCell = function (_Component) {
        title = void 0;

    if (render && !showSum) {
-      text = render(text, record, index);
+      text = render(text, record, index, _extends({
+        dataIndex: dataIndex, render: render, fieldType: fieldType, linkConfig: linkConfig, fontColor: fontColor, bgColor: bgColor }, other));
      if (this.isInvalidRenderCellText(text)) {
        tdProps = text.props || {};
        rowSpan = tdProps.rowSpan > lazyEndIndex && lazyEndIndex > 5 ? lazyEndIndex - index : tdProps.rowSpan;
--- a/dist/demo.css
+++ b/dist/demo.css
@ -907,4 +907,241 @@
    background: #344563;
    border-color: #505F79; }

+.demo04.u-table tr:nth-child(2n) {
+  background: #f7f9fb; }
+
+.demo04.u-table tr.u-table-row-hover, .demo04 .u-table tr:hover {
+  background: #ebecf0; }
+
+.demo22 .opt-btns {
+  margin-bottom: 8px; }
+
+.demo32 .u-table-thead th {
+  padding-top: 0px;
+  padding-bottom: 0px; }
+
+.demo0501 .u-table .u-row-hover .opt-btns button, .demo0501 .u-table .u-row-hover .cancel-btns button {
+  margin: 0; }
+  .demo0501 .u-table .u-row-hover .opt-btns button:first-child, .demo0501 .u-table .u-row-hover .cancel-btns button:first-child {
+    margin-right: 8px; }
+
+.demo0501 .u-table .u-table-row td {
+  padding: 5px 8px; }
+  .demo0501 .u-table .u-table-row td input {
+    font-size: 12px;
+    padding-left: 5px; }
+
+.demo0501 .u-table .u-table-row .u-form-control,
+.demo0501 .u-table .u-table-row .u-select-selection {
+  height: 30px; }
+
+.demo0501 .u-table .editable-cell-text-wrapper {
+  box-sizing: border-box;
+  line-height: 20px;
+  border-radius: 3px; }
+
+.demo0501 .u-table .required {
+  margin-left: 10px;
+  position: relative; }
+  .demo0501 .u-table .required::before {
+    content: " ";
+    border: 1px solid #F44336;
+    width: 0;
+    height: 12px;
+    position: absolute;
+    top: 9px;
+    left: -8px; }
+  .demo0501 .u-table .required span.u-input-group {
+    display: block; }
+
+.demo0501 .u-table .verify-cell {
+  padding-right: 25px !important; }
+
+.demo0501 .u-table .required-icon {
+  position: absolute;
+  top: 2px;
+  color: #F44336;
+  font-size: 20px; }
+
+.demo0501 .u-table .ref-input-wrap {
+  width: 160px !important; }
+
+.u-editable-table-tp .tp-content {
+  color: #F44336; }
+
+.u-editable-table .u-table .u-table-row td {
+  padding: 5px 8px; }
+  .u-editable-table .u-table .u-table-row td input {
+    padding-left: 5px;
+    font-size: 12px; }
+    .u-editable-table .u-table .u-table-row td input.error {
+      border-color: #F44336; }
+
+.u-editable-table .u-table .u-table-row .editable-cell {
+  height: 30px; }
+
+.u-editable-table .u-table .u-table-row-hover .editable-cell-text-wrapper {
+  line-height: 19px; }
+
+.u-editable-table .u-table .u-table-row .u-form-control,
+.u-editable-table .u-table .u-table-row .u-select-selection {
+  height: 30px; }
+
+.u-editable-table .u-table .editable-cell-text-wrapper {
+  box-sizing: border-box;
+  line-height: 20px;
+  border-radius: 3px; }
+
+.u-editable-table .u-table .editable-cell-input-wrapper {
+  padding-right: 0; }
+  .u-editable-table .u-table .editable-cell-input-wrapper .ref-input-wrap {
+    width: auto !important;
+    height: 30px; }
+    .u-editable-table .u-table .editable-cell-input-wrapper .ref-input-wrap .u-input-group {
+      display: inline-block; }
+
+.u-editable-table .u-table .verify-cell {
+  padding-right: 25px !important; }
+
+.u-editable-table .u-table .require {
+  position: absolute;
+  top: 2px;
+  color: #F44336;
+  font-size: 20px; }
+
+.u-editable-table-tp .tp-content {
+  color: #F44336; }
+
+.demo0503-m-b.u-modal .u-modal-body {
+  padding: 16px 0;
+  background: #f7f9fb; }
+
+.demo0503-m-b .u-form-group {
+  overflow: hidden; }
+
+.demo0503-m-b .u-form-control {
+  font-size: 12px; }
+
+.demo0503-m-b .editable-cell {
+  display: block;
+  float: left;
+  width: 265px;
+  padding-right: 25px; }
+
+.demo0503-m-b .ref-input-wrap {
+  width: 240px !important; }
+
+.demo0503-m-b .u-label {
+  display: block;
+  float: left;
+  text-align: right;
+  width: 110px;
+  box-sizing: border-box;
+  padding-right: 10px;
+  font-size: 12px;
+  height: 32px;
+  line-height: 32px; }
+  .demo0503-m-b .u-label .mast {
+    padding: 0;
+    color: red; }
+
+.demo0503-m-b .required-icon {
+  position: absolute;
+  top: 2px;
+  color: #F44336;
+  font-size: 20px; }
+
+.u-editable-table-tp {
+  z-index: 9999 !important; }
+  .u-editable-table-tp .tp-content {
+    color: #F44336; }
+
+.ref-core-button .u-button:first-child {
+  margin-right: 8px; }
+
+.demo0505 .toolbar-btns {
+  margin-bottom: 8px; }
+  .demo0505 .toolbar-btns .u-button:first-child {
+    margin-right: 8px; }
+
+.demo0505 .u-table .u-row-select {
+  background-color: #FFF7E7; }
+
+.demo0505 .u-table .u-table-row td {
+  padding: 5px 8px; }
+  .demo0505 .u-table .u-table-row td input {
+    font-size: 12px;
+    padding-left: 5px; }
+
+.demo0505 .u-table .u-table-row .u-form-control,
+.demo0505 .u-table .u-table-row .u-select-selection {
+  height: 30px; }
+
+.demo0505 .u-table .editable-cell-text-wrapper {
+  box-sizing: border-box;
+  line-height: 20px;
+  border-radius: 3px; }
+
+.demo0505 .u-table .required {
+  margin-left: 10px;
+  position: relative; }
+  .demo0505 .u-table .required::before {
+    content: " ";
+    border: 1px solid #F44336;
+    width: 0;
+    height: 12px;
+    position: absolute;
+    top: 9px;
+    left: -8px; }
+  .demo0505 .u-table .required span.u-input-group {
+    display: block; }
+
+.demo0505 .u-table .verify-cell {
+  padding-right: 25px !important; }
+
+.demo0505 .u-table .edited::after {
+  content: " ";
+  position: absolute;
+  z-index: 999;
+  top: 0;
+  left: 0;
+  border-width: 5px;
+  border-style: solid;
+  border-color: #f44336 transparent transparent #f44336; }
+
+.demo0505 .u-table .required-icon {
+  position: absolute;
+  top: 2px;
+  color: #F44336;
+  font-size: 20px; }
+
+.demo0505 .u-table .ref-input-wrap {
+  width: 160px !important; }
+
+.u-editable-table-tp .tp-content {
+  color: #F44336; }
+
+th .drop-menu .uf {
+  font-size: 12px;
+  visibility: hidden;
+  margin-left: 15px; }
+
+th:hover .uf {
+  visibility: visible; }
+
+.expanded-table .expand-icon-con .uf {
+  font-size: 12px; }
+
+
+.demo8 .u-table {
+  margin-bottom: 11px; }
+
+.demo8 .u-pagination {
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-align: center;
+  align-items: center;
+  -ms-flex-pack: center;
+  justify-content: center; }
+
 /*# sourceMappingURL=demo.css.map */
--- a/dist/demo.css.map
+++ b/dist/demo.css.map
--- a/dist/demo.js
+++ b/dist/demo.js
--- a/dist/demo.js.map
+++ b/dist/demo.js.map
--- a/docs/api.md
+++ b/docs/api.md
@ -122,7 +122,7 @@ import 'bee-table/build/Table.css';
 |fixed|	当表水平滚动时，此列将被固定：true或'left'或'right'| true/'left'/'right'|-|
 |sorter|前端列排序方法，只要列上有此属性就说明这列可排序。**注：默认是前端排序,排序方法书写时注意有些字段的值可能是undefined的情况，需要转换成0**| function|-|
 |sorterClick|排序的回调函数|function|-|
-|render|cell的render函数有三个参数：这个单元格的文本，这行的记录，这行的索引，它返回一个对象：{children：value，props：{colSpan：1，rowSpan：1}} ==>'children'是这个单元格的文本，props是这个单元格的一些设置，可以设置单元格行/列合并|-|
+|render|cell的render函数有三个参数：这个单元格的文本，这行的记录，这行的索引，它返回一个对象：{children：value，props：{colSpan：1，rowSpan：1}} ==>'children'是这个单元格的文本，props是这个单元格的一些设置，可以设置单元格行/列合并。2.2.48及以后版本新增第四个参数options为column设置的属性|-|
 |onCellClick|单击列的单元格时调用|Function(row, event)|-|
 |onHeadCellClick|单击表头的单元格时调用|Function(row, event)|row 当前行的数据|
 | order | 设置排序 | string（"descend"、"ascend"） | -|
--- a/package.json
+++ b/package.json
@ -1,6 +1,6 @@
 {
 "name": "bee-table",
- "version": "2.2.47",
+ "version": "2.2.48",
 "description": "Table ui component for react",
 "keywords": [
  "react",
--- a/src/Table.js
+++ b/src/Table.js
@ -783,8 +783,6 @@ class Table extends Component {
      if(rootIndex ==-1){
        index = i+lazyParentIndex
      }
-      console.log('preHeight',props.preHeight)
-      console.log('height: ',height)
      rst.push(
        <TableRow
          indent={indent}
--- a/src/TableCell.js
+++ b/src/TableCell.js
@ -177,7 +177,7 @@ class TableCell extends Component{
  render() {
    const { record, indentSize, clsPrefix, indent,
            index, expandIcon, column ,fixed,showSum, bodyDisplayInRow,lazyStartIndex,lazyEndIndex} = this.props;
-    const { dataIndex, render, fieldType, linkConfig, fontColor, bgColor } = column;
+    const { dataIndex, render, fieldType, linkConfig, fontColor, bgColor,...other } = column;
    let {className = ''} = column;

    let text = objectPath.get(record, dataIndex);
@ -186,7 +186,9 @@ class TableCell extends Component{
    let rowSpan,title;

    if (render && !showSum) {
-      text = render(text, record, index);
+      text = render(text, record, index,{
+        dataIndex, render, fieldType, linkConfig, fontColor, bgColor,...other
+      });
      if (this.isInvalidRenderCellText(text)) {
        tdProps = text.props || {};
        rowSpan = (tdProps.rowSpan>lazyEndIndex && lazyEndIndex>5)?lazyEndIndex-index:tdProps.rowSpan;