diff --git a/components/apolloTable/component/Column.less b/components/apolloTable/component/Column.less index a545672ea54e641db45d284c83ee3abba79cf7ea..8f26e3acf3657d508c28eb74092f33f3e0c13f8f 100644 --- a/components/apolloTable/component/Column.less +++ b/components/apolloTable/component/Column.less @@ -15,23 +15,23 @@ .colBrief { display: flex; align-items: center; - margin-right: @marginSmX; - //flex: 1; + flex: 1; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; .colIcon { + display: flex; width: @textFontGen; color: @textPrimaryColor; margin-right: 5px; } .colTitle { - flex: 1; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; text-align: left; color: @textPrimaryColor; font-weight: @weightSemiblod; display: flex; + margin-right: @marginSmX; &.required:before { display: inline-block; margin-right: 4px; @@ -60,36 +60,35 @@ } } } - } - - .sortArrowGroup { - .upArrow { - width: 0; - height: 0; - border-left: 3px solid transparent; - border-right: 3px solid transparent; - border-bottom: 6px solid #d8d8d8; - margin-bottom: 2px; - cursor: pointer; - &:hover { - border-bottom-color: #5088e4; - } - &.selected { - border-bottom-color: #5088e4; - } - } - .downArrow { - width: 0; - height: 0; - border-left: 3px solid transparent; - border-right: 3px solid transparent; - border-top: 6px solid #d8d8d8; - cursor: pointer; - &:hover { - border-top-color: #5088e4; + .sortArrowGroup { + .upArrow { + width: 0; + height: 0; + border-left: 3px solid transparent; + border-right: 3px solid transparent; + border-bottom: 6px solid #d8d8d8; + margin-bottom: 2px; + cursor: pointer; + &:hover { + border-bottom-color: #5088e4; + } + &.selected { + border-bottom-color: #5088e4; + } } - &.selected { - border-top-color: #5088e4; + .downArrow { + width: 0; + height: 0; + border-left: 3px solid transparent; + border-right: 3px solid transparent; + border-top: 6px solid #d8d8d8; + cursor: pointer; + &:hover { + border-top-color: #5088e4; + } + &.selected { + border-top-color: #5088e4; + } } } } diff --git a/components/apolloTable/component/Column.tsx b/components/apolloTable/component/Column.tsx index 9ab73c2d9d3d94d8b6e24cfb0b8479982e3afa00..2f9dd88f32fe4834cd0523e797b952afddc79b50 100644 --- a/components/apolloTable/component/Column.tsx +++ b/components/apolloTable/component/Column.tsx @@ -76,17 +76,18 @@ export default class TableColumn extends PureComponent { rowSelection, icon, required, + leftMargin = 0, } = this.props; const { value = [] } = sortConfig || {}; const sort = value.find((item: any) => { return item.colName === columnName; }); const { sortType }: { sortType: string } = sort || {}; - let marginLeft:any = 0; + let marginLeft: any = 0; if (columnIndex === 0 && (rowSelection || showIndex)) { - marginLeft = '72px'; + marginLeft = `${leftMargin + 36}px`; if (!rowSelection) { - marginLeft = '91px'; + marginLeft = `${leftMargin + 70}px`; } } return ( @@ -102,31 +103,31 @@ export default class TableColumn extends PureComponent { )} + {sortConfig && !!sortFlag && ( +
+
{ + if (sortType === 'ASC') { + this.removeSort(); + return; + } + this.changeSort('ASC'); + }} + /> +
{ + if (sortType === 'DESC') { + this.removeSort(); + return; + } + this.changeSort('DESC'); + }} + /> +
+ )}
- {sortConfig && !!sortFlag && ( -
-
{ - if (sortType === 'ASC') { - this.removeSort(); - return; - } - this.changeSort('ASC'); - }} - /> -
{ - if (sortType === 'DESC') { - this.removeSort(); - return; - } - this.changeSort('DESC'); - }} - /> -
- )}
); } diff --git a/components/apolloTable/component/Table.tsx b/components/apolloTable/component/Table.tsx index 048fac95de16b5bcba1ee2d68c9e826126cab6f9..9ff9e1c3f233a4c2a2166f38558c3f386679c846 100644 --- a/components/apolloTable/component/Table.tsx +++ b/components/apolloTable/component/Table.tsx @@ -239,12 +239,13 @@ export default class AirTable extends Component { showIndex, rowSelection, dataSource, - canResized, + canResized = true, onDragResized, canSorted, onDragSorted, tableId, cachedFeAttr, + leftMargin, } = this.props; const { columns } = this.state; const formatColumns = this.memoizeFormatColumns(columns, cachedFeAttr, tableId); @@ -299,6 +300,7 @@ export default class AirTable extends Component { dataSource={dataSource} icon={icon} required={requiredFlag} + leftMargin={leftMargin} /> diff --git a/components/apolloTable/component/index.tsx b/components/apolloTable/component/index.tsx index 774c37a2434e4ffffe391afede8f623b57edaee9..d18c1d24ae4510d5e4db606edde12188cb0e1530 100644 --- a/components/apolloTable/component/index.tsx +++ b/components/apolloTable/component/index.tsx @@ -92,6 +92,7 @@ class AirTable extends React.Component { tableId, cachedFeAttr, renderFirstLeft, + leftMargin, } = this.props; const sortConfig = operateConfig && operateConfig.menusGroup @@ -156,6 +157,7 @@ class AirTable extends React.Component { canSorted={canSorted} onDragSorted={onDragSorted} renderFirstLeft={renderFirstLeft} + leftMargin={leftMargin} />
diff --git a/components/apolloTable/component/interface.tsx b/components/apolloTable/component/interface.tsx index f1c48391db9a823c9bd88b73b00cefe4e81a3967..ee1478eebc684e27c006f9f8a0167efc8edec0e2 100644 --- a/components/apolloTable/component/interface.tsx +++ b/components/apolloTable/component/interface.tsx @@ -85,6 +85,7 @@ export interface TableProps extends LoadConfigProps { onEmitMsg?: Function; // 是否支持消息协同 cachedFeAttr?: boolean; // 是否启用前端缓存 renderFirstLeft?:Function; // 第一个单元格特殊渲染 + leftMargin?: number; // 第一个表头左侧对齐距离 } export interface TableState { columns: ColumnProps[];