update column

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;
+                }
             }
         }
     }

components/apolloTable/component/Column.tsx

@@ -76,17 +76,18 @@ export default class TableColumn extends PureComponent<ColumnProps> {
             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<ColumnProps> {
                             </Tooltip>
                         )}
                     </span>
+                    {sortConfig && !!sortFlag && (
+                        <div className={s.sortArrowGroup}>
+                            <div
+                                className={sortType === 'ASC' ? classNames(s.upArrow, s.selected) : s.upArrow}
+                                onClick={() => {
+                                    if (sortType === 'ASC') {
+                                        this.removeSort();
+                                        return;
+                                    }
+                                    this.changeSort('ASC');
+                                }}
+                            />
+                            <div
+                                className={sortType === 'DESC' ? classNames(s.downArrow, s.selected) : s.downArrow}
+                                onClick={() => {
+                                    if (sortType === 'DESC') {
+                                        this.removeSort();
+                                        return;
+                                    }
+                                    this.changeSort('DESC');
+                                }}
+                            />
+                        </div>
+                    )}
                 </div>
-                {sortConfig && !!sortFlag && (
-                    <div className={s.sortArrowGroup}>
-                        <div
-                            className={sortType === 'ASC' ? classNames(s.upArrow, s.selected) : s.upArrow}
-                            onClick={() => {
-                                if (sortType === 'ASC') {
-                                    this.removeSort();
-                                    return;
-                                }
-                                this.changeSort('ASC');
-                            }}
-                        />
-                        <div
-                            className={sortType === 'DESC' ? classNames(s.downArrow, s.selected) : s.downArrow}
-                            onClick={() => {
-                                if (sortType === 'DESC') {
-                                    this.removeSort();
-                                    return;
-                                }
-                                this.changeSort('DESC');
-                            }}
-                        />
-                    </div>
-                )}
             </div>
         );
     }

components/apolloTable/component/Table.tsx

@@ -239,12 +239,13 @@ export default class AirTable extends Component<TableProps, TableState> {
             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<TableProps, TableState> {
                         dataSource={dataSource}
                         icon={icon}
                         required={requiredFlag}
+                        leftMargin={leftMargin}
                     />
                 </DragSorted>
             </DragResized>

components/apolloTable/component/index.tsx

@@ -92,6 +92,7 @@ class AirTable extends React.Component<CommonProps, CommonState> {
             tableId,
             cachedFeAttr,
             renderFirstLeft,
+            leftMargin,
         } = this.props;
         const sortConfig = operateConfig
             && operateConfig.menusGroup
@@ -156,6 +157,7 @@ class AirTable extends React.Component<CommonProps, CommonState> {
                                 canSorted={canSorted}
                                 onDragSorted={onDragSorted}
                                 renderFirstLeft={renderFirstLeft}
+                                leftMargin={leftMargin}
                             />
                         </div>
                     </div>

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[];