fix:设置expandIconAsCell后样式错乱的问题

2019-07-11 20:52:45 +08:00 · 2019-07-11 20:52:45 +08:00 · 93f5ee329d
parent 9cbf5bf7be
commit 93f5ee329d
13 changed files with 95 additions and 84 deletions
--- a/build/Table.css
+++ b/build/Table.css
@ -179,6 +179,9 @@
  overflow: hidden; }
  .u-table-body {
    position: relative; }
+    .u-table-body .u-table-row-expand-columns-in-body .expand-icon-con {
+      display: none;
+      pointer-events: none; }
  .u-table-hiden-drag {
    position: relative; }
    .u-table-hiden-drag-li {
@ -221,12 +224,16 @@
  .u-table tr td.u-table-multiSelect-column.u-table-row-has-expandIcon:not(.u-table-row-fixed-columns-in-body) {
    display: flex;
    flex-direction: row-reverse; }
+    .u-table tr td.u-table-multiSelect-column.u-table-row-has-expandIcon:not(.u-table-row-fixed-columns-in-body):nth-last-child(1):last-child {
+      border-right: none; }
    .u-table tr td.u-table-multiSelect-column.u-table-row-has-expandIcon:not(.u-table-row-fixed-columns-in-body) .expand-icon-con {
-      height: 15px; }
+      height: 14px; }
      .u-table tr td.u-table-multiSelect-column.u-table-row-has-expandIcon:not(.u-table-row-fixed-columns-in-body) .expand-icon-con .uf {
-        padding-left: 0; }
+        padding: 0; }
      .u-table tr td.u-table-multiSelect-column.u-table-row-has-expandIcon:not(.u-table-row-fixed-columns-in-body) .expand-icon-con .u-table-row-expand-icon {
-        width: 0; }
+        width: 2px; }
+    .u-table tr td.u-table-multiSelect-column.u-table-row-has-expandIcon:not(.u-table-row-fixed-columns-in-body) .u-checkbox {
+      margin: 0; }
  .u-table tr.tr-row-hover {
    background: rgb(235, 236, 240); }
  .u-table th,
@ -245,7 +252,10 @@
      text-align: right; }
    .u-table th .expand-icon-con,
    .u-table td .expand-icon-con {
-      cursor: pointer; }
+      cursor: pointer;
+      display: inline-block;
+      font-size: 12px;
+      line-height: 12px; }
  .u-table-sm td {
    padding: 8px 8px; }
  .u-table-lg td {
@ -337,13 +347,12 @@
  .u-table-row-expand-icon, .u-table-expanded-row-expand-icon {
    cursor: pointer;
    display: inline-block;
-    margin-right: 0px;
+    margin-right: 8px;
    width: 14px;
    height: 14px;
    text-align: center;
    line-height: 14px;
-    user-select: none;
-    margin-right: 10px; }
+    user-select: none; }
    .u-table-row-expand-icon.uf, .u-table-expanded-row-expand-icon.uf {
      font-size: 12px;
      padding: 0; }
--- a/build/Table.js
+++ b/build/Table.js
@ -908,7 +908,7 @@ var Table = function (_Component) {
  };

  Table.prototype.getRows = function getRows(columns, fixed) {
-    //统计index，只有含有鼠表结构才有用，因为数表结构时，固定列的索引取值有问题
+    //统计index，只有含有树表结构才有用，因为树表结构时，固定列的索引取值有问题
    this.treeRowIndex = 0;
    var rs = this.getRowsByData(this.state.data, true, 0, columns, fixed);
    return rs;
@ -993,7 +993,8 @@ var Table = function (_Component) {
        footerScroll = _props3.footerScroll,
        headerScroll = _props3.headerScroll,
        _props3$hideHeaderScr = _props3.hideHeaderScroll,
-        hideHeaderScroll = _props3$hideHeaderScr === undefined ? false : _props3$hideHeaderScr;
+        hideHeaderScroll = _props3$hideHeaderScr === undefined ? false : _props3$hideHeaderScr,
+        expandIconAsCell = _props3.expandIconAsCell;
    var _props4 = this.props,
        useFixedHeader = _props4.useFixedHeader,
        data = _props4.data;
@ -1172,9 +1173,10 @@ var Table = function (_Component) {
    }
    var leftFixedWidth = this.columnManager.getLeftColumnsWidth(this.contentWidth);
    var rightFixedWidth = this.columnManager.getRightColumnsWidth(this.contentWidth);
+    var expandIconWidth = expandIconAsCell ? 33 : 0;
    var parStyle = {};
    if (!fixed) {
-      parStyle = { 'marginLeft': leftFixedWidth, 'marginRight': rightFixedWidth };
+      parStyle = { 'marginLeft': leftFixedWidth + expandIconWidth, 'marginRight': rightFixedWidth };
    }
    return _react2["default"].createElement(
      'div',
--- a/build/TableRow.js
+++ b/build/TableRow.js
@ -560,13 +560,13 @@ var TableRow = function (_Component) {
      collapsedIcon: collapsedIcon,
      isHiddenExpandIcon: isHiddenExpandIcon
    });
-
+    var isExpandIconAsCell = expandIconAsCell ? clsPrefix + '-expand-columns-in-body' : '';
    for (var i = 0; i < columns.length; i++) {
      if (expandIconAsCell && i === 0 && !showSum) {
        cells.push(_react2["default"].createElement(
          'td',
          {
-            className: clsPrefix + '-expand-icon-cell',
+            className: clsPrefix + '-expand-icon-cell ' + isExpandIconAsCell,
            key: 'rc-table-expand-icon-cell-' + i
          },
          expandIcon
--- a/demo/demolist/Demo1101.js
+++ b/demo/demolist/Demo1101.js
@ -2,20 +2,21 @@
 *
 * @title 嵌套子表格
 * @parent 扩展行 Expanded Row
-* @description 通过expandedRowRender参数来实现子表格。收起和展开的图标可自定义传入。
+* @description 通过expandedRowRender参数来实现子表格。收起和展开的图标可自定义传入。注意：多选功能和嵌套表格一起使用时，需要设置 expandIconAsCell={true}，把展开按钮放在单元格中展示。
 * demo1101
 */

 import React, { Component } from "react";
-import { Popconfirm,Icon } from 'tinper-bee';
+import { Popconfirm,Icon,Checkbox } from 'tinper-bee';
 import Table from "../../src";
+import multiSelect from "../../src/lib/multiSelect";

 const columns16 = [
  {
    title: "操作",
    dataIndex: "d",
    key: "d", 
-    width:200,
+    width:100,
    render(text, record, index) {
      return (
        <Popconfirm trigger="click" placement="right" content={'这是第' + index + '行，内容为:' + text}>
@ -32,25 +33,9 @@ const columns16 = [
  
 ];
 const columns17 = [
-  {
-    title: "操作",
-    dataIndex: "d",
-    key: "d",
-    width:200,
-    render(text, record, index) {
-      return (
-        <Popconfirm trigger="click" placement="right" content={'这是第' + index + '行，内容为:' + text}>
-          <a href="javascript:;" tooltip={text} >
-          一些操作
-          </a>
-        </Popconfirm>
-      );
-    }
-  },
  { title: "订单编号", dataIndex: "a", key: "a", width: 100 },
  { id: "123", title: "单据日期", dataIndex: "b", key: "b", width: 100 },
-  { title: "供应商", dataIndex: "c", key: "c", width: 200 },
-  
+  { title: "供应商", dataIndex: "c", key: "c", width: 200 }
 ];

 const data16 = [
@ -58,7 +43,7 @@ const data16 = [
  { a: "NU0391002", b: "2018-11-02", c: "yy供应商", d: "操作", key: "2" },
  { a: "NU0391003", b: "2019-05-03", c: "zz供应商", d: "操作", key: "3" }
 ];
-
+const MultiSelectTable = multiSelect(Table,Checkbox);
 class Demo16 extends Component {
  constructor(props){
    super(props);
@ -73,7 +58,7 @@ class Demo16 extends Component {
      <Table
        columns={columns17}
        style={{height:height}}
-        data={this.state.data_obj[record.key]} 
+        data={this.state.data_obj[record.key]}
       
      />
    );
@ -100,6 +85,7 @@ class Demo16 extends Component {
      }
    }
  }
+
  haveExpandIcon=(record, index)=>{
    //控制是否显示行展开icon，该参数只有在和expandedRowRender同时使用才生效
    if(index == 0){
@ -107,15 +93,16 @@ class Demo16 extends Component {
    }
    return false;
  }
+
  render() {
    return (
-      <Table
+      <MultiSelectTable
        className="expanded-table"
        columns={columns16}
        data={data16}
        onExpand={this.getData}
        expandedRowRender={this.expandedRowRender}
-        scroll={{x:true}}
+        expandIconAsCell={true}
        collapsedIcon={<Icon type='uf-anglearrowpointingtoright'/>}
        expandedIcon={<Icon type='uf-treearrow-down'/>}
      />
--- a/demo/index.js
+++ b/demo/index.js
--- a/dist/demo.css
+++ b/dist/demo.css
@ -164,6 +164,9 @@
  overflow: hidden; }
  .u-table-body {
    position: relative; }
+    .u-table-body .u-table-row-expand-columns-in-body .expand-icon-con {
+      display: none;
+      pointer-events: none; }
  .u-table-hiden-drag {
    position: relative; }
    .u-table-hiden-drag-li {
@ -208,12 +211,16 @@
    display: flex;
    -ms-flex-direction: row-reverse;
    flex-direction: row-reverse; }
+    .u-table tr td.u-table-multiSelect-column.u-table-row-has-expandIcon:not(.u-table-row-fixed-columns-in-body):nth-last-child(1):last-child {
+      border-right: none; }
    .u-table tr td.u-table-multiSelect-column.u-table-row-has-expandIcon:not(.u-table-row-fixed-columns-in-body) .expand-icon-con {
-      height: 15px; }
+      height: 14px; }
      .u-table tr td.u-table-multiSelect-column.u-table-row-has-expandIcon:not(.u-table-row-fixed-columns-in-body) .expand-icon-con .uf {
-        padding-left: 0; }
+        padding: 0; }
      .u-table tr td.u-table-multiSelect-column.u-table-row-has-expandIcon:not(.u-table-row-fixed-columns-in-body) .expand-icon-con .u-table-row-expand-icon {
-        width: 0; }
+        width: 2px; }
+    .u-table tr td.u-table-multiSelect-column.u-table-row-has-expandIcon:not(.u-table-row-fixed-columns-in-body) .u-checkbox {
+      margin: 0; }
  .u-table tr.tr-row-hover {
    background: rgb(235, 236, 240); }
  .u-table th,
@ -232,7 +239,10 @@
      text-align: right; }
    .u-table th .expand-icon-con,
    .u-table td .expand-icon-con {
-      cursor: pointer; }
+      cursor: pointer;
+      display: inline-block;
+      font-size: 12px;
+      line-height: 12px; }
  .u-table-sm td {
    padding: 8px 8px; }
  .u-table-lg td {
@ -324,7 +334,7 @@
  .u-table-row-expand-icon, .u-table-expanded-row-expand-icon {
    cursor: pointer;
    display: inline-block;
-    margin-right: 0px;
+    margin-right: 8px;
    width: 14px;
    height: 14px;
    text-align: center;
@ -332,8 +342,7 @@
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
-    user-select: none;
-    margin-right: 10px; }
+    user-select: none; }
    .u-table-row-expand-icon.uf, .u-table-expanded-row-expand-icon.uf {
      font-size: 12px;
      padding: 0; }
--- 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/package.json
+++ b/package.json
@ -1,6 +1,6 @@
 {
 "name": "bee-table",
- "version": "2.1.6-beta.4",
+ "version": "2.1.6-alpha.1",
 "description": "Table ui component for react",
 "keywords": [
  "react",
--- a/src/Table.js
+++ b/src/Table.js
@ -768,7 +768,7 @@ class Table extends Component {
  }

  getRows(columns, fixed) {
-    //统计index，只有含有鼠表结构才有用，因为数表结构时，固定列的索引取值有问题
+    //统计index，只有含有树表结构才有用，因为树表结构时，固定列的索引取值有问题
    this.treeRowIndex = 0;
    let rs = this.getRowsByData(this.state.data, true, 0, columns, fixed);
    return rs;
@ -846,7 +846,7 @@ class Table extends Component {

  getTable(options = {}) {
    const { columns, fixed } = options;
-    const { clsPrefix, scroll = {}, getBodyWrapper, footerScroll,headerScroll,hideHeaderScroll = false } = this.props;
+    const { clsPrefix, scroll = {}, getBodyWrapper, footerScroll,headerScroll,hideHeaderScroll = false,expandIconAsCell } = this.props;
    let { useFixedHeader,data } = this.props;
    const bodyStyle = { ...this.props.bodyStyle };
    const headStyle = {};
@ -1018,9 +1018,10 @@ class Table extends Component {
    }
    const leftFixedWidth = this.columnManager.getLeftColumnsWidth(this.contentWidth);
    const rightFixedWidth = this.columnManager.getRightColumnsWidth(this.contentWidth);
+    let expandIconWidth = expandIconAsCell ? 33 : 0;
    let parStyle = {}
    if(!fixed){
-      parStyle = {'marginLeft':leftFixedWidth,'marginRight':rightFixedWidth}
+      parStyle = {'marginLeft':leftFixedWidth + expandIconWidth,'marginRight':rightFixedWidth}
    }
    return <div style={parStyle}>{headTable}{BodyTable}</div>;
  }
--- a/src/Table.scss
+++ b/src/Table.scss
@ -32,6 +32,10 @@ $icon-color:#505F79;
  &-body{
    // overflow: hidden!important;
    position: relative;
+    .u-table-row-expand-columns-in-body .expand-icon-con {
+      display: none;
+      pointer-events: none;
+    }
  }
  &-hiden-drag{
    position: relative;
@ -105,15 +109,21 @@ $icon-color:#505F79;
    td.u-table-multiSelect-column.u-table-row-has-expandIcon:not(.u-table-row-fixed-columns-in-body){
      display: flex;
      flex-direction: row-reverse;
+      &:nth-last-child(1):last-child {
+        border-right: none;
+      }
      .expand-icon-con {
-        height: 15px;
+        height: 14px;
        .uf{
-          padding-left: 0;
+          padding: 0;
        }
        .u-table-row-expand-icon {
-          width: 0;
+          width: 2px;
        }
      }
+      .u-checkbox {
+        margin: 0;
+      }
    }
  }
  tr.tr-row-hover {
@ -138,6 +148,9 @@ $icon-color:#505F79;
    }
    .expand-icon-con{
      cursor: pointer;
+      display: inline-block;
+      font-size: 12px;
+      line-height: 12px;
    }
  }
  &-sm {
@ -299,13 +312,12 @@ $icon-color:#505F79;
    &-expand-icon {
      cursor: pointer;
      display: inline-block;
-      margin-right: 0px;
+      margin-right: 8px;
      width: 14px;
      height: 14px;
      text-align: center;
      line-height: 14px;
      user-select: none;
-      margin-right: 10px;
      &.uf{
        font-size: 12px;
        padding: 0;
--- a/src/TableRow.js
+++ b/src/TableRow.js
@ -444,12 +444,12 @@ class TableRow extends Component{
        isHiddenExpandIcon={isHiddenExpandIcon}
      />
    );
-
+    let isExpandIconAsCell = expandIconAsCell ? `${clsPrefix}-expand-columns-in-body` : '';
    for (let i = 0; i < columns.length; i++) {
      if (expandIconAsCell && i === 0 && !showSum ) {
        cells.push(
          <td
-            className={`${clsPrefix}-expand-icon-cell`}
+            className={`${clsPrefix}-expand-icon-cell ${isExpandIconAsCell}`}
            key={`rc-table-expand-icon-cell-${i}`}
          >
            {expandIcon}