fix(grid): [grid] Fix bug where dragging and dropping in the expanded state of the table cannot render correctly (#2901)

* fix(grid): [grid] 修复表格展开状态下拖拽无法正确渲染bug

* fix(grid): [grid] 根据检视意见修复

* fix(grid): [grid] 修复非扩展行和扩展行之间拖拽和表格外拖拽bug

* fix(grid): [grid] 去除rowid用户设置的意外情况

* fix(grid): [grid] 优化更新性能,只强制更新拖拽行dom

Author: chenxi-20

packages/vue/src/grid/src/body/src/body.tsx

@@ -45,6 +45,8 @@ import { generateFixedClassName } from '../../table/src/utils/handleFixedColumn'
 const isOperateMouse = ($table) =>
   $table._isResize || ($table.lastScrollTime && Date.now() < $table.lastScrollTime + $table.optimizeOpts.delayHover)
 
+let renderRowFlag = false
+
 // 解决静态扫描驼峰变量问题
 const classMap = {
   colEdit: 'col__edit',
@@ -542,6 +544,17 @@ function renderRow(args) {
     return
   }
 
+  let key = rowid
+  if (row._isDraging) {
+    // 防止数据多次刷新导致key回归rowid
+    _vm.$nextTick(() => {
+      delete row._isDraging
+    })
+    if (renderRowFlag) {
+      key = `${rowid}${rowKey}`
+    }
+  }
+
   rows.push(
     h(
       'tr',
@@ -564,7 +577,7 @@ function renderRow(args) {
         attrs: {
           'data-rowid': rowid
         },
-        key: rowKey || treeConfig ? rowid : $rowIndex,
+        key,
         on: trOn
       },
       tableColumn.map((column, $columnIndex) => {
@@ -732,6 +745,7 @@ function renderRows({ h, _vm, $table, $seq, rowLevel, tableData, tableColumn, se
     // 如果是树形表格，则会递归渲染已展开行的子节点
     renderRowTree(args, renderRows)
   })
+  renderRowFlag = !renderRowFlag
 
   return rows
 }

packages/vue/src/grid/src/dragger/src/rowDrop.ts

@@ -59,11 +59,15 @@ export const createHandlerOnEnd = ({ _vm, refresh }) => {
     }
     const options = { children: (_vm.treeConfig || {}).children || 'children' }
     const targetTrElem = event.item
-    const { parentNode: wrapperElem, previousElementSibling: prevTrElem } = targetTrElem
+    const { parentNode: wrapperElem, previousElementSibling: prevEl, nextElementSibling: nextEl } = targetTrElem
+    // 获取真实的上一个拖拽元素
+    let prevTrElem =
+      prevEl && prevEl.classList.contains('tiny-grid-body__row') ? prevEl : prevEl && prevEl.previousElementSibling
     // 这里优先使用用户通过props传递过来的表格数据，所以拖拽后会改变原始数据
     const tableTreeData = _vm.data || _vm.tableData
     const selfRow = _vm.getRowNode(targetTrElem).item
     const selfNode = findTree(tableTreeData, (row) => row === selfRow, options)
+    selfRow._isDraging = true
     const isScrollYLoad = _vm.scrollYLoad
     if (!isScrollYLoad) {
       if (prevTrElem) {
@@ -90,7 +94,8 @@ export const createHandlerOnEnd = ({ _vm, refresh }) => {
           prevNode.items.splice(prevNode.index + (selfNode.index < prevNode.index ? 0 : 1), 0, currRow)
           prevNode.items = [].concat(prevNode.items)
         }
-      } else {
+        // 过滤表格外拖拽
+      } else if (nextEl && nextEl.classList.contains('tiny-grid-body__row')) {
         // 移动到第一行
         const currRow = selfNode.items.splice(selfNode.index, 1)[0]
         tableTreeData.unshift(currRow)