diff --git a/components/apolloTable/component/DragSorted.tsx b/components/apolloTable/component/DragSorted.tsx index 6805674e018a31c636e1eb60213670b134ec46bb..34713955220f0788e5d28a0c0145df4a0b01584b 100644 --- a/components/apolloTable/component/DragSorted.tsx +++ b/components/apolloTable/component/DragSorted.tsx @@ -15,6 +15,7 @@ const DragSorted = (props: any) => { columns, cachedFeAttr, position, + columnChsName, } = props; if (!canSorted || position === 'left' || position === 'right') { return
{props.children}
; @@ -100,7 +101,7 @@ const DragSorted = (props: any) => { } timerInterval.current = setInterval(() => { onDragSortedMove(dir, step); - }, 350); + }, 150); } else { // 需要停止,清除已有计时器 // eslint-disable-next-line no-lonely-if @@ -147,8 +148,10 @@ const DragSorted = (props: any) => { } // 拖动回调 const newColumns: any[] = []; - columns.map((item: any) => { - if (Number(dragColumnOrder) > Number(dropColumnOrder)) { + // 从右往左拖 + if (Number(dragColumnOrder) > Number(dropColumnOrder)) { + // columns已排序 + columns.map((item: any, i: number) => { if (item.orderNo >= Number(dropColumnOrder) && item.orderNo <= Number(dragColumnOrder)) { if (item.columnName === dragColumn) { newColumns.push({ @@ -158,28 +161,34 @@ const DragSorted = (props: any) => { } else { newColumns.push({ ...item, - orderNo: item.orderNo + 1, + orderNo: columns[i + 1].orderNo, }); } } else { newColumns.push(item); } - } else { + }); + } else { + // 从左往右拖 + const index = columns.findIndex((item: any) => { + return item.columnName === dropColumn; + }); + columns.map((item: any, i: number) => { if (item.columnName === dragColumn) { newColumns.push({ ...item, - orderNo: Number(dropColumnOrder) - 1, + orderNo: columns[index - 1].orderNo, }); - } else if (item.orderNo >= Number(dragColumnOrder) && item.orderNo <= Number(dropColumnOrder)) { + } else if (item.orderNo > Number(dragColumnOrder) && item.orderNo < Number(dropColumnOrder)) { newColumns.push({ ...item, - orderNo: item.orderNo - 1, + orderNo: columns[i - 1].orderNo, }); } else { newColumns.push(item); } - } - }); + }); + } if (cachedFeAttr) { const cachedCols = getCache({ tableId }); if (cachedCols) { @@ -219,6 +228,7 @@ const DragSorted = (props: any) => { columnCopyDiv.style.left = `${targetRect.x - originLeft}px`; // 影子div宽度=拖动列宽度 columnCopyDiv.style.width = `${targetRect.width}px`; + columnCopyDiv.innerText = columnChsName; // 鼠标x点与拖动列x点之间的距离(记录下来方便后续使用) const detaX = curX - targetRect.x; columnCopyDiv.setAttribute('data-deta-x', String(detaX)); @@ -237,7 +247,7 @@ const DragSorted = (props: any) => { // 阻止默认行为 e.preventDefault(); }, - [columnName, orderNo], + [columnName, orderNo, onMouseMove, onMouseUp], ); return ( diff --git a/components/apolloTable/component/Table.less b/components/apolloTable/component/Table.less index 086dbe336a918d8f4f6b66484019c37b63a27fed..5923b09bced3b4c241da83abb71b06ab6ead951f 100644 --- a/components/apolloTable/component/Table.less +++ b/components/apolloTable/component/Table.less @@ -109,4 +109,6 @@ background: rgba(0, 0, 0, 0.3); display: none; cursor: grab; + text-align: center; + padding-top: @paddingSmX; } diff --git a/components/apolloTable/component/Table.tsx b/components/apolloTable/component/Table.tsx index e600431d1dc6c369c14bf5a74275b105b9d5cfa4..ba719efa11f8af41ee9cdcc5d8736ef00b4ddb71 100644 --- a/components/apolloTable/component/Table.tsx +++ b/components/apolloTable/component/Table.tsx @@ -274,6 +274,7 @@ export default class AirTable extends Component { >