vxe-pc-ui 4.20.33 → 4.20.35

package/es/list/src/list.js

@@ -78,1125 +78,1140 @@ function createInternalData() {
   };
 }
 let crossListDragRowObj = null;
-var list_default = defineVxeComponent({
-  name: "VxeList",
-  props: {
-    data: Array,
-    height: [Number, String],
-    maxHeight: [Number, String],
-    loading: Boolean,
-    className: [String, Function],
-    size: {
-      type: String,
-      default: () => getConfig().list.size || getConfig().size
-    },
-    autoResize: {
-      type: Boolean,
-      default: () => getConfig().list.autoResize
-    },
-    syncResize: [Boolean, String, Number],
-    showSeq: {
-      type: Boolean,
-      default: () => getConfig().list.showSeq
-    },
-    showRadio: {
-      type: Boolean,
-      default: () => getConfig().list.showRadio
-    },
-    checkRowKey: [String, Number],
-    radioConfig: Object,
-    showCheckbox: {
-      type: Boolean,
-      default: () => getConfig().list.showCheckbox
-    },
-    checkRowKeys: Array,
-    checkboxConfig: Object,
-    rowConfig: Object,
-    dragConfig: Object,
-    menuConfig: Object,
-    virtualYConfig: Object,
-    scrollY: Object,
-    useScrollbar: {
-      type: Boolean,
-      default: () => getDefaultConfig(getConfig().list.useScrollbar, getConfig().useScrollbar)
+var list_default = (
+  /* define-vxe-component start */
+  defineVxeComponent({
+    name: "VxeList",
+    props: {
+      data: Array,
+      height: [Number, String],
+      maxHeight: [Number, String],
+      loading: Boolean,
+      className: [String, Function],
+      size: {
+        type: String,
+        default: () => getConfig().list.size || getConfig().size
+      },
+      autoResize: {
+        type: Boolean,
+        default: () => getConfig().list.autoResize
+      },
+      syncResize: [Boolean, String, Number],
+      showSeq: {
+        type: Boolean,
+        default: () => getConfig().list.showSeq
+      },
+      showRadio: {
+        type: Boolean,
+        default: () => getConfig().list.showRadio
+      },
+      checkRowKey: [String, Number],
+      radioConfig: Object,
+      showCheckbox: {
+        type: Boolean,
+        default: () => getConfig().list.showCheckbox
+      },
+      checkRowKeys: Array,
+      checkboxConfig: Object,
+      rowConfig: Object,
+      dragConfig: Object,
+      menuConfig: Object,
+      virtualYConfig: Object,
+      scrollY: Object,
+      useScrollbar: {
+        type: Boolean,
+        default: () => getDefaultConfig(getConfig().list.useScrollbar, getConfig().useScrollbar)
+      },
+      scrollbarConfig: Object
     },
-    scrollbarConfig: Object
-  },
-  emits: ["update:checkRowKey", "update:checkRowKeys", "row-click", "row-dblclick", "current-change", "radio-change", "checkbox-change", "checkbox-all", "scroll", "row-dragstart", "row-dragover", "row-dragend", "row-remove-dragend", "row-insert-dragend", "row-menu", "menu-click"],
-  setup(props, context) {
-    const { slots, emit } = context;
-    const xID = XEUtils.uniqueId();
-    const browseObj = XEUtils.browse();
-    const reactData = reactive(createReactData());
-    const internalData = createInternalData();
-    const crossListDragRowInfo = getCrossListDragRowInfo();
-    const refElem = ref();
-    const refHeaderElem = ref();
-    const refFooterElem = ref();
-    const refVirtualWrapper = ref();
-    const refVirtualSpaceElem = ref();
-    const refVirtualBody = ref();
-    const refDragRowLineElem = ref();
-    const refDragTipElem = ref();
-    const { computeSize } = useFns.useSize(props);
-    const { computeIsVScrollbar } = useFns.useVScrollbar(props);
-    const refMaps = {
-      refElem
-    };
-    const $xeList = {
-      xID,
-      props,
-      context,
-      reactData,
-      internalData,
-      getRefMaps: () => refMaps
-    };
-    const { refTrackXElem, refTrackYElem, refThumbXElem, refThumbYElem, updateThumbSize, updateThumbOffset, clickTrackXEvent, clickTrackYEvent, pointerdownThumbXEvent, pointermoveThumbXEvent, cleatPointerThumbEvent, pointerdownThumbYEvent, pointermoveThumbYEvent } = useFns.useInitVScrollbar($xeList);
-    const computeRowOpts = computed(() => {
-      return Object.assign({}, getConfig().list.rowConfig, props.rowConfig);
-    });
-    const computeDragOpts = computed(() => {
-      return Object.assign({}, getConfig().list.dragConfig, props.dragConfig);
-    });
-    const computeSYOpts = computed(() => {
-      return Object.assign({}, getConfig().list.virtualYConfig || getConfig().list.scrollY, props.virtualYConfig || props.scrollY);
-    });
-    const computeKeyField = computed(() => {
-      const rowOpts = computeRowOpts.value;
-      const { keyField } = rowOpts;
-      return keyField || "";
-    });
-    const computeIsDrag = computed(() => {
-      const { dragConfig } = props;
-      const dragOpts = computeDragOpts.value;
-      return dragConfig && isEnableConf(dragOpts);
-    });
-    const computeRowHeight = computed(() => {
-      const rowOpts = computeRowOpts.value;
-      const { height } = rowOpts;
-      return height;
-    });
-    const computeRadioOpts = computed(() => {
-      return Object.assign({ showIcon: true }, getConfig().list.radioConfig, props.radioConfig);
-    });
-    const computeCheckboxOpts = computed(() => {
-      return Object.assign({ showIcon: true }, getConfig().list.checkboxConfig, props.checkboxConfig);
-    });
-    const computeMenuOpts = computed(() => {
-      return Object.assign({}, getConfig().list.menuConfig, props.menuConfig);
-    });
-    const computeWrapperStyles = computed(() => {
-      const rowHeight = computeRowHeight.value;
-      const barWidth = computeScrollYWidth.value;
-      const barHeight = computeScrollXHeight.value;
-      const stys = {};
-      if (rowHeight) {
-        stys["--vxe-ui-list-row-height"] = toCssUnit(rowHeight);
-      }
-      if (barWidth || barHeight) {
-        stys["--vxe-ui-scrollbar-y-width"] = toCssUnit(barWidth || barHeight);
-        stys["--vxe-ui-scrollbar-x-height"] = toCssUnit(barHeight || barWidth);
-      }
-      return stys;
-    });
-    const computeVirtualStyles = computed(() => {
-      const { height, maxHeight } = props;
-      const { customHeight, customMaxHeight, headHeight, footHeight } = reactData;
-      const style = {};
-      if (height) {
-        style.height = toCssUnit(Math.max(20, customHeight - headHeight - footHeight));
-      } else if (maxHeight) {
-        style.height = "auto";
-        style.maxHeight = toCssUnit(Math.max(20, customMaxHeight - headHeight - footHeight));
-      }
-      return style;
-    });
-    const computeScrollbarOpts = computed(() => {
-      return Object.assign({}, getConfig().list.scrollbarConfig, props.scrollbarConfig);
-    });
-    const computeScrollbarXOpts = computed(() => {
-      const scrollbarOpts = computeScrollbarOpts.value;
-      return Object.assign({}, getConfig().scrollbar.xConfig, scrollbarOpts.xConfig);
-    });
-    const computeScrollbarYOpts = computed(() => {
-      const scrollbarOpts = computeScrollbarOpts.value;
-      return Object.assign({}, getConfig().scrollbar.yConfig, scrollbarOpts.yConfig);
-    });
-    const computeScrollXHeight = computed(() => {
-      const scrollbarOpts = computeScrollbarOpts.value;
-      const scrollbarXOpts = computeScrollbarXOpts.value;
-      return getDefaultConfig(getDefaultConfig(scrollbarXOpts.height, scrollbarOpts.height), getConfig().scrollbar.height);
-    });
-    const computeScrollYWidth = computed(() => {
-      const scrollbarOpts = computeScrollbarOpts.value;
-      const scrollbarYOpts = computeScrollbarYOpts.value;
-      return getDefaultConfig(getDefaultConfig(scrollbarYOpts.width, scrollbarOpts.width), getConfig().scrollbar.width);
-    });
-    const computeScrollXVisible = computed(() => {
-      const scrollbarOpts = computeScrollbarOpts.value;
-      const scrollbarXOpts = computeScrollbarXOpts.value;
-      return getDefaultConfig(scrollbarXOpts.visible, scrollbarOpts.visible);
-    });
-    const computeScrollYVisible = computed(() => {
-      const scrollbarOpts = computeScrollbarOpts.value;
-      const scrollbarYOpts = computeScrollbarYOpts.value;
-      return getDefaultConfig(scrollbarYOpts.visible, scrollbarOpts.visible);
-    });
-    const computeScrollXAutoHide = computed(() => {
-      const scrollbarOpts = computeScrollbarOpts.value;
-      const scrollbarXOpts = computeScrollbarXOpts.value;
-      return getDefaultConfig(getDefaultConfig(scrollbarXOpts.autoHide, scrollbarOpts.autoHide), getConfig().scrollbar.autoHide);
-    });
-    const computeScrollYAutoHide = computed(() => {
-      const scrollbarOpts = computeScrollbarOpts.value;
-      const scrollbarYOpts = computeScrollbarYOpts.value;
-      return getDefaultConfig(getDefaultConfig(scrollbarYOpts.autoHide, scrollbarOpts.autoHide), getConfig().scrollbar.autoHide);
-    });
-    const computeScrollbarWrapperClss = computed(() => {
-      const { yThumbHeight, xThumbWidth } = reactData;
-      const scrollbarOpts = computeScrollbarOpts.value;
-      const scrollbarXToTop = computeScrollbarXToTop.value;
-      const scrollbarYToLeft = computeScrollbarYToLeft.value;
-      const scrollXVisible = computeScrollXVisible.value;
-      const scrollYVisible = computeScrollYVisible.value;
-      return domUtils.buildClass(
-        [
-          "vxe-scrollbar is--virtual",
-          scrollbarOpts.fluentOverlay ? "is--fluent-overlay" : "is--default-mode",
-          `ov-x--${scrollXVisible === false ? "hidden" : "visible"}`,
-          `ov-y--${scrollYVisible === false ? "hidden" : "visible"}`,
-          `sx-pos--${scrollbarXToTop ? "top" : "bottom"}`,
-          `sy-pos--${scrollbarYToLeft ? "left" : "right"}`
-        ],
-        {
-          "overflow-y": yThumbHeight,
-          "overflow-x": xThumbWidth
+    emits: ["update:checkRowKey", "update:checkRowKeys", "row-click", "row-dblclick", "current-change", "radio-change", "checkbox-change", "checkbox-all", "scroll", "row-dragstart", "row-dragover", "row-dragend", "row-remove-dragend", "row-insert-dragend", "row-menu", "menu-click"],
+    setup(props, context) {
+      const { slots, emit } = context;
+      const xID = XEUtils.uniqueId();
+      const browseObj = XEUtils.browse();
+      const reactData = reactive(createReactData());
+      const internalData = createInternalData();
+      const crossListDragRowInfo = getCrossListDragRowInfo();
+      const refElem = ref();
+      const refHeaderElem = ref();
+      const refFooterElem = ref();
+      const refVirtualWrapper = ref();
+      const refVirtualSpaceElem = ref();
+      const refVirtualBody = ref();
+      const refDragRowLineElem = ref();
+      const refDragTipElem = ref();
+      const { computeSize } = useFns.useSize(props);
+      const { computeIsVScrollbar } = useFns.useVScrollbar(props);
+      const refMaps = {
+        refElem
+      };
+      const $xeList = {
+        xID,
+        props,
+        context,
+        reactData,
+        internalData,
+        getRefMaps: () => refMaps
+      };
+      const { refTrackXElem, refTrackYElem, refThumbXElem, refThumbYElem, updateThumbSize, updateThumbOffset, clickTrackXEvent, clickTrackYEvent, pointerdownThumbXEvent, pointermoveThumbXEvent, cleatPointerThumbEvent, pointerdownThumbYEvent, pointermoveThumbYEvent } = useFns.useInitVScrollbar($xeList);
+      const computeRowOpts = computed(() => {
+        return Object.assign({}, getConfig().list.rowConfig, props.rowConfig);
+      });
+      const computeDragOpts = computed(() => {
+        return Object.assign({}, getConfig().list.dragConfig, props.dragConfig);
+      });
+      const computeSYOpts = computed(() => {
+        return Object.assign({}, getConfig().list.virtualYConfig || getConfig().list.scrollY, props.virtualYConfig || props.scrollY);
+      });
+      const computeKeyField = computed(() => {
+        const rowOpts = computeRowOpts.value;
+        const { keyField } = rowOpts;
+        return keyField || "";
+      });
+      const computeIsDrag = computed(() => {
+        const { dragConfig } = props;
+        const dragOpts = computeDragOpts.value;
+        return dragConfig && isEnableConf(dragOpts);
+      });
+      const computeRowHeight = computed(() => {
+        const rowOpts = computeRowOpts.value;
+        const { height } = rowOpts;
+        return height;
+      });
+      const computeRadioOpts = computed(() => {
+        return Object.assign({ showIcon: true }, getConfig().list.radioConfig, props.radioConfig);
+      });
+      const computeCheckboxOpts = computed(() => {
+        return Object.assign({ showIcon: true }, getConfig().list.checkboxConfig, props.checkboxConfig);
+      });
+      const computeMenuOpts = computed(() => {
+        return Object.assign({}, getConfig().list.menuConfig, props.menuConfig);
+      });
+      const computeWrapperStyles = computed(() => {
+        const rowHeight = computeRowHeight.value;
+        const barWidth = computeScrollYWidth.value;
+        const barHeight = computeScrollXHeight.value;
+        const stys = {};
+        if (rowHeight) {
+          stys["--vxe-ui-list-row-height"] = toCssUnit(rowHeight);
         }
-      );
-    });
-    const computeScrollbarXToTop = computed(() => {
-      const scrollbarXOpts = computeScrollbarXOpts.value;
-      return scrollbarXOpts.position === "top";
-    });
-    const computeScrollbarYToLeft = computed(() => {
-      const scrollbarYOpts = computeScrollbarYOpts.value;
-      return scrollbarYOpts.position === "left";
-    });
-    const dispatchEvent = (type, params, evnt) => {
-      emit(type, createEvent(evnt, { $list: $xeList }, params));
-    };
-    const emitCheckboxMode = (value) => {
-      emit("update:checkRowKeys", value);
-    };
-    const emitRadioMode = (value) => {
-      emit("update:checkRowKey", value);
-    };
-    const getRowId = (row) => {
-      const keyField = computeKeyField.value;
-      return getRowIdByField(row, keyField);
-    };
-    const getParentElem = () => {
-      const el = refElem.value;
-      return el ? el.parentElement : null;
-    };
-    const calcTableHeight = (key) => {
-      const { parentHeight } = reactData;
-      const val = props[key];
-      let num = 0;
-      if (val) {
-        if (val === "100%" || val === "auto") {
-          num = parentHeight;
-        } else {
-          if (isScale(val)) {
-            num = Math.floor((XEUtils.toInteger(val) || 1) / 100 * parentHeight);
-          } else {
-            num = XEUtils.toNumber(val);
+        if (barWidth || barHeight) {
+          stys["--vxe-ui-scrollbar-y-width"] = toCssUnit(barWidth || barHeight);
+          stys["--vxe-ui-scrollbar-x-height"] = toCssUnit(barHeight || barWidth);
+        }
+        return stys;
+      });
+      const computeVirtualStyles = computed(() => {
+        const { height, maxHeight } = props;
+        const { customHeight, customMaxHeight, headHeight, footHeight } = reactData;
+        const style = {};
+        if (height) {
+          style.height = toCssUnit(Math.max(20, customHeight - headHeight - footHeight));
+        } else if (maxHeight) {
+          style.height = "auto";
+          style.maxHeight = toCssUnit(Math.max(20, customMaxHeight - headHeight - footHeight));
+        }
+        return style;
+      });
+      const computeScrollbarOpts = computed(() => {
+        return Object.assign({}, getConfig().list.scrollbarConfig, props.scrollbarConfig);
+      });
+      const computeScrollbarXOpts = computed(() => {
+        const scrollbarOpts = computeScrollbarOpts.value;
+        return Object.assign({}, getConfig().scrollbar.xConfig, scrollbarOpts.xConfig);
+      });
+      const computeScrollbarYOpts = computed(() => {
+        const scrollbarOpts = computeScrollbarOpts.value;
+        return Object.assign({}, getConfig().scrollbar.yConfig, scrollbarOpts.yConfig);
+      });
+      const computeScrollXHeight = computed(() => {
+        const scrollbarOpts = computeScrollbarOpts.value;
+        const scrollbarXOpts = computeScrollbarXOpts.value;
+        return getDefaultConfig(getDefaultConfig(scrollbarXOpts.height, scrollbarOpts.height), getConfig().scrollbar.height);
+      });
+      const computeScrollYWidth = computed(() => {
+        const scrollbarOpts = computeScrollbarOpts.value;
+        const scrollbarYOpts = computeScrollbarYOpts.value;
+        return getDefaultConfig(getDefaultConfig(scrollbarYOpts.width, scrollbarOpts.width), getConfig().scrollbar.width);
+      });
+      const computeScrollXVisible = computed(() => {
+        const scrollbarOpts = computeScrollbarOpts.value;
+        const scrollbarXOpts = computeScrollbarXOpts.value;
+        return getDefaultConfig(scrollbarXOpts.visible, scrollbarOpts.visible);
+      });
+      const computeScrollYVisible = computed(() => {
+        const scrollbarOpts = computeScrollbarOpts.value;
+        const scrollbarYOpts = computeScrollbarYOpts.value;
+        return getDefaultConfig(scrollbarYOpts.visible, scrollbarOpts.visible);
+      });
+      const computeScrollXAutoHide = computed(() => {
+        const scrollbarOpts = computeScrollbarOpts.value;
+        const scrollbarXOpts = computeScrollbarXOpts.value;
+        return getDefaultConfig(getDefaultConfig(scrollbarXOpts.autoHide, scrollbarOpts.autoHide), getConfig().scrollbar.autoHide);
+      });
+      const computeScrollYAutoHide = computed(() => {
+        const scrollbarOpts = computeScrollbarOpts.value;
+        const scrollbarYOpts = computeScrollbarYOpts.value;
+        return getDefaultConfig(getDefaultConfig(scrollbarYOpts.autoHide, scrollbarOpts.autoHide), getConfig().scrollbar.autoHide);
+      });
+      const computeScrollbarWrapperClss = computed(() => {
+        const { yThumbHeight, xThumbWidth } = reactData;
+        const scrollbarOpts = computeScrollbarOpts.value;
+        const scrollbarXToTop = computeScrollbarXToTop.value;
+        const scrollbarYToLeft = computeScrollbarYToLeft.value;
+        const scrollXVisible = computeScrollXVisible.value;
+        const scrollYVisible = computeScrollYVisible.value;
+        return domUtils.buildClass(
+          [
+            "vxe-scrollbar is--virtual",
+            scrollbarOpts.fluentOverlay ? "is--fluent-overlay" : "is--default-mode",
+            `ov-x--${scrollXVisible === false ? "hidden" : "visible"}`,
+            `ov-y--${scrollYVisible === false ? "hidden" : "visible"}`,
+            `sx-pos--${scrollbarXToTop ? "top" : "bottom"}`,
+            `sy-pos--${scrollbarYToLeft ? "left" : "right"}`
+          ],
+          {
+            "overflow-y": yThumbHeight,
+            "overflow-x": xThumbWidth
           }
-          num = Math.max(40, num);
-        }
-      }
-      return num;
-    };
-    const updateHeight = () => {
-      const headEl = refHeaderElem.value;
-      const footEl = refFooterElem.value;
-      reactData.headHeight = headEl ? Math.floor(headEl.offsetHeight) : 0;
-      reactData.footHeight = footEl ? Math.floor(footEl.offsetHeight) : 0;
-      reactData.customHeight = calcTableHeight("height");
-      reactData.customMaxHeight = calcTableHeight("maxHeight");
-    };
-    const updateYSpace = () => {
-      const { scrollYLoad } = reactData;
-      const { scrollYStore, fullData } = internalData;
-      reactData.bodyHeight = scrollYLoad ? fullData.length * scrollYStore.rowHeight : 0;
-      reactData.topSpaceHeight = scrollYLoad ? Math.max(scrollYStore.startIndex * scrollYStore.rowHeight, 0) : 0;
-    };
-    const updateAfterFullData = () => {
-      const { fullData } = internalData;
-      internalData.afterList = fullData.slice(0);
-      updateAfterDataIndex();
-    };
-    const handleData = (force) => {
-      const { scrollYLoad } = reactData;
-      const { fullData, scrollYStore, rowMaps } = internalData;
-      const keyField = computeKeyField.value;
-      if (force) {
-        updateAfterFullData();
-      }
-      const rowList = scrollYLoad ? fullData.slice(scrollYStore.startIndex, scrollYStore.endIndex) : fullData.slice(0);
-      if (keyField) {
-        rowList.forEach((item, $index) => {
-          const rowid = getRowIdByField(item, keyField);
-          const rowRest = rowMaps[rowid];
-          if (rowRest) {
-            rowRest.$index = $index;
+        );
+      });
+      const computeScrollbarXToTop = computed(() => {
+        const scrollbarXOpts = computeScrollbarXOpts.value;
+        return scrollbarXOpts.position === "top";
+      });
+      const computeScrollbarYToLeft = computed(() => {
+        const scrollbarYOpts = computeScrollbarYOpts.value;
+        return scrollbarYOpts.position === "left";
+      });
+      const dispatchEvent = (type, params, evnt) => {
+        emit(type, createEvent(evnt, { $list: $xeList }, params));
+      };
+      const emitCheckboxMode = (value) => {
+        emit("update:checkRowKeys", value);
+      };
+      const emitRadioMode = (value) => {
+        emit("update:checkRowKey", value);
+      };
+      const getRowId = (row) => {
+        const keyField = computeKeyField.value;
+        return getRowIdByField(row, keyField);
+      };
+      const getParentElem = () => {
+        const el = refElem.value;
+        return el ? el.parentElement : null;
+      };
+      const calcTableHeight = (key) => {
+        const { parentHeight } = reactData;
+        const val = props[key];
+        let num = 0;
+        if (val) {
+          if (val === "100%" || val === "auto") {
+            num = parentHeight;
+          } else {
+            if (isScale(val)) {
+              num = Math.floor((XEUtils.toInteger(val) || 1) / 100 * parentHeight);
+            } else {
+              num = XEUtils.toNumber(val);
+            }
+            num = Math.max(40, num);
           }
-        });
-      }
-      reactData.rowList = rowList;
-      return nextTick();
-    };
-    const updateYData = () => {
-      handleData();
-      updateYSpace();
-    };
-    const computeScrollLoad = () => {
-      return nextTick().then(() => {
+        }
+        return num;
+      };
+      const updateHeight = () => {
+        const headEl = refHeaderElem.value;
+        const footEl = refFooterElem.value;
+        reactData.headHeight = headEl ? Math.floor(headEl.offsetHeight) : 0;
+        reactData.footHeight = footEl ? Math.floor(footEl.offsetHeight) : 0;
+        reactData.customHeight = calcTableHeight("height");
+        reactData.customMaxHeight = calcTableHeight("maxHeight");
+      };
+      const updateYSpace = () => {
         const { scrollYLoad } = reactData;
-        const { scrollYStore } = internalData;
-        const virtualBodyElem = refVirtualBody.value;
-        const sYOpts = computeSYOpts.value;
-        let rowHeight = 0;
-        let firstRowElem;
-        if (virtualBodyElem) {
-          if (sYOpts.sItem) {
-            firstRowElem = virtualBodyElem.querySelector(sYOpts.sItem);
+        const { scrollYStore, fullData } = internalData;
+        reactData.bodyHeight = scrollYLoad ? fullData.length * scrollYStore.rowHeight : 0;
+        reactData.topSpaceHeight = scrollYLoad ? Math.max(scrollYStore.startIndex * scrollYStore.rowHeight, 0) : 0;
+      };
+      const updateAfterFullData = () => {
+        const { fullData } = internalData;
+        internalData.afterList = fullData.slice(0);
+        updateAfterDataIndex();
+      };
+      const handleData = (force) => {
+        const { scrollYLoad } = reactData;
+        const { fullData, scrollYStore, rowMaps } = internalData;
+        const keyField = computeKeyField.value;
+        if (force) {
+          updateAfterFullData();
+        }
+        const rowList = scrollYLoad ? fullData.slice(scrollYStore.startIndex, scrollYStore.endIndex) : fullData.slice(0);
+        if (keyField) {
+          rowList.forEach((item, $index) => {
+            const rowid = getRowIdByField(item, keyField);
+            const rowRest = rowMaps[rowid];
+            if (rowRest) {
+              rowRest.$index = $index;
+            }
+          });
+        }
+        reactData.rowList = rowList;
+        return nextTick();
+      };
+      const updateYData = () => {
+        handleData();
+        updateYSpace();
+      };
+      const computeScrollLoad = () => {
+        return nextTick().then(() => {
+          const { scrollYLoad } = reactData;
+          const { scrollYStore } = internalData;
+          const virtualBodyElem = refVirtualBody.value;
+          const sYOpts = computeSYOpts.value;
+          let rowHeight = 0;
+          let firstRowElem;
+          if (virtualBodyElem) {
+            if (sYOpts.sItem) {
+              firstRowElem = virtualBodyElem.querySelector(sYOpts.sItem);
+            }
+            if (!firstRowElem) {
+              firstRowElem = virtualBodyElem.children[0];
+            }
           }
-          if (!firstRowElem) {
-            firstRowElem = virtualBodyElem.children[0];
+          if (firstRowElem) {
+            rowHeight = firstRowElem.offsetHeight;
+          }
+          rowHeight = Math.max(12, rowHeight);
+          scrollYStore.rowHeight = rowHeight;
+          if (scrollYLoad) {
+            const scrollBodyElem = refVirtualWrapper.value;
+            const visibleYSize = Math.max(8, Math.ceil(scrollBodyElem.clientHeight / rowHeight));
+            const offsetYSize = sYOpts.oSize ? XEUtils.toNumber(sYOpts.oSize) : browseObj.edge ? 10 : 0;
+            scrollYStore.offsetSize = offsetYSize;
+            scrollYStore.visibleSize = visibleYSize;
+            scrollYStore.endIndex = Math.max(scrollYStore.startIndex + visibleYSize + offsetYSize, scrollYStore.endIndex);
+            updateYData();
+          } else {
+            updateYSpace();
           }
+        });
+      };
+      const clearScroll = () => {
+        const scrollBodyElem = refVirtualWrapper.value;
+        if (scrollBodyElem) {
+          scrollBodyElem.scrollTop = 0;
         }
-        if (firstRowElem) {
-          rowHeight = firstRowElem.offsetHeight;
-        }
-        rowHeight = Math.max(12, rowHeight);
-        scrollYStore.rowHeight = rowHeight;
-        if (scrollYLoad) {
-          const scrollBodyElem = refVirtualWrapper.value;
-          const visibleYSize = Math.max(8, Math.ceil(scrollBodyElem.clientHeight / rowHeight));
-          const offsetYSize = sYOpts.oSize ? XEUtils.toNumber(sYOpts.oSize) : browseObj.edge ? 10 : 0;
-          scrollYStore.offsetSize = offsetYSize;
-          scrollYStore.visibleSize = visibleYSize;
-          scrollYStore.endIndex = Math.max(scrollYStore.startIndex + visibleYSize + offsetYSize, scrollYStore.endIndex);
-          updateYData();
-        } else {
-          updateYSpace();
+        return nextTick();
+      };
+      const scrollTo = (scrollLeft, scrollTop) => {
+        const scrollBodyElem = refVirtualWrapper.value;
+        if (scrollLeft) {
+          if (!XEUtils.isNumber(scrollLeft)) {
+            scrollTop = scrollLeft.top;
+            scrollLeft = scrollLeft.left;
+          }
         }
-      });
-    };
-    const clearScroll = () => {
-      const scrollBodyElem = refVirtualWrapper.value;
-      if (scrollBodyElem) {
-        scrollBodyElem.scrollTop = 0;
-      }
-      return nextTick();
-    };
-    const scrollTo = (scrollLeft, scrollTop) => {
-      const scrollBodyElem = refVirtualWrapper.value;
-      if (scrollLeft) {
-        if (!XEUtils.isNumber(scrollLeft)) {
-          scrollTop = scrollLeft.top;
-          scrollLeft = scrollLeft.left;
-        }
-      }
-      if (XEUtils.isNumber(scrollLeft)) {
-        scrollBodyElem.scrollLeft = scrollLeft;
-      }
-      if (XEUtils.isNumber(scrollTop)) {
-        scrollBodyElem.scrollTop = scrollTop;
-      }
-      if (reactData.scrollYLoad) {
-        return new Promise((resolve) => {
-          setTimeout(() => {
-            nextTick(() => {
-              resolve();
-            });
-          }, 50);
-        });
-      }
-      return nextTick();
-    };
-    const refreshScroll = () => {
-      const { lastScrollLeft, lastScrollTop } = internalData;
-      return clearScroll().then(() => {
-        if (lastScrollLeft || lastScrollTop) {
-          internalData.lastScrollLeft = 0;
-          internalData.lastScrollTop = 0;
-          return scrollTo(lastScrollLeft, lastScrollTop);
+        if (XEUtils.isNumber(scrollLeft)) {
+          scrollBodyElem.scrollLeft = scrollLeft;
         }
-      });
-    };
-    const updateScrollbar = () => {
-      const isVScrollbar = computeIsVScrollbar.value;
-      if (isVScrollbar) {
-        return nextTick().then(() => {
-          updateThumbSize();
-          updateThumbOffset();
+        if (XEUtils.isNumber(scrollTop)) {
+          scrollBodyElem.scrollTop = scrollTop;
+        }
+        if (reactData.scrollYLoad) {
+          return new Promise((resolve) => {
+            setTimeout(() => {
+              nextTick(() => {
+                resolve();
+              });
+            }, 50);
+          });
+        }
+        return nextTick();
+      };
+      const refreshScroll = () => {
+        const { lastScrollLeft, lastScrollTop } = internalData;
+        return clearScroll().then(() => {
+          if (lastScrollLeft || lastScrollTop) {
+            internalData.lastScrollLeft = 0;
+            internalData.lastScrollTop = 0;
+            return scrollTo(lastScrollLeft, lastScrollTop);
+          }
         });
-      }
-      return Promise.resolve();
-    };
-    const recalculate = () => {
-      const el = refElem.value;
-      if (el) {
-        let parentEl = el.parentElement;
-        let parentHeight = 0;
-        if (parentEl && hasClass(parentEl, "vxe-scrollbar--view-inner")) {
-          parentEl = parentEl.parentElement;
-        }
-        if (parentEl) {
-          const parentStyle = getComputedStyle(parentEl);
-          parentHeight = parentEl.clientHeight - Math.ceil(XEUtils.toNumber(parentStyle.paddingLeft) + XEUtils.toNumber(parentStyle.paddingRight));
-        }
-        reactData.parentHeight = parentHeight;
-        updateHeight();
-        if (el.clientWidth && el.clientHeight) {
-          return computeScrollLoad().then(() => {
-            updateScrollbar();
+      };
+      const updateScrollbar = () => {
+        const isVScrollbar = computeIsVScrollbar.value;
+        if (isVScrollbar) {
+          return nextTick().then(() => {
+            updateThumbSize();
+            updateThumbOffset();
           });
         }
-      }
-      return nextTick();
-    };
-    const loadYData = (evnt) => {
-      const { scrollYStore } = internalData;
-      const { startIndex, endIndex, visibleSize, offsetSize, rowHeight } = scrollYStore;
-      const scrollBodyElem = evnt.currentTarget;
-      const scrollTop = scrollBodyElem.scrollTop;
-      const toVisibleIndex = Math.floor(scrollTop / rowHeight);
-      const offsetStartIndex = Math.max(0, toVisibleIndex - 1 - offsetSize);
-      const offsetEndIndex = toVisibleIndex + visibleSize + offsetSize;
-      if (toVisibleIndex <= startIndex || toVisibleIndex >= endIndex - visibleSize - 1) {
-        if (startIndex !== offsetStartIndex || endIndex !== offsetEndIndex) {
-          scrollYStore.startIndex = offsetStartIndex;
-          scrollYStore.endIndex = offsetEndIndex;
-          updateYData();
-        }
-      }
-    };
-    const scrollEvent = (evnt) => {
-      const scrollBodyElem = evnt.currentTarget;
-      const scrollTop = scrollBodyElem.scrollTop;
-      const scrollLeft = scrollBodyElem.scrollLeft;
-      const isX = scrollLeft !== internalData.lastScrollLeft;
-      const isY = scrollTop !== internalData.lastScrollTop;
-      const isVScrollbar = computeIsVScrollbar.value;
-      if (isVScrollbar) {
-        updateThumbOffset();
-      }
-      internalData.lastScrollTop = scrollTop;
-      internalData.lastScrollLeft = scrollLeft;
-      if (reactData.scrollYLoad) {
-        loadYData(evnt);
-      }
-      dispatchEvent("scroll", { scrollLeft, scrollTop, isX, isY }, evnt);
-    };
-    const updateRadioModeValue = () => {
-      const { checkRowKey } = props;
-      const { fullKeyMaps } = internalData;
-      if (checkRowKey) {
-        const row = fullKeyMaps[checkRowKey];
-        reactData.selectRadioRow = row || null;
-      } else {
-        reactData.selectRadioRow = null;
-      }
-    };
-    const updateCheckboxModeValue = () => {
-      const { checkRowKeys } = props;
-      const { fullKeyMaps } = internalData;
-      const keyField = computeKeyField.value;
-      const selectMaps = {};
-      if (checkRowKeys && checkRowKeys.length) {
-        for (const rowKey of checkRowKeys) {
-          const row = fullKeyMaps[rowKey];
-          if (row) {
-            const rowid = getRowIdByField(row, keyField);
-            selectMaps[rowid] = row;
+        return Promise.resolve();
+      };
+      const recalculate = () => {
+        const el = refElem.value;
+        if (el) {
+          let parentEl = el.parentElement;
+          let parentHeight = 0;
+          if (parentEl && hasClass(parentEl, "vxe-scrollbar--view-inner")) {
+            parentEl = parentEl.parentElement;
+          }
+          if (parentEl) {
+            const parentStyle = getComputedStyle(parentEl);
+            parentHeight = parentEl.clientHeight - Math.ceil(XEUtils.toNumber(parentStyle.paddingLeft) + XEUtils.toNumber(parentStyle.paddingRight));
+          }
+          reactData.parentHeight = parentHeight;
+          updateHeight();
+          if (el.clientWidth && el.clientHeight) {
+            return computeScrollLoad().then(() => {
+              updateScrollbar();
+            });
           }
         }
-      }
-      internalData.selectCheckboxMaps = selectMaps;
-      updateCheckboxStatus();
-    };
-    const updateAfterDataIndex = () => {
-      const { afterList, rowMaps } = internalData;
-      const keyField = computeKeyField.value;
-      let vtIndex = 0;
-      afterList.forEach((item, index) => {
-        const roweid = getRowIdByField(item, keyField);
-        const rowRest = rowMaps[roweid];
-        if (rowRest) {
-          rowRest._index = vtIndex;
+        return nextTick();
+      };
+      const loadYData = (evnt) => {
+        const { scrollYStore } = internalData;
+        const { startIndex, endIndex, visibleSize, offsetSize, rowHeight } = scrollYStore;
+        const scrollBodyElem = evnt.currentTarget;
+        const scrollTop = scrollBodyElem.scrollTop;
+        const toVisibleIndex = Math.floor(scrollTop / rowHeight);
+        const offsetStartIndex = Math.max(0, toVisibleIndex - 1 - offsetSize);
+        const offsetEndIndex = toVisibleIndex + visibleSize + offsetSize;
+        if (toVisibleIndex <= startIndex || toVisibleIndex >= endIndex - visibleSize - 1) {
+          if (startIndex !== offsetStartIndex || endIndex !== offsetEndIndex) {
+            scrollYStore.startIndex = offsetStartIndex;
+            scrollYStore.endIndex = offsetEndIndex;
+            updateYData();
+          }
+        }
+      };
+      const scrollEvent = (evnt) => {
+        const scrollBodyElem = evnt.currentTarget;
+        const scrollTop = scrollBodyElem.scrollTop;
+        const scrollLeft = scrollBodyElem.scrollLeft;
+        const isX = scrollLeft !== internalData.lastScrollLeft;
+        const isY = scrollTop !== internalData.lastScrollTop;
+        const isVScrollbar = computeIsVScrollbar.value;
+        if (isVScrollbar) {
+          updateThumbOffset();
+        }
+        internalData.lastScrollTop = scrollTop;
+        internalData.lastScrollLeft = scrollLeft;
+        if (reactData.scrollYLoad) {
+          loadYData(evnt);
+        }
+        dispatchEvent("scroll", { scrollLeft, scrollTop, isX, isY }, evnt);
+      };
+      const updateRadioModeValue = () => {
+        const { checkRowKey } = props;
+        const { fullKeyMaps } = internalData;
+        if (checkRowKey) {
+          const row = fullKeyMaps[checkRowKey];
+          reactData.selectRadioRow = row || null;
         } else {
-          const rest = {
-            item,
-            index,
-            $index: -1,
-            _index: vtIndex
-          };
-          rowMaps[roweid] = rest;
+          reactData.selectRadioRow = null;
         }
-        vtIndex++;
-      });
-    };
-    const cacheRowMap = () => {
-      const { fullData } = internalData;
-      const keyField = computeKeyField.value;
-      const keyMaps = {};
-      const rowMaps = {};
-      if (keyField) {
-        fullData.forEach((row, rowIndex) => {
-          const rowid = getRowIdByField(row, keyField);
-          const rowKey = getRowKeyByField(row, keyField);
-          keyMaps[rowKey] = row;
-          rowMaps[rowid] = {
-            item: row,
-            index: rowIndex,
-            $index: -1,
-            _index: -1
-          };
+      };
+      const updateCheckboxModeValue = () => {
+        const { checkRowKeys } = props;
+        const { fullKeyMaps } = internalData;
+        const keyField = computeKeyField.value;
+        const selectMaps = {};
+        if (checkRowKeys && checkRowKeys.length) {
+          for (const rowKey of checkRowKeys) {
+            const row = fullKeyMaps[rowKey];
+            if (row) {
+              const rowid = getRowIdByField(row, keyField);
+              selectMaps[rowid] = row;
+            }
+          }
+        }
+        internalData.selectCheckboxMaps = selectMaps;
+        updateCheckboxStatus();
+      };
+      const updateAfterDataIndex = () => {
+        const { afterList, rowMaps } = internalData;
+        const keyField = computeKeyField.value;
+        let vtIndex = 0;
+        afterList.forEach((item, index) => {
+          const roweid = getRowIdByField(item, keyField);
+          const rowRest = rowMaps[roweid];
+          if (rowRest) {
+            rowRest._index = vtIndex;
+          } else {
+            const rest = {
+              item,
+              index,
+              $index: -1,
+              _index: vtIndex
+            };
+            rowMaps[roweid] = rest;
+          }
+          vtIndex++;
         });
-      }
-      internalData.fullKeyMaps = keyMaps;
-      internalData.rowMaps = rowMaps;
-    };
-    const loadData = (datas) => {
-      const { scrollYStore } = internalData;
-      const sYOpts = computeSYOpts.value;
-      const fullData = datas ? datas.slice(0) : [];
-      Object.assign(scrollYStore, {
-        startIndex: 0,
-        endIndex: 1,
-        visibleSize: 0
-      });
-      internalData.fullData = fullData;
-      internalData.insertRowMaps = {};
-      reactData.insertRowFlag++;
-      internalData.removeRowMaps = {};
-      reactData.removeRowFlag++;
-      reactData.scrollYLoad = !!sYOpts.enabled && sYOpts.gt > -1 && (sYOpts.gt === 0 || sYOpts.gt <= fullData.length);
-      cacheRowMap();
-      handleData(true);
-      updateRadioModeValue();
-      updateCheckboxModeValue();
-      return computeScrollLoad().then(() => {
-        refreshScroll();
-      });
-    };
-    const handleRowDragEndClearStatus = () => {
-      clearRowDragData();
-      clearCrossListDragStatus();
-      recalculate();
-    };
-    const clearRowDropOrigin = () => {
-      const el = refElem.value;
-      if (el) {
-        const clss = "row--drag-origin";
-        XEUtils.arrayEach(el.querySelectorAll(`.${clss}`), (elem) => {
-          ;
-          elem.draggable = false;
-          removeClass(elem, clss);
+      };
+      const cacheRowMap = () => {
+        const { fullData } = internalData;
+        const keyField = computeKeyField.value;
+        const keyMaps = {};
+        const rowMaps = {};
+        if (keyField) {
+          fullData.forEach((row, rowIndex) => {
+            const rowid = getRowIdByField(row, keyField);
+            const rowKey = getRowKeyByField(row, keyField);
+            keyMaps[rowKey] = row;
+            rowMaps[rowid] = {
+              item: row,
+              index: rowIndex,
+              $index: -1,
+              _index: -1
+            };
+          });
+        }
+        internalData.fullKeyMaps = keyMaps;
+        internalData.rowMaps = rowMaps;
+      };
+      const loadData = (datas) => {
+        const { scrollYStore } = internalData;
+        const sYOpts = computeSYOpts.value;
+        const fullData = datas ? datas.slice(0) : [];
+        Object.assign(scrollYStore, {
+          startIndex: 0,
+          endIndex: 1,
+          visibleSize: 0
         });
-      }
-    };
-    const updateRowDropOrigin = (row) => {
-      const sYOpts = computeSYOpts.value;
-      const { sItem } = sYOpts;
-      const el = refElem.value;
-      if (el) {
-        const clss = "row--drag-origin";
-        const rowid = getRowId(row);
-        XEUtils.arrayEach(el.querySelectorAll(`.vxe-list--row[rowid="${rowid}"]` + (sItem ? `${sItem}[rowid="${rowid}"]` : "")), (elem) => {
-          addClass(elem, clss);
+        internalData.fullData = fullData;
+        internalData.insertRowMaps = {};
+        reactData.insertRowFlag++;
+        internalData.removeRowMaps = {};
+        reactData.removeRowFlag++;
+        reactData.scrollYLoad = !!sYOpts.enabled && sYOpts.gt > -1 && (sYOpts.gt === 0 || sYOpts.gt <= fullData.length);
+        cacheRowMap();
+        handleData(true);
+        updateRadioModeValue();
+        updateCheckboxModeValue();
+        return computeScrollLoad().then(() => {
+          refreshScroll();
         });
-      }
-    };
-    const updateRowDropTipContent = (rowEl) => {
-      const { dragRow } = reactData;
-      const dragOpts = computeDragOpts.value;
-      const { tooltipMethod } = dragOpts;
-      const rTooltipMethod = tooltipMethod;
-      let tipContent = "";
-      if (rTooltipMethod) {
-        const rtParams = {
-          $list: $xeList,
-          row: dragRow
-        };
-        tipContent = `${rTooltipMethod(rtParams) || ""}`;
-      } else {
-        tipContent = getI18n("vxe.list.dragTip", [rowEl.textContent || ""]);
-      }
-      reactData.dragTipText = tipContent;
-    };
-    const hideDropTip = () => {
-      const rdTipEl = refDragTipElem.value;
-      const rdLineEl = refDragRowLineElem.value;
-      if (rdTipEl) {
-        rdTipEl.style.display = "";
-      }
-      if (rdLineEl) {
-        rdLineEl.style.display = "";
-      }
-    };
-    const clearCrossListDragStatus = () => {
-      crossListDragRowObj = null;
-      crossListDragRowInfo.row = null;
-    };
-    const clearDragStatus = () => {
-      const { dragRow } = reactData;
-      if (dragRow) {
-        hideDropTip();
-        clearRowDropOrigin();
+      };
+      const handleRowDragEndClearStatus = () => {
+        clearRowDragData();
         clearCrossListDragStatus();
-        reactData.dragRow = null;
-      }
-    };
-    const handleRowDragMousedownEvent = (evnt, params) => {
-      evnt.stopPropagation();
-      const { row } = params;
-      const dragConfig = computeDragOpts.value;
-      const { isCrossListDrag, trigger, dragStartMethod } = dragConfig;
-      const dragEl = evnt.currentTarget;
-      const rowEl = trigger === "row" ? dragEl : dragEl.parentElement.parentElement;
-      clearRowDropOrigin();
-      if (dragStartMethod && !dragStartMethod(params)) {
-        rowEl.draggable = false;
-        reactData.dragRow = null;
-        hideDropTip();
-        return;
-      }
-      if (isCrossListDrag) {
-        crossListDragRowInfo.row = row;
-        crossListDragRowObj = { $oldList: $xeList, $newList: null };
-      }
-      const dragstartEventParams = {
-        row
-      };
-      reactData.dragRow = row;
-      reactData.isCrossDragRow = false;
-      rowEl.draggable = true;
-      updateRowDropOrigin(row);
-      updateRowDropTipContent(rowEl);
-      dispatchEvent("row-dragstart", dragstartEventParams, evnt);
-    };
-    const handleRowDragMouseupEvent = () => {
-      clearDragStatus();
-    };
-    const showDropTip = (evnt, rowEl, showLine, dragPos) => {
-      const wrapperEl = refElem.value;
-      if (!wrapperEl) {
-        return;
-      }
-      const wrapperRect = wrapperEl.getBoundingClientRect();
-      const wrapperHeight = wrapperEl.clientHeight;
-      if (rowEl) {
+        recalculate();
+      };
+      const clearRowDropOrigin = () => {
+        const el = refElem.value;
+        if (el) {
+          const clss = "row--drag-origin";
+          XEUtils.arrayEach(el.querySelectorAll(`.${clss}`), (elem) => {
+            ;
+            elem.draggable = false;
+            removeClass(elem, clss);
+          });
+        }
+      };
+      const updateRowDropOrigin = (row) => {
+        const sYOpts = computeSYOpts.value;
+        const { sItem } = sYOpts;
+        const el = refElem.value;
+        if (el) {
+          const clss = "row--drag-origin";
+          const rowid = getRowId(row);
+          XEUtils.arrayEach(el.querySelectorAll(`.vxe-list--row[rowid="${rowid}"]` + (sItem ? `${sItem}[rowid="${rowid}"]` : "")), (elem) => {
+            addClass(elem, clss);
+          });
+        }
+      };
+      const updateRowDropTipContent = (rowEl) => {
+        const { dragRow } = reactData;
+        const dragOpts = computeDragOpts.value;
+        const { tooltipMethod } = dragOpts;
+        const rTooltipMethod = tooltipMethod;
+        let tipContent = "";
+        if (rTooltipMethod) {
+          const rtParams = {
+            $list: $xeList,
+            row: dragRow
+          };
+          tipContent = `${rTooltipMethod(rtParams) || ""}`;
+        } else {
+          tipContent = getI18n("vxe.list.dragTip", [rowEl.textContent || ""]);
+        }
+        reactData.dragTipText = tipContent;
+      };
+      const hideDropTip = () => {
+        const rdTipEl = refDragTipElem.value;
         const rdLineEl = refDragRowLineElem.value;
+        if (rdTipEl) {
+          rdTipEl.style.display = "";
+        }
         if (rdLineEl) {
-          if (showLine) {
-            const trRect = rowEl.getBoundingClientRect();
-            let rowHeight = rowEl.clientHeight;
-            const offsetTop = Math.max(1, trRect.y - wrapperRect.y);
-            if (offsetTop + rowHeight > wrapperHeight) {
-              rowHeight = wrapperHeight - offsetTop;
+          rdLineEl.style.display = "";
+        }
+      };
+      const clearCrossListDragStatus = () => {
+        crossListDragRowObj = null;
+        crossListDragRowInfo.row = null;
+      };
+      const clearDragStatus = () => {
+        const { dragRow } = reactData;
+        if (dragRow) {
+          hideDropTip();
+          clearRowDropOrigin();
+          clearCrossListDragStatus();
+          reactData.dragRow = null;
+        }
+      };
+      const handleRowDragMousedownEvent = (evnt, params) => {
+        evnt.stopPropagation();
+        const { row } = params;
+        const dragConfig = computeDragOpts.value;
+        const { isCrossListDrag, trigger, dragStartMethod } = dragConfig;
+        const dragEl = evnt.currentTarget;
+        const rowEl = trigger === "row" ? dragEl : dragEl.parentElement.parentElement;
+        clearRowDropOrigin();
+        if (dragStartMethod && !dragStartMethod(params)) {
+          rowEl.draggable = false;
+          reactData.dragRow = null;
+          hideDropTip();
+          return;
+        }
+        if (isCrossListDrag) {
+          crossListDragRowInfo.row = row;
+          crossListDragRowObj = { $oldList: $xeList, $newList: null };
+        }
+        const dragstartEventParams = {
+          row
+        };
+        reactData.dragRow = row;
+        reactData.isCrossDragRow = false;
+        rowEl.draggable = true;
+        updateRowDropOrigin(row);
+        updateRowDropTipContent(rowEl);
+        dispatchEvent("row-dragstart", dragstartEventParams, evnt);
+      };
+      const handleRowDragMouseupEvent = () => {
+        clearDragStatus();
+      };
+      const showDropTip = (evnt, rowEl, showLine, dragPos) => {
+        const wrapperEl = refElem.value;
+        if (!wrapperEl) {
+          return;
+        }
+        const wrapperRect = wrapperEl.getBoundingClientRect();
+        const wrapperHeight = wrapperEl.clientHeight;
+        if (rowEl) {
+          const rdLineEl = refDragRowLineElem.value;
+          if (rdLineEl) {
+            if (showLine) {
+              const trRect = rowEl.getBoundingClientRect();
+              let rowHeight = rowEl.clientHeight;
+              const offsetTop = Math.max(1, trRect.y - wrapperRect.y);
+              if (offsetTop + rowHeight > wrapperHeight) {
+                rowHeight = wrapperHeight - offsetTop;
+              }
+              rdLineEl.style.display = "block";
+              rdLineEl.style.top = `${offsetTop}px`;
+              rdLineEl.style.height = `${rowHeight}px`;
+              rdLineEl.setAttribute("drag-pos", dragPos);
+            } else {
+              rdLineEl.style.display = "";
             }
-            rdLineEl.style.display = "block";
-            rdLineEl.style.top = `${offsetTop}px`;
-            rdLineEl.style.height = `${rowHeight}px`;
-            rdLineEl.setAttribute("drag-pos", dragPos);
-          } else {
-            rdLineEl.style.display = "";
           }
         }
-      }
-      const rdTipEl = refDragTipElem.value;
-      if (rdTipEl) {
-        rdTipEl.style.display = "block";
-        rdTipEl.style.top = `${Math.min(wrapperEl.clientHeight - wrapperEl.scrollTop - rdTipEl.clientHeight, evnt.clientY - wrapperRect.y)}px`;
-        rdTipEl.style.left = `${Math.min(wrapperEl.clientWidth - wrapperEl.scrollLeft - rdTipEl.clientWidth - 1, evnt.clientX - wrapperRect.x)}px`;
-        rdTipEl.setAttribute("drag-status", showLine ? "normal" : "disabled");
-      }
-    };
-    const clearRowDragData = () => {
-      const wrapperEl = refElem.value;
-      const dtClss = [".vxe-list--row"];
-      hideDropTip();
-      clearRowDropOrigin();
-      clearRowAnimate(wrapperEl, dtClss);
-      reactData.dragRow = null;
-    };
-    const handleRowDragSwapEvent = (evnt, dragRow, prevDragRow, prevDragPos) => {
-      const { fullData } = internalData;
-      const dragConfig = computeDragOpts.value;
-      const { animation, dragEndMethod } = dragConfig;
-      const dEndMethod = dragEndMethod || (dragConfig ? dragConfig.dragEndMethod : null);
-      const dragOffsetIndex = prevDragPos === "bottom" ? 1 : 0;
-      const el = refElem.value;
-      const errRest = {
-        status: false
-      };
-      if (!(el && prevDragRow && dragRow)) {
-        return Promise.resolve(errRest);
-      }
-      if (prevDragRow !== dragRow) {
-        const dragParams = {
-          oldRow: dragRow,
-          newRow: prevDragRow,
-          dragRow,
-          dragPos: prevDragPos,
-          offsetIndex: dragOffsetIndex
+        const rdTipEl = refDragTipElem.value;
+        if (rdTipEl) {
+          rdTipEl.style.display = "block";
+          rdTipEl.style.top = `${Math.min(wrapperEl.clientHeight - wrapperEl.scrollTop - rdTipEl.clientHeight, evnt.clientY - wrapperRect.y)}px`;
+          rdTipEl.style.left = `${Math.min(wrapperEl.clientWidth - wrapperEl.scrollLeft - rdTipEl.clientWidth - 1, evnt.clientX - wrapperRect.x)}px`;
+          rdTipEl.setAttribute("drag-status", showLine ? "normal" : "disabled");
+        }
+      };
+      const clearRowDragData = () => {
+        const wrapperEl = refElem.value;
+        const dtClss = [".vxe-list--row"];
+        hideDropTip();
+        clearRowDropOrigin();
+        clearRowAnimate(wrapperEl, dtClss);
+        reactData.dragRow = null;
+      };
+      const handleRowDragSwapEvent = (evnt, dragRow, prevDragRow, prevDragPos) => {
+        const { fullData } = internalData;
+        const dragConfig = computeDragOpts.value;
+        const { animation, dragEndMethod } = dragConfig;
+        const dEndMethod = dragEndMethod || (dragConfig ? dragConfig.dragEndMethod : null);
+        const dragOffsetIndex = prevDragPos === "bottom" ? 1 : 0;
+        const el = refElem.value;
+        const errRest = {
+          status: false
         };
-        const dragRowid = getRowId(dragRow);
-        const _dragRowIndex = findRowIndexOfByKey(fullData, dragRowid);
-        const newRowid = getRowKey(prevDragRow);
-        let dragRowHeight = 0;
-        let dragOffsetTop = -1;
-        if (animation) {
-          const prevRowEl = el.querySelector(`.vxe-list--row[rowid="${newRowid}"]`);
-          const oldRowEl = el.querySelector(`.vxe-list--row[rowid="${dragRowid}"]`);
-          const targetRowEl = prevRowEl || oldRowEl;
-          if (targetRowEl) {
-            dragRowHeight = targetRowEl.offsetHeight;
-          }
-          if (oldRowEl) {
-            dragOffsetTop = oldRowEl.offsetTop;
-          }
+        if (!(el && prevDragRow && dragRow)) {
+          return Promise.resolve(errRest);
         }
-        let oafIndex = -1;
-        let nafIndex = -1;
-        return Promise.resolve(dEndMethod ? dEndMethod(dragParams) : true).then((status) => {
-          if (!status) {
-            return errRest;
-          }
-          oafIndex = findRowIndexOf(fullData, dragRow);
-          fullData.splice(oafIndex, 1);
-          const pafIndex = findRowIndexOf(fullData, prevDragRow);
-          nafIndex = pafIndex + dragOffsetIndex;
-          fullData.splice(nafIndex, 0, dragRow);
-          handleData();
-          if (reactData.scrollYLoad) {
-            updateYSpace();
-          }
-          if (evnt) {
-            const dragendEventParams = {
-              oldRow: dragRow,
-              newRow: prevDragRow,
-              dragRow,
-              dragPos: prevDragPos,
-              offsetIndex: dragOffsetIndex,
-              _index: {
-                newIndex: nafIndex,
-                oldIndex: oafIndex
-              }
-            };
-            dispatchEvent("row-dragend", dragendEventParams, evnt);
+        if (prevDragRow !== dragRow) {
+          const dragParams = {
+            oldRow: dragRow,
+            newRow: prevDragRow,
+            dragRow,
+            dragPos: prevDragPos,
+            offsetIndex: dragOffsetIndex
+          };
+          const dragRowid = getRowId(dragRow);
+          const _dragRowIndex = findRowIndexOfByKey(fullData, dragRowid);
+          const newRowid = getRowKey(prevDragRow);
+          let dragRowHeight = 0;
+          let dragOffsetTop = -1;
+          if (animation) {
+            const prevRowEl = el.querySelector(`.vxe-list--row[rowid="${newRowid}"]`);
+            const oldRowEl = el.querySelector(`.vxe-list--row[rowid="${dragRowid}"]`);
+            const targetRowEl = prevRowEl || oldRowEl;
+            if (targetRowEl) {
+              dragRowHeight = targetRowEl.offsetHeight;
+            }
+            if (oldRowEl) {
+              dragOffsetTop = oldRowEl.offsetTop;
+            }
           }
-          return nextTick().then(() => {
-            if (animation) {
-              const { rowList } = reactData;
-              const { fullData: fullData2 } = internalData;
-              const _newRowIndex = findRowIndexOfByKey(fullData2, dragRowid);
-              const firstRow = fullData2[0];
-              const _firstRowIndex = findRowIndexOf(fullData2, firstRow);
-              const wrapperEl = el;
-              if (_firstRowIndex > -1) {
-                const _lastRowIndex = _firstRowIndex + fullData2.length;
-                let rsIndex = -1;
-                let reIndex = -1;
-                let offsetRate = 1;
-                if (_dragRowIndex < _firstRowIndex) {
-                  rsIndex = 0;
-                  reIndex = _newRowIndex - _firstRowIndex;
-                } else if (_dragRowIndex > _lastRowIndex) {
-                  const $newRowIndex = findRowIndexOfByKey(rowList, dragRowid);
-                  rsIndex = $newRowIndex + 1;
-                  reIndex = fullData2.length;
-                  offsetRate = -1;
-                } else {
-                  if (_newRowIndex > _dragRowIndex) {
-                    rsIndex = _dragRowIndex - _firstRowIndex;
-                    reIndex = rsIndex + _newRowIndex - _dragRowIndex;
-                  } else {
-                    rsIndex = _newRowIndex - _firstRowIndex;
-                    reIndex = rsIndex + _dragRowIndex - _newRowIndex + 1;
+          let oafIndex = -1;
+          let nafIndex = -1;
+          return Promise.resolve(dEndMethod ? dEndMethod(dragParams) : true).then((status) => {
+            if (!status) {
+              return errRest;
+            }
+            oafIndex = findRowIndexOf(fullData, dragRow);
+            fullData.splice(oafIndex, 1);
+            const pafIndex = findRowIndexOf(fullData, prevDragRow);
+            nafIndex = pafIndex + dragOffsetIndex;
+            fullData.splice(nafIndex, 0, dragRow);
+            handleData();
+            if (reactData.scrollYLoad) {
+              updateYSpace();
+            }
+            if (evnt) {
+              const dragendEventParams = {
+                oldRow: dragRow,
+                newRow: prevDragRow,
+                dragRow,
+                dragPos: prevDragPos,
+                offsetIndex: dragOffsetIndex,
+                _index: {
+                  newIndex: nafIndex,
+                  oldIndex: oafIndex
+                }
+              };
+              dispatchEvent("row-dragend", dragendEventParams, evnt);
+            }
+            return nextTick().then(() => {
+              if (animation) {
+                const { rowList } = reactData;
+                const { fullData: fullData2 } = internalData;
+                const _newRowIndex = findRowIndexOfByKey(fullData2, dragRowid);
+                const firstRow = fullData2[0];
+                const _firstRowIndex = findRowIndexOf(fullData2, firstRow);
+                const wrapperEl = el;
+                if (_firstRowIndex > -1) {
+                  const _lastRowIndex = _firstRowIndex + fullData2.length;
+                  let rsIndex = -1;
+                  let reIndex = -1;
+                  let offsetRate = 1;
+                  if (_dragRowIndex < _firstRowIndex) {
+                    rsIndex = 0;
+                    reIndex = _newRowIndex - _firstRowIndex;
+                  } else if (_dragRowIndex > _lastRowIndex) {
+                    const $newRowIndex = findRowIndexOfByKey(rowList, dragRowid);
+                    rsIndex = $newRowIndex + 1;
+                    reIndex = fullData2.length;
                     offsetRate = -1;
+                  } else {
+                    if (_newRowIndex > _dragRowIndex) {
+                      rsIndex = _dragRowIndex - _firstRowIndex;
+                      reIndex = rsIndex + _newRowIndex - _dragRowIndex;
+                    } else {
+                      rsIndex = _newRowIndex - _firstRowIndex;
+                      reIndex = rsIndex + _dragRowIndex - _newRowIndex + 1;
+                      offsetRate = -1;
+                    }
+                  }
+                  const dragRangeList = fullData2.slice(rsIndex, reIndex);
+                  if (dragRangeList.length) {
+                    const dtClss = [];
+                    dragRangeList.forEach((obj) => {
+                      const rowid = getRowId(obj);
+                      dtClss.push(`.vxe-list--row[rowid="${rowid}"]`);
+                    });
+                    const dtTrList = wrapperEl.querySelectorAll(dtClss.join(","));
+                    moveRowAnimateToTb(dtTrList, offsetRate * dragRowHeight);
                   }
                 }
-                const dragRangeList = fullData2.slice(rsIndex, reIndex);
-                if (dragRangeList.length) {
-                  const dtClss = [];
-                  dragRangeList.forEach((obj) => {
-                    const rowid = getRowId(obj);
-                    dtClss.push(`.vxe-list--row[rowid="${rowid}"]`);
-                  });
-                  const dtTrList = wrapperEl.querySelectorAll(dtClss.join(","));
-                  moveRowAnimateToTb(dtTrList, offsetRate * dragRowHeight);
+                const drClss = [`.vxe-list--row[rowid="${dragRowid}"]`];
+                const newDtTrList = wrapperEl.querySelectorAll(drClss.join(","));
+                const newTrEl = newDtTrList[0];
+                if (dragOffsetTop > -1 && newTrEl) {
+                  moveRowAnimateToTb(newDtTrList, dragOffsetTop - newTrEl.offsetTop);
                 }
               }
-              const drClss = [`.vxe-list--row[rowid="${dragRowid}"]`];
-              const newDtTrList = wrapperEl.querySelectorAll(drClss.join(","));
-              const newTrEl = newDtTrList[0];
-              if (dragOffsetTop > -1 && newTrEl) {
-                moveRowAnimateToTb(newDtTrList, dragOffsetTop - newTrEl.offsetTop);
-              }
-            }
-            recalculate();
-          }).then(() => {
-            return {
-              status: true
-            };
+              recalculate();
+            }).then(() => {
+              return {
+                status: true
+              };
+            });
+          }).catch(() => {
+            return errRest;
+          }).then((rest) => {
+            clearRowDragData();
+            clearCrossListDragStatus();
+            return rest;
           });
-        }).catch(() => {
-          return errRest;
-        }).then((rest) => {
-          clearRowDragData();
-          clearCrossListDragStatus();
-          return rest;
-        });
-      }
-      clearRowDragData();
-      clearCrossListDragStatus();
-      return Promise.resolve(errRest);
-    };
-    const handleRowDragDragstartEvent = (evnt) => {
-      if (evnt.dataTransfer) {
-        evnt.dataTransfer.setDragImage(getTpImg(), 0, 0);
-      }
-    };
-    const handleRowDragDragendEvent = (evnt) => {
-      const { dragRow } = reactData;
-      const { prevDragRow, prevDragPos } = internalData;
-      const dragConfig = computeDragOpts.value;
-      const { isCrossListDrag } = dragConfig;
-      if (isCrossListDrag && crossListDragRowObj) {
-        const { $newList } = crossListDragRowObj;
-        if ($newList && $newList.xID !== $xeList.xID) {
-          $newList.handleCrossListRowDragInsertEvent(evnt);
-          return;
         }
-      }
-      handleRowDragSwapEvent(evnt, dragRow, prevDragRow, prevDragPos);
-    };
-    const handleRowDragDragoverEvent = (evnt) => {
-      const { dragRow } = reactData;
-      const { fullData } = internalData;
-      const dragConfig = computeDragOpts.value;
-      const { isCrossListDrag } = dragConfig;
-      if (!dragRow) {
-        evnt.preventDefault();
-      }
-      const rowEl = evnt.currentTarget;
-      const rowid = rowEl.getAttribute("rowid") || "";
-      const row = findRowByKey(fullData, rowid);
-      if (row) {
-        evnt.preventDefault();
-        const offsetY = evnt.clientY - rowEl.getBoundingClientRect().y;
-        const dragPos = offsetY < rowEl.clientHeight / 2 ? "top" : "bottom";
-        internalData.prevDragRow = row;
-        internalData.prevDragPos = dragPos;
+        clearRowDragData();
+        clearCrossListDragStatus();
+        return Promise.resolve(errRest);
+      };
+      const handleRowDragDragstartEvent = (evnt) => {
+        if (evnt.dataTransfer) {
+          evnt.dataTransfer.setDragImage(getTpImg(), 0, 0);
+        }
+      };
+      const handleRowDragDragendEvent = (evnt) => {
+        const { dragRow } = reactData;
+        const { prevDragRow, prevDragPos } = internalData;
+        const dragConfig = computeDragOpts.value;
+        const { isCrossListDrag } = dragConfig;
         if (isCrossListDrag && crossListDragRowObj) {
-          const { $oldList, $newList } = crossListDragRowObj;
-          if ($oldList) {
-            const oldListReactData = $oldList.reactData;
-            if ($oldList.xID === $xeList.xID) {
-              if ($newList) {
-                $newList.hideCrossListRowDropClearStatus();
-              }
-              reactData.isCrossDragRow = false;
-              oldListReactData.isCrossDragRow = false;
-              crossListDragRowObj.$newList = null;
-            } else {
-              if ($newList && $newList.xID !== $xeList.xID) {
-                $newList.hideCrossListRowDropClearStatus();
+          const { $newList } = crossListDragRowObj;
+          if ($newList && $newList.xID !== $xeList.xID) {
+            $newList.handleCrossListRowDragInsertEvent(evnt);
+            return;
+          }
+        }
+        handleRowDragSwapEvent(evnt, dragRow, prevDragRow, prevDragPos);
+      };
+      const handleRowDragDragoverEvent = (evnt) => {
+        const { dragRow } = reactData;
+        const { fullData } = internalData;
+        const dragConfig = computeDragOpts.value;
+        const { isCrossListDrag } = dragConfig;
+        if (!dragRow) {
+          evnt.preventDefault();
+        }
+        const rowEl = evnt.currentTarget;
+        const rowid = rowEl.getAttribute("rowid") || "";
+        const row = findRowByKey(fullData, rowid);
+        if (row) {
+          evnt.preventDefault();
+          const offsetY = evnt.clientY - rowEl.getBoundingClientRect().y;
+          const dragPos = offsetY < rowEl.clientHeight / 2 ? "top" : "bottom";
+          internalData.prevDragRow = row;
+          internalData.prevDragPos = dragPos;
+          if (isCrossListDrag && crossListDragRowObj) {
+            const { $oldList, $newList } = crossListDragRowObj;
+            if ($oldList) {
+              const oldListReactData = $oldList.reactData;
+              if ($oldList.xID === $xeList.xID) {
+                if ($newList) {
+                  $newList.hideCrossListRowDropClearStatus();
+                }
+                reactData.isCrossDragRow = false;
+                oldListReactData.isCrossDragRow = false;
+                crossListDragRowObj.$newList = null;
+              } else {
+                if ($newList && $newList.xID !== $xeList.xID) {
+                  $newList.hideCrossListRowDropClearStatus();
+                }
+                $oldList.hideCrossListRowDropClearStatus();
+                oldListReactData.isCrossDragRow = true;
+                reactData.dragTipText = oldListReactData.dragTipText;
+                crossListDragRowObj.$newList = $xeList;
+                showDropTip(evnt, rowEl, true, dragPos);
+                return;
               }
-              $oldList.hideCrossListRowDropClearStatus();
-              oldListReactData.isCrossDragRow = true;
-              reactData.dragTipText = oldListReactData.dragTipText;
-              crossListDragRowObj.$newList = $xeList;
-              showDropTip(evnt, rowEl, true, dragPos);
-              return;
             }
           }
+          if (dragRow && getRowId(dragRow) === rowid) {
+            showDropTip(evnt, rowEl, false, dragPos);
+            return;
+          }
+          const dragOffsetIndex = dragPos === "bottom" ? 1 : 0;
+          const offsetIndex = dragOffsetIndex;
+          const dragoverEventParams = {
+            oldRow: dragRow,
+            targetRow: row,
+            dragPos,
+            dragRow,
+            offsetIndex
+          };
+          showDropTip(evnt, rowEl, true, dragPos);
+          dispatchEvent("row-dragover", dragoverEventParams, evnt);
         }
-        if (dragRow && getRowId(dragRow) === rowid) {
-          showDropTip(evnt, rowEl, false, dragPos);
-          return;
+      };
+      const handleRowMousedownEvent = (evnt, row) => {
+        const dragConfig = computeDragOpts.value;
+        const isDrag = computeIsDrag.value;
+        const { trigger, disabledMethod } = dragConfig;
+        let isRowDrag = false;
+        if (isDrag) {
+          isRowDrag = trigger === "row";
         }
-        const dragOffsetIndex = dragPos === "bottom" ? 1 : 0;
-        const offsetIndex = dragOffsetIndex;
-        const dragoverEventParams = {
-          oldRow: dragRow,
-          targetRow: row,
-          dragPos,
-          dragRow,
-          offsetIndex
-        };
-        showDropTip(evnt, rowEl, true, dragPos);
-        dispatchEvent("row-dragover", dragoverEventParams, evnt);
-      }
-    };
-    const handleRowMousedownEvent = (evnt, row) => {
-      const dragConfig = computeDragOpts.value;
-      const isDrag = computeIsDrag.value;
-      const { trigger, disabledMethod } = dragConfig;
-      let isRowDrag = false;
-      if (isDrag) {
-        isRowDrag = trigger === "row";
-      }
-      const params = { row, $list: $xeList };
-      if (isRowDrag && !(disabledMethod && disabledMethod(params))) {
-        handleRowDragMousedownEvent(evnt, params);
-      }
-    };
-    const handleRowClickEvent = (evnt, row) => {
-      const { showRadio, showCheckbox } = props;
-      const { currentRow } = internalData;
-      const radioOpts = computeRadioOpts.value;
-      const checkboxOpts = computeCheckboxOpts.value;
-      const rowOpts = computeRowOpts.value;
-      const { isCurrent } = rowOpts;
-      let triggerCurrent = false;
-      let triggerRadio = false;
-      let triggerCheckbox = false;
-      if (isCurrent) {
-        triggerCurrent = true;
-        changeCurrentEvent(evnt, row);
-      } else if (currentRow) {
-        internalData.currentRow = null;
-        reactData.currRowFlag++;
-      }
-      if (showRadio && radioOpts.trigger === "row") {
-        triggerRadio = true;
-        changeRadioEvent(evnt, row);
-      }
-      if (showCheckbox && checkboxOpts.trigger === "row") {
-        triggerCheckbox = true;
-        changeCheckboxEvent(evnt, row);
-      }
-      dispatchEvent("row-click", { row, triggerCurrent, triggerRadio, triggerCheckbox }, evnt);
-    };
-    const handleRowDblclickEvent = (evnt, row) => {
-      dispatchEvent("row-dblclick", { row }, evnt);
-    };
-    const getRowKey = (row) => {
-      const keyField = computeKeyField.value;
-      return getRowKeyByField(row, keyField);
-    };
-    const eqRowKey = (rowKey1, rowKey2) => {
-      return "" + rowKey1 === "" + rowKey2;
-    };
-    const eqRow = (row1, row2) => {
-      if (row1 && row2) {
-        if (row1 === row2) {
-          return true;
-        }
-        return eqRowKey(getRowId(row1), getRowId(row2));
-      }
-      return false;
-    };
-    const eqRowByKey = (row, rowKey) => {
-      return row && eqRowKey(getRowKey(row), rowKey);
-    };
-    const findRow = (list, row) => {
-      return row ? XEUtils.find(list, (obj) => eqRow(obj, row)) : null;
-    };
-    const findRowByKey = (list, rowKey) => {
-      const keyField = computeKeyField.value;
-      return XEUtils.find(list, (obj) => eqRowKey(getRowIdByField(obj, keyField), rowKey));
-    };
-    const findRowIndexOf = (list, row) => {
-      return row ? XEUtils.findIndexOf(list, (obj) => eqRow(obj, row)) : -1;
-    };
-    const findRowIndexOfByKey = (list, rowKey) => {
-      const keyField = computeKeyField.value;
-      return XEUtils.findIndexOf(list, (obj) => eqRowKey(getRowIdByField(obj, keyField), rowKey));
-    };
-    const isCheckedByRadioRowKey = (rowKey) => {
-      const { selectRadioRow } = reactData;
-      return getRowKey(selectRadioRow) === rowKey;
-    };
-    const isCheckedByRadioRow = (row) => {
-      return isCheckedByRadioRowKey(getRowKey(row));
-    };
-    const isCheckedByCheckboxRowKey = (rowid) => {
-      const { updateCheckboxFlag } = reactData;
-      const { selectCheckboxMaps } = internalData;
-      return !!(updateCheckboxFlag && selectCheckboxMaps[rowid]);
-    };
-    const isCheckedByCheckboxRow = (row) => {
-      return isCheckedByCheckboxRowKey(getRowKey(row));
-    };
-    const setCurrentRow = (row) => {
-      internalData.currentRow = row;
-      reactData.currRowFlag++;
-      return nextTick();
-    };
-    const setCurrentRowByKey = (rowKey) => {
-      const { fullData } = internalData;
-      internalData.currentRow = findRowByKey(fullData, rowKey);
-      reactData.currRowFlag++;
-      return nextTick();
-    };
-    const getCurrentRow = () => {
-      const { currentRow } = internalData;
-      return currentRow;
-    };
-    const getCurrentRowKey = () => {
-      const { currentRow } = internalData;
-      return currentRow ? getRowKey(currentRow) : null;
-    };
-    const clearCurrentRow = () => {
-      internalData.currentRow = null;
-      reactData.currRowFlag++;
-      return nextTick();
-    };
-    const setRadioRow = (row) => {
-      reactData.selectRadioRow = row;
-      const value = getRowKey(row);
-      emitRadioMode(value);
-      return nextTick();
-    };
-    const setRadioRowByKey = (rowKey) => {
-      const { fullData } = internalData;
-      reactData.selectRadioRow = findRowByKey(fullData, rowKey);
-      const value = rowKey;
-      emitRadioMode(value);
-      return nextTick();
-    };
-    const getRadioRow = () => {
-      const { selectRadioRow } = reactData;
-      return selectRadioRow;
-    };
-    const getRadioRowKey = () => {
-      const { selectRadioRow } = reactData;
-      return selectRadioRow ? getRowKey(selectRadioRow) : null;
-    };
-    const clearRadioRow = () => {
-      const value = null;
-      reactData.selectRadioRow = value;
-      emitRadioMode(value);
-      return nextTick();
-    };
-    const setCheckboxRow = (row, checked) => {
-      const { selectCheckboxMaps } = internalData;
-      const keyField = computeKeyField.value;
-      const rowList = row ? XEUtils.isArray(row) ? row : [row] : [];
-      rowList.forEach(
-        checked ? (obj) => {
-          const rowid = getRowIdByField(obj, keyField);
-          if (!selectCheckboxMaps[rowid]) {
-            selectCheckboxMaps[rowid] = obj;
-          }
-        } : (obj) => {
-          const rowid = getRowIdByField(obj, keyField);
-          if (selectCheckboxMaps[rowid]) {
-            delete selectCheckboxMaps[rowid];
+        const params = { row, $list: $xeList };
+        if (isRowDrag && !(disabledMethod && disabledMethod(params))) {
+          handleRowDragMousedownEvent(evnt, params);
+        }
+      };
+      const handleRowClickEvent = (evnt, row) => {
+        const { showRadio, showCheckbox } = props;
+        const { currentRow } = internalData;
+        const radioOpts = computeRadioOpts.value;
+        const checkboxOpts = computeCheckboxOpts.value;
+        const rowOpts = computeRowOpts.value;
+        const { isCurrent } = rowOpts;
+        let triggerCurrent = false;
+        let triggerRadio = false;
+        let triggerCheckbox = false;
+        if (isCurrent) {
+          triggerCurrent = true;
+          changeCurrentEvent(evnt, row);
+        } else if (currentRow) {
+          internalData.currentRow = null;
+          reactData.currRowFlag++;
+        }
+        if (showRadio && radioOpts.trigger === "row") {
+          triggerRadio = true;
+          changeRadioEvent(evnt, row);
+        }
+        if (showCheckbox && checkboxOpts.trigger === "row") {
+          triggerCheckbox = true;
+          changeCheckboxEvent(evnt, row);
+        }
+        dispatchEvent("row-click", { row, triggerCurrent, triggerRadio, triggerCheckbox }, evnt);
+      };
+      const handleRowDblclickEvent = (evnt, row) => {
+        dispatchEvent("row-dblclick", { row }, evnt);
+      };
+      const getRowKey = (row) => {
+        const keyField = computeKeyField.value;
+        return getRowKeyByField(row, keyField);
+      };
+      const eqRowKey = (rowKey1, rowKey2) => {
+        return "" + rowKey1 === "" + rowKey2;
+      };
+      const eqRow = (row1, row2) => {
+        if (row1 && row2) {
+          if (row1 === row2) {
+            return true;
           }
+          return eqRowKey(getRowId(row1), getRowId(row2));
         }
-      );
-      const value = getCheckboxRowKeys();
-      emitCheckboxMode(value);
-      return updateCheckboxStatus();
-    };
-    const setCheckboxRowByKey = (rowKey, checked) => {
-      const { selectCheckboxMaps, fullKeyMaps } = internalData;
-      const keyField = computeKeyField.value;
-      const rowKeys = rowKey ? XEUtils.isArray(rowKey) ? rowKey : [rowKey] : [];
-      rowKeys.forEach(
-        checked ? (key) => {
-          const row = fullKeyMaps[key || ""];
-          if (row) {
-            const rowid = getRowIdByField(row, keyField);
-            if (row && !selectCheckboxMaps[rowid]) {
-              selectCheckboxMaps[rowid] = row;
+        return false;
+      };
+      const eqRowByKey = (row, rowKey) => {
+        return row && eqRowKey(getRowKey(row), rowKey);
+      };
+      const findRow = (list, row) => {
+        return row ? XEUtils.find(list, (obj) => eqRow(obj, row)) : null;
+      };
+      const findRowByKey = (list, rowKey) => {
+        const keyField = computeKeyField.value;
+        return XEUtils.find(list, (obj) => eqRowKey(getRowIdByField(obj, keyField), rowKey));
+      };
+      const findRowIndexOf = (list, row) => {
+        return row ? XEUtils.findIndexOf(list, (obj) => eqRow(obj, row)) : -1;
+      };
+      const findRowIndexOfByKey = (list, rowKey) => {
+        const keyField = computeKeyField.value;
+        return XEUtils.findIndexOf(list, (obj) => eqRowKey(getRowIdByField(obj, keyField), rowKey));
+      };
+      const isCheckedByRadioRowKey = (rowKey) => {
+        const { selectRadioRow } = reactData;
+        return getRowKey(selectRadioRow) === rowKey;
+      };
+      const isCheckedByRadioRow = (row) => {
+        return isCheckedByRadioRowKey(getRowKey(row));
+      };
+      const isCheckedByCheckboxRowKey = (rowid) => {
+        const { updateCheckboxFlag } = reactData;
+        const { selectCheckboxMaps } = internalData;
+        return !!(updateCheckboxFlag && selectCheckboxMaps[rowid]);
+      };
+      const isCheckedByCheckboxRow = (row) => {
+        return isCheckedByCheckboxRowKey(getRowKey(row));
+      };
+      const setCurrentRow = (row) => {
+        internalData.currentRow = row;
+        reactData.currRowFlag++;
+        return nextTick();
+      };
+      const setCurrentRowByKey = (rowKey) => {
+        const { fullData } = internalData;
+        internalData.currentRow = findRowByKey(fullData, rowKey);
+        reactData.currRowFlag++;
+        return nextTick();
+      };
+      const getCurrentRow = () => {
+        const { currentRow } = internalData;
+        return currentRow;
+      };
+      const getCurrentRowKey = () => {
+        const { currentRow } = internalData;
+        return currentRow ? getRowKey(currentRow) : null;
+      };
+      const clearCurrentRow = () => {
+        internalData.currentRow = null;
+        reactData.currRowFlag++;
+        return nextTick();
+      };
+      const setRadioRow = (row) => {
+        reactData.selectRadioRow = row;
+        const value = getRowKey(row);
+        emitRadioMode(value);
+        return nextTick();
+      };
+      const setRadioRowByKey = (rowKey) => {
+        const { fullData } = internalData;
+        reactData.selectRadioRow = findRowByKey(fullData, rowKey);
+        const value = rowKey;
+        emitRadioMode(value);
+        return nextTick();
+      };
+      const getRadioRow = () => {
+        const { selectRadioRow } = reactData;
+        return selectRadioRow;
+      };
+      const getRadioRowKey = () => {
+        const { selectRadioRow } = reactData;
+        return selectRadioRow ? getRowKey(selectRadioRow) : null;
+      };
+      const clearRadioRow = () => {
+        const value = null;
+        reactData.selectRadioRow = value;
+        emitRadioMode(value);
+        return nextTick();
+      };
+      const setCheckboxRow = (row, checked) => {
+        const { selectCheckboxMaps } = internalData;
+        const keyField = computeKeyField.value;
+        const rowList = row ? XEUtils.isArray(row) ? row : [row] : [];
+        rowList.forEach(
+          checked ? (obj) => {
+            const rowid = getRowIdByField(obj, keyField);
+            if (!selectCheckboxMaps[rowid]) {
+              selectCheckboxMaps[rowid] = obj;
             }
-          }
-        } : (key) => {
-          const row = fullKeyMaps[key || ""];
-          if (row) {
-            const rowid = getRowIdByField(row, keyField);
+          } : (obj) => {
+            const rowid = getRowIdByField(obj, keyField);
             if (selectCheckboxMaps[rowid]) {
               delete selectCheckboxMaps[rowid];
             }
           }
-        }
-      );
-      const value = getCheckboxRowKeys();
-      emitCheckboxMode(value);
-      return updateCheckboxStatus();
-    };
-    const getCheckboxRecords = () => {
-      const { updateCheckboxFlag } = reactData;
-      const { selectCheckboxMaps } = internalData;
-      const rowList = [];
-      if (updateCheckboxFlag) {
-        XEUtils.each(selectCheckboxMaps, (row) => {
-          if (row) {
-            rowList.push(row);
+        );
+        const value = getCheckboxRowKeys();
+        emitCheckboxMode(value);
+        return updateCheckboxStatus();
+      };
+      const setCheckboxRowByKey = (rowKey, checked) => {
+        const { selectCheckboxMaps, fullKeyMaps } = internalData;
+        const keyField = computeKeyField.value;
+        const rowKeys = rowKey ? XEUtils.isArray(rowKey) ? rowKey : [rowKey] : [];
+        rowKeys.forEach(
+          checked ? (key) => {
+            const row = fullKeyMaps[key || ""];
+            if (row) {
+              const rowid = getRowIdByField(row, keyField);
+              if (row && !selectCheckboxMaps[rowid]) {
+                selectCheckboxMaps[rowid] = row;
+              }
+            }
+          } : (key) => {
+            const row = fullKeyMaps[key || ""];
+            if (row) {
+              const rowid = getRowIdByField(row, keyField);
+              if (selectCheckboxMaps[rowid]) {
+                delete selectCheckboxMaps[rowid];
+              }
+            }
           }
-        });
-      }
-      return rowList;
-    };
-    const getCheckboxRowKeys = () => {
-      const { updateCheckboxFlag } = reactData;
-      const { selectCheckboxMaps } = internalData;
-      const keyField = computeKeyField.value;
-      const rowKeys = [];
-      if (updateCheckboxFlag) {
-        XEUtils.each(selectCheckboxMaps, (row) => {
-          if (row) {
+        );
+        const value = getCheckboxRowKeys();
+        emitCheckboxMode(value);
+        return updateCheckboxStatus();
+      };
+      const getCheckboxRecords = () => {
+        const { updateCheckboxFlag } = reactData;
+        const { selectCheckboxMaps } = internalData;
+        const rowList = [];
+        if (updateCheckboxFlag) {
+          XEUtils.each(selectCheckboxMaps, (row) => {
+            if (row) {
+              rowList.push(row);
+            }
+          });
+        }
+        return rowList;
+      };
+      const getCheckboxRowKeys = () => {
+        const { updateCheckboxFlag } = reactData;
+        const { selectCheckboxMaps } = internalData;
+        const keyField = computeKeyField.value;
+        const rowKeys = [];
+        if (updateCheckboxFlag) {
+          XEUtils.each(selectCheckboxMaps, (row) => {
+            if (row) {
+              const rowKey = getRowKeyByField(row, keyField);
+              rowKeys.push(rowKey);
+            }
+          });
+        }
+        return rowKeys;
+      };
+      const clearCheckboxRow = () => {
+        internalData.selectCheckboxMaps = {};
+        reactData.updateCheckboxFlag++;
+        reactData.isAllChecked = false;
+        reactData.isAllIndeterminate = false;
+        const value = [];
+        emitCheckboxMode(value);
+        return nextTick();
+      };
+      const setAllCheckboxRow = (checked) => {
+        const { fullData, selectCheckboxMaps } = internalData;
+        const keyField = computeKeyField.value;
+        if (checked) {
+          const value = [];
+          for (const row of fullData) {
             const rowKey = getRowKeyByField(row, keyField);
-            rowKeys.push(rowKey);
+            const rowid = getRowIdByField(row, keyField);
+            selectCheckboxMaps[rowid] = row;
+            value.push(rowKey);
           }
-        });
-      }
-      return rowKeys;
-    };
-    const clearCheckboxRow = () => {
-      internalData.selectCheckboxMaps = {};
-      reactData.updateCheckboxFlag++;
-      reactData.isAllChecked = false;
-      reactData.isAllIndeterminate = false;
-      const value = [];
-      emitCheckboxMode(value);
-      return nextTick();
-    };
-    const setAllCheckboxRow = (checked) => {
-      const { fullData, selectCheckboxMaps } = internalData;
-      const keyField = computeKeyField.value;
-      if (checked) {
-        const value = [];
-        for (const row of fullData) {
-          const rowKey = getRowKeyByField(row, keyField);
-          const rowid = getRowIdByField(row, keyField);
-          selectCheckboxMaps[rowid] = row;
-          value.push(rowKey);
+          emitCheckboxMode(value);
+          return updateCheckboxStatus();
         }
-        emitCheckboxMode(value);
-        return updateCheckboxStatus();
-      }
-      return clearCheckboxRow();
-    };
-    const updateCheckboxStatus = () => {
-      const { selectCheckboxMaps, fullData } = internalData;
-      const keyField = computeKeyField.value;
-      const checkboxOpts = computeCheckboxOpts.value;
-      const { checkMethod } = checkboxOpts;
-      let hasChecked = false;
-      let hasUnchecked = false;
-      if (checkMethod) {
-        for (const row of fullData) {
-          if (checkMethod({ row, $list: $xeList })) {
+        return clearCheckboxRow();
+      };
+      const updateCheckboxStatus = () => {
+        const { selectCheckboxMaps, fullData } = internalData;
+        const keyField = computeKeyField.value;
+        const checkboxOpts = computeCheckboxOpts.value;
+        const { checkMethod } = checkboxOpts;
+        let hasChecked = false;
+        let hasUnchecked = false;
+        if (checkMethod) {
+          for (const row of fullData) {
+            if (checkMethod({ row, $list: $xeList })) {
+              const rowid = getRowIdByField(row, keyField);
+              if (selectCheckboxMaps[rowid]) {
+                hasChecked = true;
+              } else {
+                hasUnchecked = true;
+                if (hasChecked) {
+                  break;
+                }
+              }
+            }
+          }
+        } else {
+          for (const row of fullData) {
             const rowid = getRowIdByField(row, keyField);
             if (selectCheckboxMaps[rowid]) {
               hasChecked = true;
@@ -1208,336 +1223,153 @@ var list_default = defineVxeComponent({
             }
           }
         }
-      } else {
-        for (const row of fullData) {
-          const rowid = getRowIdByField(row, keyField);
-          if (selectCheckboxMaps[rowid]) {
-            hasChecked = true;
-          } else {
-            hasUnchecked = true;
-            if (hasChecked) {
-              break;
-            }
-          }
-        }
-      }
-      reactData.isAllChecked = hasChecked && !hasUnchecked;
-      reactData.isAllIndeterminate = hasChecked && hasUnchecked;
-      reactData.updateCheckboxFlag++;
-      return nextTick();
-    };
-    const changeCheckboxAllEvent = (evnt) => {
-      const { isAllChecked } = reactData;
-      const isChecked = !isAllChecked;
-      if (isChecked) {
-        setAllCheckboxRow(true);
-      } else {
-        clearCheckboxRow();
-      }
-      dispatchEvent("checkbox-all", { checked: isChecked }, evnt);
-    };
-    const changeCheckboxEvent = (evnt, row) => {
-      evnt.preventDefault();
-      evnt.stopPropagation();
-      const { selectCheckboxMaps } = internalData;
-      const checkboxOpts = computeCheckboxOpts.value;
-      const { checkMethod } = checkboxOpts;
-      const rowid = getRowId(row);
-      const isDisabled = checkMethod ? !checkMethod({ $list: $xeList, row }) : false;
-      if (isDisabled) {
-        return;
-      }
-      let isChecked = false;
-      if (selectCheckboxMaps[rowid]) {
-        delete selectCheckboxMaps[rowid];
-      } else {
-        isChecked = true;
-        selectCheckboxMaps[rowid] = row;
-      }
-      reactData.updateCheckboxFlag++;
-      updateCheckboxStatus();
-      const rowids = XEUtils.keys(selectCheckboxMaps);
-      const value = rowids.map(deModelValue);
-      emitCheckboxMode(value);
-      dispatchEvent("checkbox-change", { row, value, checked: isChecked }, evnt);
-    };
-    const changeCurrentEvent = (evnt, row) => {
-      evnt.preventDefault();
-      const rowOpts = computeRowOpts.value;
-      const { currentMethod } = rowOpts;
-      let isDisabled = false;
-      if (currentMethod) {
-        isDisabled = !currentMethod({ row });
-      }
-      if (isDisabled) {
-        return;
-      }
-      const isChecked = true;
-      internalData.currentRow = row;
-      reactData.currRowFlag++;
-      dispatchEvent("current-change", { row, checked: isChecked }, evnt);
-    };
-    const changeRadioEvent = (evnt, row) => {
-      evnt.preventDefault();
-      evnt.stopPropagation();
-      const { selectRadioRow } = reactData;
-      const radioOpts = computeRadioOpts.value;
-      const { strict, checkMethod } = radioOpts;
-      const rowKey = getRowKey(row);
-      const isDisabled = checkMethod ? !checkMethod({ $list: $xeList, row }) : false;
-      if (isDisabled) {
-        return;
-      }
-      const value = rowKey;
-      let isChecked = true;
-      if (strict) {
-        if (selectRadioRow && rowKey === getRowKey(selectRadioRow)) {
-          isChecked = false;
-          reactData.selectRadioRow = null;
+        reactData.isAllChecked = hasChecked && !hasUnchecked;
+        reactData.isAllIndeterminate = hasChecked && hasUnchecked;
+        reactData.updateCheckboxFlag++;
+        return nextTick();
+      };
+      const changeCheckboxAllEvent = (evnt) => {
+        const { isAllChecked } = reactData;
+        const isChecked = !isAllChecked;
+        if (isChecked) {
+          setAllCheckboxRow(true);
         } else {
-          reactData.selectRadioRow = row;
+          clearCheckboxRow();
         }
-      } else {
-        reactData.selectRadioRow = row;
-      }
-      emitRadioMode(value);
-      dispatchEvent("radio-change", { row, value, checked: isChecked }, evnt);
-    };
-    const insertListRow = (newRecords, isAppend) => {
-      const { fullData, rowMaps } = internalData;
-      const keyField = computeKeyField.value;
-      const funcName = isAppend ? "push" : "unshift";
-      newRecords.forEach((item) => {
-        const rowid = getRowIdByField(item, keyField);
-        const rowRest = getItemCacheObj(item);
-        fullData[funcName](item);
-        rowMaps[rowid] = rowRest;
-      });
-    };
-    const handleInsertRowAt = (records, targetRowOrRowKey, isInsertNextRow) => {
-      const { fullData, rowMaps, removeRowMaps, insertRowMaps } = internalData;
-      const keyField = computeKeyField.value;
-      if (!keyField) {
-        errLog("vxe.error.reqSupportProp", ["insert() | insertAt() | insertNextAt()", "row-config.keyField"]);
-        return Promise.resolve({ row: null, rows: [] });
-      }
-      if (!XEUtils.isArray(records)) {
-        records = [records];
-      }
-      let targetRow = targetRowOrRowKey;
-      if (XEUtils.isString(targetRowOrRowKey) || XEUtils.isNumber(targetRowOrRowKey)) {
-        const rowRest = rowMaps[targetRowOrRowKey];
-        if (rowRest) {
-          targetRow = rowRest.item;
-        }
-      }
-      if (!records.length) {
-        return Promise.resolve({ row: null, rows: [] });
-      }
-      const newRecords = records.map((record) => XEUtils.assign({}, record));
-      if (XEUtils.eqNull(targetRow)) {
-        insertListRow(newRecords, false);
-      } else {
-        if (targetRow === -1) {
-          insertListRow(newRecords, true);
-        } else {
-          const rowIndex = fullData.findIndex((item) => targetRow[keyField] === item[keyField]);
-          if (rowIndex > -1) {
-            newRecords.forEach((item) => {
-              const rowid = getRowIdByField(item, keyField);
-              const rowRest = getItemCacheObj(item);
-              rowMaps[rowid] = rowRest;
-            });
-            let targetIndex = rowIndex;
-            if (isInsertNextRow) {
-              targetIndex = targetIndex + 1;
-            }
-            fullData.splice(targetIndex, 0, ...newRecords);
-          } else {
-            warnLog("vxe.error.unableInsert");
-            insertListRow(newRecords, true);
-          }
+        dispatchEvent("checkbox-all", { checked: isChecked }, evnt);
+      };
+      const changeCheckboxEvent = (evnt, row) => {
+        evnt.preventDefault();
+        evnt.stopPropagation();
+        const { selectCheckboxMaps } = internalData;
+        const checkboxOpts = computeCheckboxOpts.value;
+        const { checkMethod } = checkboxOpts;
+        const rowid = getRowId(row);
+        const isDisabled = checkMethod ? !checkMethod({ $list: $xeList, row }) : false;
+        if (isDisabled) {
+          return;
         }
-      }
-      newRecords.forEach((newItem) => {
-        const rowid = getRowIdByField(newItem, keyField);
-        if (removeRowMaps[rowid]) {
-          delete removeRowMaps[rowid];
-          if (insertRowMaps[rowid]) {
-            delete insertRowMaps[rowid];
-          }
+        let isChecked = false;
+        if (selectCheckboxMaps[rowid]) {
+          delete selectCheckboxMaps[rowid];
         } else {
-          insertRowMaps[rowid] = newItem;
+          isChecked = true;
+          selectCheckboxMaps[rowid] = row;
         }
-      });
-      reactData.removeRowFlag++;
-      reactData.insertRowFlag++;
-      cacheRowMap();
-      handleData(true);
-      updateAfterDataIndex();
-      updateCheckboxStatus();
-      if (reactData.scrollYLoad) {
-        updateYSpace();
-      }
-      return nextTick().then(() => {
-        return {
-          row: newRecords.length ? newRecords[newRecords.length - 1] : null,
-          rows: newRecords
-        };
-      });
-    };
-    const handleContextmenuEvent = (evnt, row) => {
-      const { menuConfig } = props;
-      const menuOpts = computeMenuOpts.value;
-      const rowOpts = computeRowOpts.value;
-      const { isCurrent } = rowOpts;
-      if (menuConfig ? isEnableConf(menuOpts) : menuOpts.enabled) {
-        const { options, visibleMethod } = menuOpts;
-        if (!visibleMethod || visibleMethod({ $list: $xeList, options, row })) {
-          if (isCurrent) {
-            changeCurrentEvent(evnt, row);
-          } else if (internalData.currentRow) {
-            internalData.currentRow = null;
-            reactData.currRowFlag++;
-          }
-          if (VxeUI.contextMenu) {
-            VxeUI.contextMenu.openByEvent(evnt, {
-              options,
-              events: {
-                optionClick(eventParams) {
-                  const { option } = eventParams;
-                  const gMenuOpts = menus.get(option.code);
-                  const tmMethod = gMenuOpts ? gMenuOpts.listMenuMethod : null;
-                  const params = {
-                    menu: option,
-                    row,
-                    $event: evnt,
-                    $list: $xeList
-                  };
-                  if (tmMethod) {
-                    tmMethod(params, evnt);
-                  }
-                  dispatchEvent("menu-click", params, eventParams.$event);
-                }
-              }
-            });
+        reactData.updateCheckboxFlag++;
+        updateCheckboxStatus();
+        const rowids = XEUtils.keys(selectCheckboxMaps);
+        const value = rowids.map(deModelValue);
+        emitCheckboxMode(value);
+        dispatchEvent("checkbox-change", { row, value, checked: isChecked }, evnt);
+      };
+      const changeCurrentEvent = (evnt, row) => {
+        evnt.preventDefault();
+        const rowOpts = computeRowOpts.value;
+        const { currentMethod } = rowOpts;
+        let isDisabled = false;
+        if (currentMethod) {
+          isDisabled = !currentMethod({ row });
+        }
+        if (isDisabled) {
+          return;
+        }
+        const isChecked = true;
+        internalData.currentRow = row;
+        reactData.currRowFlag++;
+        dispatchEvent("current-change", { row, checked: isChecked }, evnt);
+      };
+      const changeRadioEvent = (evnt, row) => {
+        evnt.preventDefault();
+        evnt.stopPropagation();
+        const { selectRadioRow } = reactData;
+        const radioOpts = computeRadioOpts.value;
+        const { strict, checkMethod } = radioOpts;
+        const rowKey = getRowKey(row);
+        const isDisabled = checkMethod ? !checkMethod({ $list: $xeList, row }) : false;
+        if (isDisabled) {
+          return;
+        }
+        const value = rowKey;
+        let isChecked = true;
+        if (strict) {
+          if (selectRadioRow && rowKey === getRowKey(selectRadioRow)) {
+            isChecked = false;
+            reactData.selectRadioRow = null;
+          } else {
+            reactData.selectRadioRow = row;
           }
+        } else {
+          reactData.selectRadioRow = row;
         }
-      }
-      dispatchEvent("row-menu", { row }, evnt);
-    };
-    const listMethods = {
-      dispatchEvent,
-      getScrollViewElem() {
-        const viewEl = refVirtualWrapper.value;
-        return viewEl || null;
-      },
-      loadData,
-      /**
-       * 重新加载数据
-       * @param {Array} datas 数据
-       */
-      reloadData(datas) {
-        clearScroll();
-        return loadData(datas);
-      },
-      getFullData() {
-        const { fullData } = internalData;
-        return fullData;
-      },
-      recalculate,
-      scrollTo,
-      refreshScroll,
-      clearScroll,
-      getRowKey,
-      eqRowKey,
-      eqRow,
-      eqRowByKey,
-      findRow,
-      findRowByKey,
-      findRowIndexOf,
-      findRowIndexOfByKey,
-      isCheckedByRadioRowKey,
-      isCheckedByRadioRow,
-      isCheckedByCheckboxRowKey,
-      isCheckedByCheckboxRow,
-      setCurrentRow,
-      setCurrentRowByKey,
-      getCurrentRow,
-      getCurrentRowKey,
-      clearCurrentRow,
-      setRadioRow,
-      setRadioRowByKey,
-      getRadioRow,
-      getRadioRowKey,
-      clearRadioRow,
-      setCheckboxRow,
-      setCheckboxRowByKey,
-      getCheckboxRecords,
-      getCheckboxRows: getCheckboxRecords,
-      getCheckboxRowKeys,
-      clearCheckboxRow,
-      setAllCheckboxRow,
-      insert(records) {
-        return handleInsertRowAt(records, null);
-      },
-      insertAt(records, targetRowOrRowKey) {
-        return handleInsertRowAt(records, targetRowOrRowKey);
-      },
-      insertNextAt(records, targetRowOrRowKey) {
-        return handleInsertRowAt(records, targetRowOrRowKey, true);
-      },
-      getInsertRecords() {
-        const { insertRowMaps } = internalData;
-        const insertRecords = [];
-        XEUtils.each(insertRowMaps, (item) => {
-          insertRecords.push(item);
+        emitRadioMode(value);
+        dispatchEvent("radio-change", { row, value, checked: isChecked }, evnt);
+      };
+      const insertListRow = (newRecords, isAppend) => {
+        const { fullData, rowMaps } = internalData;
+        const keyField = computeKeyField.value;
+        const funcName = isAppend ? "push" : "unshift";
+        newRecords.forEach((item) => {
+          const rowid = getRowIdByField(item, keyField);
+          const rowRest = getItemCacheObj(item);
+          fullData[funcName](item);
+          rowMaps[rowid] = rowRest;
         });
-        return insertRecords;
-      },
-      isInsertByRow(row) {
-        const rowid = getRowId(row);
-        return !!reactData.insertRowFlag && !!internalData.insertRowMaps[rowid];
-      },
-      remove(rows) {
-        const { fullData, insertRowMaps, removeRowMaps } = internalData;
+      };
+      const handleInsertRowAt = (records, targetRowOrRowKey, isInsertNextRow) => {
+        const { fullData, rowMaps, removeRowMaps, insertRowMaps } = internalData;
         const keyField = computeKeyField.value;
         if (!keyField) {
           errLog("vxe.error.reqSupportProp", ["insert() | insertAt() | insertNextAt()", "row-config.keyField"]);
           return Promise.resolve({ row: null, rows: [] });
         }
-        let delList = [];
-        if (!rows) {
-          rows = fullData;
-        } else if (!XEUtils.isArray(rows)) {
-          rows = [rows];
+        if (!XEUtils.isArray(records)) {
+          records = [records];
+        }
+        let targetRow = targetRowOrRowKey;
+        if (XEUtils.isString(targetRowOrRowKey) || XEUtils.isNumber(targetRowOrRowKey)) {
+          const rowRest = rowMaps[targetRowOrRowKey];
+          if (rowRest) {
+            targetRow = rowRest.item;
+          }
         }
-        if (!rows.length) {
+        if (!records.length) {
           return Promise.resolve({ row: null, rows: [] });
         }
-        rows.forEach((item) => {
-          if (!$xeList.isInsertByRow(item)) {
-            const rowid = getRowId(item);
-            removeRowMaps[rowid] = item;
-          }
-        });
-        if (fullData === rows) {
-          rows = delList = fullData.slice(0);
-          internalData.fullData = [];
+        const newRecords = records.map((record) => XEUtils.assign({}, record));
+        if (XEUtils.eqNull(targetRow)) {
+          insertListRow(newRecords, false);
         } else {
-          rows.forEach((item) => {
-            const rowid = getRowId(item);
-            const rowIndex = XEUtils.findIndexOf(fullData, (item2) => rowid === getRowId(item2));
+          if (targetRow === -1) {
+            insertListRow(newRecords, true);
+          } else {
+            const rowIndex = fullData.findIndex((item) => targetRow[keyField] === item[keyField]);
             if (rowIndex > -1) {
-              const rItems = fullData.splice(rowIndex, 1);
-              delList.push(rItems[0]);
+              newRecords.forEach((item) => {
+                const rowid = getRowIdByField(item, keyField);
+                const rowRest = getItemCacheObj(item);
+                rowMaps[rowid] = rowRest;
+              });
+              let targetIndex = rowIndex;
+              if (isInsertNextRow) {
+                targetIndex = targetIndex + 1;
+              }
+              fullData.splice(targetIndex, 0, ...newRecords);
+            } else {
+              warnLog("vxe.error.unableInsert");
+              insertListRow(newRecords, true);
             }
-          });
+          }
         }
-        rows.forEach((item) => {
-          const rowid = getRowId(item);
-          if (insertRowMaps[rowid]) {
-            delete insertRowMaps[rowid];
+        newRecords.forEach((newItem) => {
+          const rowid = getRowIdByField(newItem, keyField);
+          if (removeRowMaps[rowid]) {
+            delete removeRowMaps[rowid];
+            if (insertRowMaps[rowid]) {
+              delete insertRowMaps[rowid];
+            }
+          } else {
+            insertRowMaps[rowid] = newItem;
           }
         });
         reactData.removeRowFlag++;
@@ -1550,196 +1382,237 @@ var list_default = defineVxeComponent({
           updateYSpace();
         }
         return nextTick().then(() => {
-          return recalculate();
-        }).then(() => {
-          return { row: delList.length ? delList[delList.length - 1] : null, rows: delList };
-        });
-      },
-      getRemoveRecords() {
-        const { removeRowMaps } = internalData;
-        const removeRecords = [];
-        XEUtils.each(removeRowMaps, (item) => {
-          removeRecords.push(item);
+          return {
+            row: newRecords.length ? newRecords[newRecords.length - 1] : null,
+            rows: newRecords
+          };
         });
-        return removeRecords;
-      },
-      isRemoveByRow(row) {
-        const rowid = getRowId(row);
-        return !!reactData.removeRowFlag && !!internalData.removeRowMaps[rowid];
-      },
-      getRecordset() {
-        return {
-          insertRecords: $xeList.getInsertRecords(),
-          removeRecords: $xeList.getRemoveRecords()
-        };
-      }
-    };
-    const listPrivateMethods = {
-      handleCrossListRowDragCancelEvent() {
-        clearRowDragData();
-        clearCrossListDragStatus();
-      },
-      /**
-       * 处理跨树拖拽完成
-       */
-      handleCrossListRowDragFinishEvent(evnt) {
-        const { rowList } = reactData;
-        const { rowMaps } = internalData;
-        const dragOpts = computeDragOpts.value;
-        const { animation, isCrossListDrag } = dragOpts;
-        const el = refElem.value;
-        if (!el) {
-          return;
-        }
-        if (isCrossListDrag && crossListDragRowObj && crossListDragRowInfo) {
-          const { row: dragRow } = crossListDragRowInfo;
-          if (dragRow) {
-            const dragRowid = getRowId(dragRow);
-            const dragRowRest = rowMaps[dragRowid];
-            let dragRowHeight = 0;
-            let rsIndex = -1;
-            if (dragRowRest) {
-              if (animation) {
-                const oldItemEl = el.querySelector(`.vxe-list--row[rowid="${dragRowid}"]`);
-                const targetItemEl = oldItemEl;
-                if (targetItemEl) {
-                  dragRowHeight = targetItemEl.offsetHeight;
+      };
+      const handleContextmenuEvent = (evnt, row) => {
+        const { menuConfig } = props;
+        const menuOpts = computeMenuOpts.value;
+        const rowOpts = computeRowOpts.value;
+        const { isCurrent } = rowOpts;
+        if (menuConfig ? isEnableConf(menuOpts) : menuOpts.enabled) {
+          const { options, visibleMethod } = menuOpts;
+          if (!visibleMethod || visibleMethod({ $list: $xeList, options, row })) {
+            if (isCurrent) {
+              changeCurrentEvent(evnt, row);
+            } else if (internalData.currentRow) {
+              internalData.currentRow = null;
+              reactData.currRowFlag++;
+            }
+            if (VxeUI.contextMenu) {
+              VxeUI.contextMenu.openByEvent(evnt, {
+                options,
+                events: {
+                  optionClick(eventParams) {
+                    const { option } = eventParams;
+                    const gMenuOpts = menus.get(option.code);
+                    const tmMethod = gMenuOpts ? gMenuOpts.listMenuMethod : null;
+                    const params = {
+                      menu: option,
+                      row,
+                      $event: evnt,
+                      $list: $xeList
+                    };
+                    if (tmMethod) {
+                      tmMethod(params, evnt);
+                    }
+                    dispatchEvent("menu-click", params, eventParams.$event);
+                  }
                 }
-              }
-              rsIndex = dragRowRest.$index;
+              });
             }
-            const dragRangeList = rsIndex > -1 && rsIndex < rowList.length - 1 ? rowList.slice(rsIndex + 1) : [];
-            const dragList = [dragRow];
-            $xeList.remove(dragList).then(() => {
-              if (animation && dragRowHeight && dragRangeList.length) {
-                const wrapperEl = el;
-                const dtClss = [];
-                dragRangeList.forEach((item) => {
-                  const rowid = getRowId(item);
-                  dtClss.push(`.vxe-list--row[rowid="${rowid}"]`);
-                });
-                const dtTrList = wrapperEl.querySelectorAll(dtClss.join(","));
-                moveRowAnimateToTb(dtTrList, dragRowHeight);
-              }
-            });
-            dispatchEvent(
-              "row-remove-dragend",
-              {
-                row: dragRow
-              },
-              evnt
-            );
-            handleRowDragEndClearStatus();
           }
         }
-      },
-      /**
-       * 处理跨树拖至新的空树
-       */
-      handleCrossListRowDragoverEmptyEvent(evnt) {
-        const { rowList } = reactData;
-        const dragOpts = computeDragOpts.value;
-        const { isCrossListDrag } = dragOpts;
-        if (isCrossListDrag && crossListDragRowObj && !rowList.length) {
-          const { $oldList, $newList } = crossListDragRowObj;
-          if ($oldList) {
-            const oldListReactData = $oldList;
-            if ($oldList.xID !== $xeList.xID) {
-              if ($newList && $newList.xID !== $xeList.xID) {
-                $newList.hideCrossListRowDropClearStatus();
+        dispatchEvent("row-menu", { row }, evnt);
+      };
+      const listMethods = {
+        dispatchEvent,
+        getScrollViewElem() {
+          const viewEl = refVirtualWrapper.value;
+          return viewEl || null;
+        },
+        loadData,
+        /**
+         * 重新加载数据
+         * @param {Array} datas 数据
+         */
+        reloadData(datas) {
+          clearScroll();
+          return loadData(datas);
+        },
+        getFullData() {
+          const { fullData } = internalData;
+          return fullData;
+        },
+        recalculate,
+        scrollTo,
+        refreshScroll,
+        clearScroll,
+        getRowKey,
+        eqRowKey,
+        eqRow,
+        eqRowByKey,
+        findRow,
+        findRowByKey,
+        findRowIndexOf,
+        findRowIndexOfByKey,
+        isCheckedByRadioRowKey,
+        isCheckedByRadioRow,
+        isCheckedByCheckboxRowKey,
+        isCheckedByCheckboxRow,
+        setCurrentRow,
+        setCurrentRowByKey,
+        getCurrentRow,
+        getCurrentRowKey,
+        clearCurrentRow,
+        setRadioRow,
+        setRadioRowByKey,
+        getRadioRow,
+        getRadioRowKey,
+        clearRadioRow,
+        setCheckboxRow,
+        setCheckboxRowByKey,
+        getCheckboxRecords,
+        getCheckboxRows: getCheckboxRecords,
+        getCheckboxRowKeys,
+        clearCheckboxRow,
+        setAllCheckboxRow,
+        insert(records) {
+          return handleInsertRowAt(records, null);
+        },
+        insertAt(records, targetRowOrRowKey) {
+          return handleInsertRowAt(records, targetRowOrRowKey);
+        },
+        insertNextAt(records, targetRowOrRowKey) {
+          return handleInsertRowAt(records, targetRowOrRowKey, true);
+        },
+        getInsertRecords() {
+          const { insertRowMaps } = internalData;
+          const insertRecords = [];
+          XEUtils.each(insertRowMaps, (item) => {
+            insertRecords.push(item);
+          });
+          return insertRecords;
+        },
+        isInsertByRow(row) {
+          const rowid = getRowId(row);
+          return !!reactData.insertRowFlag && !!internalData.insertRowMaps[rowid];
+        },
+        remove(rows) {
+          const { fullData, insertRowMaps, removeRowMaps } = internalData;
+          const keyField = computeKeyField.value;
+          if (!keyField) {
+            errLog("vxe.error.reqSupportProp", ["insert() | insertAt() | insertNextAt()", "row-config.keyField"]);
+            return Promise.resolve({ row: null, rows: [] });
+          }
+          let delList = [];
+          if (!rows) {
+            rows = fullData;
+          } else if (!XEUtils.isArray(rows)) {
+            rows = [rows];
+          }
+          if (!rows.length) {
+            return Promise.resolve({ row: null, rows: [] });
+          }
+          rows.forEach((item) => {
+            if (!$xeList.isInsertByRow(item)) {
+              const rowid = getRowId(item);
+              removeRowMaps[rowid] = item;
+            }
+          });
+          if (fullData === rows) {
+            rows = delList = fullData.slice(0);
+            internalData.fullData = [];
+          } else {
+            rows.forEach((item) => {
+              const rowid = getRowId(item);
+              const rowIndex = XEUtils.findIndexOf(fullData, (item2) => rowid === getRowId(item2));
+              if (rowIndex > -1) {
+                const rItems = fullData.splice(rowIndex, 1);
+                delList.push(rItems[0]);
               }
-              evnt.preventDefault();
-              $oldList.hideCrossListRowDropClearStatus();
-              crossListDragRowObj.$newList = $xeList;
-              internalData.prevDragRow = null;
-              reactData.dragTipText = oldListReactData.dragTipText;
-              showDropTip(evnt, evnt.currentTarget, true, "");
+            });
+          }
+          rows.forEach((item) => {
+            const rowid = getRowId(item);
+            if (insertRowMaps[rowid]) {
+              delete insertRowMaps[rowid];
             }
+          });
+          reactData.removeRowFlag++;
+          reactData.insertRowFlag++;
+          cacheRowMap();
+          handleData(true);
+          updateAfterDataIndex();
+          updateCheckboxStatus();
+          if (reactData.scrollYLoad) {
+            updateYSpace();
           }
+          return nextTick().then(() => {
+            return recalculate();
+          }).then(() => {
+            return { row: delList.length ? delList[delList.length - 1] : null, rows: delList };
+          });
+        },
+        getRemoveRecords() {
+          const { removeRowMaps } = internalData;
+          const removeRecords = [];
+          XEUtils.each(removeRowMaps, (item) => {
+            removeRecords.push(item);
+          });
+          return removeRecords;
+        },
+        isRemoveByRow(row) {
+          const rowid = getRowId(row);
+          return !!reactData.removeRowFlag && !!internalData.removeRowMaps[rowid];
+        },
+        getRecordset() {
+          return {
+            insertRecords: $xeList.getInsertRecords(),
+            removeRecords: $xeList.getRemoveRecords()
+          };
         }
-      },
-      /**
-       * 处理跨树拖插入
-       */
-      handleCrossListRowDragInsertEvent(evnt) {
-        const { prevDragRow, prevDragPos } = internalData;
-        const dragOpts = computeDragOpts.value;
-        const { animation, isCrossListDrag, dragEndMethod } = dragOpts;
-        if (isCrossListDrag && crossListDragRowObj && crossListDragRowInfo) {
-          const { row: oldRow } = crossListDragRowInfo;
-          const { $oldList } = crossListDragRowObj;
+      };
+      const listPrivateMethods = {
+        handleCrossListRowDragCancelEvent() {
+          clearRowDragData();
+          clearCrossListDragStatus();
+        },
+        /**
+         * 处理跨树拖拽完成
+         */
+        handleCrossListRowDragFinishEvent(evnt) {
+          const { rowList } = reactData;
+          const { rowMaps } = internalData;
+          const dragOpts = computeDragOpts.value;
+          const { animation, isCrossListDrag } = dragOpts;
           const el = refElem.value;
           if (!el) {
             return;
           }
-          if ($oldList && oldRow) {
-            const dragRow = oldRow;
-            let dragOffsetIndex = -1;
-            if (prevDragRow) {
-              dragOffsetIndex = prevDragPos === "bottom" ? 1 : 0;
-            }
-            const dragParams = {
-              oldRow: dragRow,
-              newRow: prevDragRow,
-              dragRow,
-              dragPos: prevDragPos,
-              offsetIndex: dragOffsetIndex
-            };
-            const errRest = {
-              status: false
-            };
-            Promise.resolve(dragEndMethod ? dragEndMethod(dragParams) : true).then((status) => {
-              if (!status) {
-                if ($oldList) {
-                  if ($oldList.xID !== $xeList.xID) {
-                    $oldList.handleCrossListRowDragCancelEvent(evnt);
+          if (isCrossListDrag && crossListDragRowObj && crossListDragRowInfo) {
+            const { row: dragRow } = crossListDragRowInfo;
+            if (dragRow) {
+              const dragRowid = getRowId(dragRow);
+              const dragRowRest = rowMaps[dragRowid];
+              let dragRowHeight = 0;
+              let rsIndex = -1;
+              if (dragRowRest) {
+                if (animation) {
+                  const oldItemEl = el.querySelector(`.vxe-list--row[rowid="${dragRowid}"]`);
+                  const targetItemEl = oldItemEl;
+                  if (targetItemEl) {
+                    dragRowHeight = targetItemEl.offsetHeight;
                   }
                 }
-                handleRowDragEndClearStatus();
-                return errRest;
+                rsIndex = dragRowRest.$index;
               }
-              let insertRest = Promise.resolve();
+              const dragRangeList = rsIndex > -1 && rsIndex < rowList.length - 1 ? rowList.slice(rsIndex + 1) : [];
               const dragList = [dragRow];
-              $oldList.handleCrossListRowDragFinishEvent(evnt);
-              if (prevDragRow) {
-                if (prevDragPos === "bottom") {
-                  insertRest = $xeList.insertNextAt(dragList, prevDragRow);
-                } else {
-                  insertRest = $xeList.insertAt(dragList, prevDragRow);
-                }
-              } else {
-                insertRest = $xeList.insert(dragList);
-              }
-              $xeList.dispatchEvent(
-                "row-insert-dragend",
-                {
-                  oldRow,
-                  newRow: prevDragRow,
-                  dragRow,
-                  dragPos: prevDragPos,
-                  offsetIndex: dragOffsetIndex
-                },
-                evnt
-              );
-              clearRowDragData();
-              insertRest.then(() => {
-                const { rowList } = reactData;
-                const { rowMaps } = internalData;
-                const oldRowid = getRowId(dragRow);
-                const oldRowRest = rowMaps[oldRowid];
-                let dragRowHeight = 0;
-                let rsIndex = -1;
-                if (oldRowRest) {
-                  if (animation) {
-                    const oldItemEl = el.querySelector(`.vxe-list--row[rowid="${oldRowid}"]`);
-                    const targetItemEl = oldItemEl;
-                    if (targetItemEl) {
-                      dragRowHeight = targetItemEl.offsetHeight;
-                    }
-                  }
-                  rsIndex = oldRowRest.$index;
-                }
-                const dragRangeList = rsIndex > -1 ? rowList.slice(rsIndex) : [];
+              $xeList.remove(dragList).then(() => {
                 if (animation && dragRowHeight && dragRangeList.length) {
                   const wrapperEl = el;
                   const dtClss = [];
@@ -1748,691 +1621,821 @@ var list_default = defineVxeComponent({
                     dtClss.push(`.vxe-list--row[rowid="${rowid}"]`);
                   });
                   const dtTrList = wrapperEl.querySelectorAll(dtClss.join(","));
-                  moveRowAnimateToTb(dtTrList, -dragRowHeight);
+                  moveRowAnimateToTb(dtTrList, dragRowHeight);
                 }
               });
-            });
-          }
-        }
-      },
-      hideCrossListRowDropClearStatus() {
-        hideDropTip();
-      }
-    };
-    const bindScrollbarResize = () => {
-      const { scrollObserver } = internalData;
-      const isVScrollbar = computeIsVScrollbar.value;
-      if (isVScrollbar) {
-        if (!scrollObserver) {
-          const el = refElem.value;
-          const viewSpaceEl = refVirtualSpaceElem.value;
-          const viewInnerEl = refVirtualBody.value;
-          const scrollObserver2 = globalResize.create(() => {
-            reScrollFlag.value++;
-          });
-          if (el) {
-            scrollObserver2.observe(el);
-          }
-          if (viewSpaceEl) {
-            scrollObserver2.observe(viewSpaceEl);
-          }
-          if (viewInnerEl) {
-            scrollObserver2.observe(viewInnerEl);
-          }
-          internalData.scrollObserver = scrollObserver2;
-        }
-      }
-    };
-    Object.assign($xeList, listMethods, listPrivateMethods);
-    const renderDragTip = () => {
-      const { dragRow, dragTipText } = reactData;
-      const dragOpts = computeDragOpts.value;
-      const isDrag = computeIsDrag.value;
-      const dRow = dragRow;
-      if (isDrag) {
-        return h(
-          "div",
-          {
-            class: "vxe-list--drag-wrapper"
-          },
-          [
-            h("div", {
-              ref: refDragRowLineElem,
-              class: [
-                "vxe-list--drag-row-line",
+              dispatchEvent(
+                "row-remove-dragend",
                 {
-                  "is--guides": dragOpts.showGuidesStatus
-                }
-              ]
-            }),
-            dRow && dragOpts.showDragTip ? h(
-              "div",
-              {
-                ref: refDragTipElem,
-                class: "vxe-list--drag-sort-tip"
-              },
-              [
-                h(
-                  "div",
-                  {
-                    class: "vxe-list--drag-sort-tip-wrapper"
-                  },
-                  [
-                    h(
-                      "div",
-                      {
-                        class: "vxe-list--drag-sort-tip-status"
-                      },
-                      [
-                        h("span", {
-                          class: ["vxe-list--drag-sort-tip-normal-status", getIcon().LIST_DRAG_STATUS_NODE]
-                        }),
-                        h("span", {
-                          class: ["vxe-list--drag-sort-tip-disabled-status", getIcon().LIST_DRAG_DISABLED]
-                        })
-                      ]
-                    ),
-                    h(
-                      "div",
-                      {
-                        class: "vxe-list--drag-sort-tip-content"
-                      },
-                      dragTipText
-                    )
-                  ]
-                )
-              ]
-            ) : renderEmptyElement($xeList)
-          ]
-        );
-      }
-      return renderEmptyElement($xeList);
-    };
-    const renderRadio = (row, rowid, isDisabled, isChecked) => {
-      const { showRadio } = props;
-      const radioOpts = computeRadioOpts.value;
-      const { showIcon, visibleMethod } = radioOpts;
-      const isVisible = !visibleMethod || visibleMethod({ $list: $xeList, row });
-      if (showRadio && showIcon && isVisible) {
-        return h(
-          "div",
-          {
-            key: "ct2",
-            class: [
-              "vxe-list--radio-option",
-              {
-                "is--checked": isChecked,
-                "is--disabled": isDisabled
-              }
-            ],
-            onClick(evnt) {
-              if (!isDisabled) {
-                changeRadioEvent(evnt, row);
-              }
+                  row: dragRow
+                },
+                evnt
+              );
+              handleRowDragEndClearStatus();
             }
-          },
-          [
-            h("span", {
-              class: ["vxe-radio--icon", isChecked ? getIcon().RADIO_CHECKED : isDisabled ? getIcon().RADIO_DISABLED_UNCHECKED : getIcon().RADIO_UNCHECKED]
-            })
-          ]
-        );
-      }
-      return renderEmptyElement($xeList);
-    };
-    const renderCheckbox = (row, rowid, isDisabled, isChecked) => {
-      const { showCheckbox } = props;
-      const checkboxOpts = computeCheckboxOpts.value;
-      const { showIcon, visibleMethod } = checkboxOpts;
-      const isVisible = !visibleMethod || visibleMethod({ $list: $xeList, row });
-      if (showCheckbox && showIcon && isVisible) {
-        return h(
-          "div",
-          {
-            key: "ct3",
-            class: [
-              "vxe-list--checkbox-option",
-              {
-                "is--checked": isChecked,
-                "is--disabled": isDisabled
-              }
-            ],
-            onClick(evnt) {
-              if (!isDisabled) {
-                changeCheckboxEvent(evnt, row);
+          }
+        },
+        /**
+         * 处理跨树拖至新的空树
+         */
+        handleCrossListRowDragoverEmptyEvent(evnt) {
+          const { rowList } = reactData;
+          const dragOpts = computeDragOpts.value;
+          const { isCrossListDrag } = dragOpts;
+          if (isCrossListDrag && crossListDragRowObj && !rowList.length) {
+            const { $oldList, $newList } = crossListDragRowObj;
+            if ($oldList) {
+              const oldListReactData = $oldList;
+              if ($oldList.xID !== $xeList.xID) {
+                if ($newList && $newList.xID !== $xeList.xID) {
+                  $newList.hideCrossListRowDropClearStatus();
+                }
+                evnt.preventDefault();
+                $oldList.hideCrossListRowDropClearStatus();
+                crossListDragRowObj.$newList = $xeList;
+                internalData.prevDragRow = null;
+                reactData.dragTipText = oldListReactData.dragTipText;
+                showDropTip(evnt, evnt.currentTarget, true, "");
               }
             }
-          },
-          [
-            h("span", {
-              class: ["vxe-checkbox--icon", isChecked ? getIcon().CHECKBOX_CHECKED : isDisabled ? getIcon().CHECKBOX_DISABLED_UNCHECKED : getIcon().CHECKBOX_UNCHECKED]
-            })
-          ]
-        );
-      }
-      return renderEmptyElement($xeList);
-    };
-    const renderRow = (row, rowIndex) => {
-      const { showRadio, showCheckbox } = props;
-      const { selectRadioRow, currRowFlag, updateCheckboxFlag } = reactData;
-      const { selectCheckboxMaps, currentRow } = internalData;
-      const contentSlot = slots.content;
-      const extraSlot = slots.extra;
-      const dragOpts = computeDragOpts.value;
-      const { trigger, icon, disabledMethod, visibleMethod } = dragOpts;
-      const radioOpts = computeRadioOpts.value;
-      const checkboxOpts = computeCheckboxOpts.value;
-      const rowOpts = computeRowOpts.value;
-      const { useKey, contentField, className: rowClassName, isCurrent } = rowOpts;
-      const isDrag = computeIsDrag.value;
-      const keyField = computeKeyField.value;
-      const isRowFnCls = rowClassName && XEUtils.isFunction(rowClassName);
-      const hasKey = keyField || useKey || isDrag || isCurrent || showRadio || showCheckbox;
-      const rowKey = hasKey && keyField ? getRowIdByField(row, keyField) : "";
-      const rowid = enModelValue(rowKey);
-      const rowParams = { row, $list: $xeList };
-      let isRadioChecked = false;
-      let isRadioDisabled = false;
-      if (showRadio) {
-        isRadioChecked = selectRadioRow && (row === selectRadioRow || eqRowByKey(selectRadioRow, rowKey));
-        isRadioDisabled = radioOpts.checkMethod ? !radioOpts.checkMethod({ $list: $xeList, row }) : false;
-      }
-      let isCheckboxChecked = false;
-      let isCheckboxDisabled = false;
-      if (showCheckbox) {
-        isCheckboxChecked = !!(updateCheckboxFlag && selectCheckboxMaps[rowid]);
-        isCheckboxDisabled = checkboxOpts.checkMethod ? !checkboxOpts.checkMethod({ $list: $xeList, row }) : false;
-      }
-      const ctVNs = [];
-      if (showRadio) {
-        ctVNs.push(renderRadio(row, rowid, isRadioDisabled, isRadioChecked));
-      }
-      if (showCheckbox) {
-        ctVNs.push(renderCheckbox(row, rowid, isCheckboxDisabled, isCheckboxChecked));
-      }
-      let isDragDisabled = false;
-      if (isDrag && keyField && (!visibleMethod || visibleMethod(rowParams))) {
-        const handleOns = {};
-        if (trigger !== "row") {
-          isDragDisabled = !!(disabledMethod && disabledMethod(rowParams));
-          handleOns.onMousedown = (evnt) => {
-            if (!isDragDisabled) {
-              handleRowDragMousedownEvent(evnt, rowParams);
-            }
-          };
-          handleOns.onMouseup = handleRowDragMouseupEvent;
-        }
-        ctVNs.push(
-          h(
-            "div",
-            {
-              key: "ct1",
-              class: "vxe-list--row-drag"
-            },
-            [
-              h(
-                "span",
-                {
-                  class: "vxe-list--drag-handle",
-                  ...handleOns
-                },
-                [
-                  h("i", {
-                    class: icon || getIcon().LIST_DRAG
-                  })
-                ]
-              )
-            ]
-          )
-        );
-      }
-      ctVNs.push(
-        h(
-          "div",
-          {
-            key: "ct5",
-            class: "vxe-list--row-content"
-          },
-          contentSlot ? contentSlot(rowParams) : contentField ? getText(row[contentField]) : ""
-        )
-      );
-      if (extraSlot) {
-        ctVNs.push(
-          h(
-            "div",
-            {
-              key: "ct7",
-              class: "vxe-list--row-extra"
-            },
-            extraSlot(rowParams)
-          )
-        );
-      }
-      const rowOns = {
-        onMousedown(evnt) {
-          handleRowMousedownEvent(evnt, row);
-        },
-        onMouseup: handleRowDragMouseupEvent,
-        onClick(evnt) {
-          handleRowClickEvent(evnt, row);
-        },
-        onDblclick(evnt) {
-          handleRowDblclickEvent(evnt, row);
+          }
         },
-        onContextmenu(evnt) {
-          handleContextmenuEvent(evnt, row);
-        }
-      };
-      if (isDrag) {
-        rowOns.onDragstart = handleRowDragDragstartEvent;
-        rowOns.onDragend = handleRowDragDragendEvent;
-        rowOns.onDragover = handleRowDragDragoverEvent;
-      }
-      return h(
-        "div",
-        {
-          key: hasKey && keyField ? rowid : rowIndex,
-          class: [
-            "vxe-list--row",
-            isRowFnCls ? rowClassName(rowParams) : rowClassName || "",
-            {
-              "is--drag-disabled": isDragDisabled,
-              "is--current": currRowFlag && currentRow && eqRowByKey(currentRow, rowKey),
-              "is-radio--disabled": isRadioDisabled,
-              "is-radio--checked": isRadioChecked,
-              "is-checkbox--disabled": isCheckboxDisabled,
-              "is-checkbox--checked": isCheckboxChecked
+        /**
+         * 处理跨树拖插入
+         */
+        handleCrossListRowDragInsertEvent(evnt) {
+          const { prevDragRow, prevDragPos } = internalData;
+          const dragOpts = computeDragOpts.value;
+          const { animation, isCrossListDrag, dragEndMethod } = dragOpts;
+          if (isCrossListDrag && crossListDragRowObj && crossListDragRowInfo) {
+            const { row: oldRow } = crossListDragRowInfo;
+            const { $oldList } = crossListDragRowObj;
+            const el = refElem.value;
+            if (!el) {
+              return;
             }
-          ],
-          rowid: hasKey && keyField ? rowid : void 0,
-          ...rowOns
-        },
-        ctVNs
-      );
-    };
-    const renderVN = () => {
-      const { showCheckbox, className, loading } = props;
-      const { bodyHeight, topSpaceHeight, rowList, isAllChecked, isAllIndeterminate, xThumbWidth, yThumbHeight } = reactData;
-      const defaultSlot = slots.default;
-      const headerSlot = slots.header;
-      const footerSlot = slots.footer;
-      const vSize = computeSize.value;
-      const isVScrollbar = computeIsVScrollbar.value;
-      const wrapperStyles = computeWrapperStyles.value;
-      const virtualStyles = computeVirtualStyles.value;
-      const radioOpts = computeRadioOpts.value;
-      const checkboxOpts = computeCheckboxOpts.value;
-      const { showHeader, headerTitle } = checkboxOpts;
-      const dragOpts = computeDragOpts.value;
-      const { trigger, isCrossListDrag } = dragOpts;
-      const rowOpts = computeRowOpts.value;
-      const { isHover, padding } = rowOpts;
-      const isDrag = computeIsDrag.value;
-      const scrollbarOpts = computeScrollbarOpts.value;
-      const scrollXVisible = computeScrollXVisible.value;
-      const scrollYVisible = computeScrollYVisible.value;
-      const scrollbarXToTop = computeScrollbarXToTop.value;
-      const scrollbarYToLeft = computeScrollbarYToLeft.value;
-      const scrollXAutoHide = computeScrollXAutoHide.value;
-      const scrollYAutoHide = computeScrollYAutoHide.value;
-      const scrollbarWrapperClss = computeScrollbarWrapperClss.value;
-      const showDefChekboxHead = showCheckbox && showHeader !== false;
-      const leOns = {};
-      if (isCrossListDrag && !rowList.length) {
-        leOns.onDragover = $xeList.handleCrossListRowDragoverEmptyEvent;
-      }
-      return h(
-        "div",
-        {
-          ref: refElem,
-          class: [
-            "vxe-list",
-            isVScrollbar ? `ov-x--${scrollXVisible === false ? "hidden" : "visible"}` : "",
-            isVScrollbar ? `ov-y--${scrollYVisible === false ? "hidden" : "visible"}` : "",
-            isVScrollbar ? `sx-pos--${scrollbarXToTop ? "top" : "bottom"}` : "",
-            isVScrollbar ? `sy-pos--${scrollbarYToLeft ? "left" : "right"}` : "",
-            className ? XEUtils.isFunction(className) ? className({ $list: $xeList }) : className : "",
-            {
-              [`size--${vSize}`]: vSize,
-              "is--virtual-scrollbar": isVScrollbar,
-              "ov-padding": isVScrollbar && scrollbarOpts.padding,
-              "ov-x--auto-hide": isVScrollbar && scrollXAutoHide,
-              "ov-y--auto-hide": isVScrollbar && scrollYAutoHide,
-              "overflow-y": yThumbHeight,
-              "overflow-x": xThumbWidth,
-              "is--drag": isDrag,
-              "is--loading": loading
+            if ($oldList && oldRow) {
+              const dragRow = oldRow;
+              let dragOffsetIndex = -1;
+              if (prevDragRow) {
+                dragOffsetIndex = prevDragPos === "bottom" ? 1 : 0;
+              }
+              const dragParams = {
+                oldRow: dragRow,
+                newRow: prevDragRow,
+                dragRow,
+                dragPos: prevDragPos,
+                offsetIndex: dragOffsetIndex
+              };
+              const errRest = {
+                status: false
+              };
+              Promise.resolve(dragEndMethod ? dragEndMethod(dragParams) : true).then((status) => {
+                if (!status) {
+                  if ($oldList) {
+                    if ($oldList.xID !== $xeList.xID) {
+                      $oldList.handleCrossListRowDragCancelEvent(evnt);
+                    }
+                  }
+                  handleRowDragEndClearStatus();
+                  return errRest;
+                }
+                let insertRest = Promise.resolve();
+                const dragList = [dragRow];
+                $oldList.handleCrossListRowDragFinishEvent(evnt);
+                if (prevDragRow) {
+                  if (prevDragPos === "bottom") {
+                    insertRest = $xeList.insertNextAt(dragList, prevDragRow);
+                  } else {
+                    insertRest = $xeList.insertAt(dragList, prevDragRow);
+                  }
+                } else {
+                  insertRest = $xeList.insert(dragList);
+                }
+                $xeList.dispatchEvent(
+                  "row-insert-dragend",
+                  {
+                    oldRow,
+                    newRow: prevDragRow,
+                    dragRow,
+                    dragPos: prevDragPos,
+                    offsetIndex: dragOffsetIndex
+                  },
+                  evnt
+                );
+                clearRowDragData();
+                insertRest.then(() => {
+                  const { rowList } = reactData;
+                  const { rowMaps } = internalData;
+                  const oldRowid = getRowId(dragRow);
+                  const oldRowRest = rowMaps[oldRowid];
+                  let dragRowHeight = 0;
+                  let rsIndex = -1;
+                  if (oldRowRest) {
+                    if (animation) {
+                      const oldItemEl = el.querySelector(`.vxe-list--row[rowid="${oldRowid}"]`);
+                      const targetItemEl = oldItemEl;
+                      if (targetItemEl) {
+                        dragRowHeight = targetItemEl.offsetHeight;
+                      }
+                    }
+                    rsIndex = oldRowRest.$index;
+                  }
+                  const dragRangeList = rsIndex > -1 ? rowList.slice(rsIndex) : [];
+                  if (animation && dragRowHeight && dragRangeList.length) {
+                    const wrapperEl = el;
+                    const dtClss = [];
+                    dragRangeList.forEach((item) => {
+                      const rowid = getRowId(item);
+                      dtClss.push(`.vxe-list--row[rowid="${rowid}"]`);
+                    });
+                    const dtTrList = wrapperEl.querySelectorAll(dtClss.join(","));
+                    moveRowAnimateToTb(dtTrList, -dragRowHeight);
+                  }
+                });
+              });
             }
-          ],
-          style: wrapperStyles,
-          ...leOns
+          }
         },
-        [
-          headerSlot || showDefChekboxHead ? h(
+        hideCrossListRowDropClearStatus() {
+          hideDropTip();
+        }
+      };
+      const bindScrollbarResize = () => {
+        const { scrollObserver } = internalData;
+        const isVScrollbar = computeIsVScrollbar.value;
+        if (isVScrollbar) {
+          if (!scrollObserver) {
+            const el = refElem.value;
+            const viewSpaceEl = refVirtualSpaceElem.value;
+            const viewInnerEl = refVirtualBody.value;
+            const scrollObserver2 = globalResize.create(() => {
+              reScrollFlag.value++;
+            });
+            if (el) {
+              scrollObserver2.observe(el);
+            }
+            if (viewSpaceEl) {
+              scrollObserver2.observe(viewSpaceEl);
+            }
+            if (viewInnerEl) {
+              scrollObserver2.observe(viewInnerEl);
+            }
+            internalData.scrollObserver = scrollObserver2;
+          }
+        }
+      };
+      Object.assign($xeList, listMethods, listPrivateMethods);
+      const renderDragTip = () => {
+        const { dragRow, dragTipText } = reactData;
+        const dragOpts = computeDragOpts.value;
+        const isDrag = computeIsDrag.value;
+        const dRow = dragRow;
+        if (isDrag) {
+          return h(
             "div",
             {
-              ref: refHeaderElem,
-              class: "vxe-list--header-wrapper"
+              class: "vxe-list--drag-wrapper"
             },
             [
-              showDefChekboxHead ? h(
+              h("div", {
+                ref: refDragRowLineElem,
+                class: [
+                  "vxe-list--drag-row-line",
+                  {
+                    "is--guides": dragOpts.showGuidesStatus
+                  }
+                ]
+              }),
+              dRow && dragOpts.showDragTip ? h(
                 "div",
                 {
-                  class: "vxe-list--header-left"
+                  ref: refDragTipElem,
+                  class: "vxe-list--drag-sort-tip"
                 },
                 [
                   h(
                     "div",
                     {
-                      class: [
-                        "vxe-list--checkbox-header",
-                        {
-                          "is--checked": isAllChecked,
-                          "is--indeterminate": isAllIndeterminate
-                        }
-                      ],
-                      onClick: changeCheckboxAllEvent
+                      class: "vxe-list--drag-sort-tip-wrapper"
                     },
                     [
-                      h("span", {
-                        class: ["vxe-checkbox--icon", isAllChecked ? getIcon().CHECKBOX_CHECKED : isAllIndeterminate ? getIcon().CHECKBOX_INDETERMINATE : getIcon().CHECKBOX_UNCHECKED]
-                      }),
                       h(
-                        "span",
+                        "div",
+                        {
+                          class: "vxe-list--drag-sort-tip-status"
+                        },
+                        [
+                          h("span", {
+                            class: ["vxe-list--drag-sort-tip-normal-status", getIcon().LIST_DRAG_STATUS_NODE]
+                          }),
+                          h("span", {
+                            class: ["vxe-list--drag-sort-tip-disabled-status", getIcon().LIST_DRAG_DISABLED]
+                          })
+                        ]
+                      ),
+                      h(
+                        "div",
                         {
-                          class: "vxe-checkbox--label"
+                          class: "vxe-list--drag-sort-tip-content"
                         },
-                        XEUtils.eqNull(headerTitle) ? getI18n("vxe.list.allChecked") : getText(headerTitle)
+                        dragTipText
                       )
                     ]
                   )
                 ]
-              ) : renderEmptyElement($xeList),
-              headerSlot ? h(
-                "div",
-                {
-                  class: "vxe-list--header-content"
-                },
-                headerSlot({ items: rowList, $list: $xeList })
               ) : renderEmptyElement($xeList)
             ]
-          ) : renderEmptyElement($xeList),
-          h(
+          );
+        }
+        return renderEmptyElement($xeList);
+      };
+      const renderRadio = (row, rowid, isDisabled, isChecked) => {
+        const { showRadio } = props;
+        const radioOpts = computeRadioOpts.value;
+        const { showIcon, visibleMethod } = radioOpts;
+        const isVisible = !visibleMethod || visibleMethod({ $list: $xeList, row });
+        if (showRadio && showIcon && isVisible) {
+          return h(
             "div",
             {
-              ref: refVirtualWrapper,
-              class: "vxe-list--virtual-wrapper",
-              style: virtualStyles,
-              onScroll: scrollEvent
+              key: "ct2",
+              class: [
+                "vxe-list--radio-option",
+                {
+                  "is--checked": isChecked,
+                  "is--disabled": isDisabled
+                }
+              ],
+              onClick(evnt) {
+                if (!isDisabled) {
+                  changeRadioEvent(evnt, row);
+                }
+              }
             },
             [
-              h("div", {
-                ref: refVirtualSpaceElem,
-                class: "vxe-list--y-space",
-                style: {
-                  height: bodyHeight ? `${bodyHeight}px` : ""
-                }
-              }),
-              h(
-                "div",
-                {
-                  ref: refVirtualBody,
-                  class: [
-                    "vxe-list--body",
-                    {
-                      "trigger--row": trigger === "row",
-                      "checkbox--highlight": checkboxOpts.highlight,
-                      "radio--highlight": radioOpts.highlight,
-                      "row--hover": isHover,
-                      "is--padding": padding
-                    }
-                  ],
-                  style: {
-                    marginTop: topSpaceHeight ? `${topSpaceHeight}px` : ""
-                  }
-                },
-                defaultSlot ? defaultSlot({ items: rowList, $list: $xeList }) : rowList.map((row, i) => renderRow(row, i))
-              )
+              h("span", {
+                class: ["vxe-radio--icon", isChecked ? getIcon().RADIO_CHECKED : isDisabled ? getIcon().RADIO_DISABLED_UNCHECKED : getIcon().RADIO_UNCHECKED]
+              })
             ]
-          ),
-          footerSlot ? h(
+          );
+        }
+        return renderEmptyElement($xeList);
+      };
+      const renderCheckbox = (row, rowid, isDisabled, isChecked) => {
+        const { showCheckbox } = props;
+        const checkboxOpts = computeCheckboxOpts.value;
+        const { showIcon, visibleMethod } = checkboxOpts;
+        const isVisible = !visibleMethod || visibleMethod({ $list: $xeList, row });
+        if (showCheckbox && showIcon && isVisible) {
+          return h(
             "div",
             {
-              ref: refFooterElem,
-              class: "vxe-list--footer-wrapper"
+              key: "ct3",
+              class: [
+                "vxe-list--checkbox-option",
+                {
+                  "is--checked": isChecked,
+                  "is--disabled": isDisabled
+                }
+              ],
+              onClick(evnt) {
+                if (!isDisabled) {
+                  changeCheckboxEvent(evnt, row);
+                }
+              }
             },
-            footerSlot({ items: rowList, $list: $xeList })
-          ) : renderEmptyElement($xeList),
-          /**
-           * 滚动条
-           */
-          isVScrollbar ? h(
+            [
+              h("span", {
+                class: ["vxe-checkbox--icon", isChecked ? getIcon().CHECKBOX_CHECKED : isDisabled ? getIcon().CHECKBOX_DISABLED_UNCHECKED : getIcon().CHECKBOX_UNCHECKED]
+              })
+            ]
+          );
+        }
+        return renderEmptyElement($xeList);
+      };
+      const renderRow = (row, rowIndex) => {
+        const { showRadio, showCheckbox } = props;
+        const { selectRadioRow, currRowFlag, updateCheckboxFlag } = reactData;
+        const { selectCheckboxMaps, currentRow } = internalData;
+        const contentSlot = slots.content;
+        const extraSlot = slots.extra;
+        const dragOpts = computeDragOpts.value;
+        const { trigger, icon, disabledMethod, visibleMethod } = dragOpts;
+        const radioOpts = computeRadioOpts.value;
+        const checkboxOpts = computeCheckboxOpts.value;
+        const rowOpts = computeRowOpts.value;
+        const { useKey, contentField, className: rowClassName, isCurrent } = rowOpts;
+        const isDrag = computeIsDrag.value;
+        const keyField = computeKeyField.value;
+        const isRowFnCls = rowClassName && XEUtils.isFunction(rowClassName);
+        const hasKey = keyField || useKey || isDrag || isCurrent || showRadio || showCheckbox;
+        const rowKey = hasKey && keyField ? getRowIdByField(row, keyField) : "";
+        const rowid = enModelValue(rowKey);
+        const rowParams = { row, $list: $xeList };
+        let isRadioChecked = false;
+        let isRadioDisabled = false;
+        if (showRadio) {
+          isRadioChecked = selectRadioRow && (row === selectRadioRow || eqRowByKey(selectRadioRow, rowKey));
+          isRadioDisabled = radioOpts.checkMethod ? !radioOpts.checkMethod({ $list: $xeList, row }) : false;
+        }
+        let isCheckboxChecked = false;
+        let isCheckboxDisabled = false;
+        if (showCheckbox) {
+          isCheckboxChecked = !!(updateCheckboxFlag && selectCheckboxMaps[rowid]);
+          isCheckboxDisabled = checkboxOpts.checkMethod ? !checkboxOpts.checkMethod({ $list: $xeList, row }) : false;
+        }
+        const ctVNs = [];
+        if (showRadio) {
+          ctVNs.push(renderRadio(row, rowid, isRadioDisabled, isRadioChecked));
+        }
+        if (showCheckbox) {
+          ctVNs.push(renderCheckbox(row, rowid, isCheckboxDisabled, isCheckboxChecked));
+        }
+        let isDragDisabled = false;
+        if (isDrag && keyField && (!visibleMethod || visibleMethod(rowParams))) {
+          const handleOns = {};
+          if (trigger !== "row") {
+            isDragDisabled = !!(disabledMethod && disabledMethod(rowParams));
+            handleOns.onMousedown = (evnt) => {
+              if (!isDragDisabled) {
+                handleRowDragMousedownEvent(evnt, rowParams);
+              }
+            };
+            handleOns.onMouseup = handleRowDragMouseupEvent;
+          }
+          ctVNs.push(
+            h(
+              "div",
+              {
+                key: "ct1",
+                class: "vxe-list--row-drag"
+              },
+              [
+                h(
+                  "span",
+                  {
+                    class: "vxe-list--drag-handle",
+                    ...handleOns
+                  },
+                  [
+                    h("i", {
+                      class: icon || getIcon().LIST_DRAG
+                    })
+                  ]
+                )
+              ]
+            )
+          );
+        }
+        ctVNs.push(
+          h(
             "div",
             {
-              class: scrollbarWrapperClss
+              key: "ct5",
+              class: "vxe-list--row-content"
             },
-            [
-              scrollXVisible === false ? renderEmptyElement($xeList) : h(
-                "div",
-                {
-                  ref: refTrackXElem,
-                  class: "vxe-scrollbar--track-x",
-                  onClick: clickTrackXEvent
-                },
-                [
-                  h("div", {
-                    ref: refThumbXElem,
-                    class: "vxe-scrollbar--thumb-x",
-                    onPointerdown: pointerdownThumbXEvent,
-                    onPointermove: pointermoveThumbXEvent,
-                    onPointerup: cleatPointerThumbEvent,
-                    onPointercancel: cleatPointerThumbEvent,
-                    onLostpointercapture: cleatPointerThumbEvent
-                  })
-                ]
-              ),
-              scrollYVisible === false ? renderEmptyElement($xeList) : h(
-                "div",
-                {
-                  ref: refTrackYElem,
-                  class: "vxe-scrollbar--track-y",
-                  onClick: clickTrackYEvent
-                },
-                [
-                  h("div", {
-                    ref: refThumbYElem,
-                    class: "vxe-scrollbar--thumb-y",
-                    onPointerdown: pointerdownThumbYEvent,
-                    onPointermove: pointermoveThumbYEvent,
-                    onPointerup: cleatPointerThumbEvent,
-                    onPointercancel: cleatPointerThumbEvent,
-                    onLostpointercapture: cleatPointerThumbEvent
-                  })
-                ]
-              )
-            ]
-          ) : renderEmptyElement($xeList),
-          /**
-           * 拖拽提示
-           */
-          renderDragTip(),
-          /**
-           * 加载中
-           */
-          h(VxeLoadingComponent, {
-            class: "vxe-list--loading",
-            modelValue: loading
-          })
-        ]
+            contentSlot ? contentSlot(rowParams) : contentField ? getText(row[contentField]) : ""
+          )
+        );
+        if (extraSlot) {
+          ctVNs.push(
+            h(
+              "div",
+              {
+                key: "ct7",
+                class: "vxe-list--row-extra"
+              },
+              extraSlot(rowParams)
+            )
+          );
+        }
+        const rowOns = {
+          onMousedown(evnt) {
+            handleRowMousedownEvent(evnt, row);
+          },
+          onMouseup: handleRowDragMouseupEvent,
+          onClick(evnt) {
+            handleRowClickEvent(evnt, row);
+          },
+          onDblclick(evnt) {
+            handleRowDblclickEvent(evnt, row);
+          },
+          onContextmenu(evnt) {
+            handleContextmenuEvent(evnt, row);
+          }
+        };
+        if (isDrag) {
+          rowOns.onDragstart = handleRowDragDragstartEvent;
+          rowOns.onDragend = handleRowDragDragendEvent;
+          rowOns.onDragover = handleRowDragDragoverEvent;
+        }
+        return h(
+          "div",
+          {
+            key: hasKey && keyField ? rowid : rowIndex,
+            class: [
+              "vxe-list--row",
+              isRowFnCls ? rowClassName(rowParams) : rowClassName || "",
+              {
+                "is--drag-disabled": isDragDisabled,
+                "is--current": currRowFlag && currentRow && eqRowByKey(currentRow, rowKey),
+                "is-radio--disabled": isRadioDisabled,
+                "is-radio--checked": isRadioChecked,
+                "is-checkbox--disabled": isCheckboxDisabled,
+                "is-checkbox--checked": isCheckboxChecked
+              }
+            ],
+            rowid: hasKey && keyField ? rowid : void 0,
+            ...rowOns
+          },
+          ctVNs
+        );
+      };
+      const renderVN = () => {
+        const { showCheckbox, className, loading } = props;
+        const { bodyHeight, topSpaceHeight, rowList, isAllChecked, isAllIndeterminate, xThumbWidth, yThumbHeight } = reactData;
+        const defaultSlot = slots.default;
+        const headerSlot = slots.header;
+        const footerSlot = slots.footer;
+        const vSize = computeSize.value;
+        const isVScrollbar = computeIsVScrollbar.value;
+        const wrapperStyles = computeWrapperStyles.value;
+        const virtualStyles = computeVirtualStyles.value;
+        const radioOpts = computeRadioOpts.value;
+        const checkboxOpts = computeCheckboxOpts.value;
+        const { showHeader, headerTitle } = checkboxOpts;
+        const dragOpts = computeDragOpts.value;
+        const { trigger, isCrossListDrag } = dragOpts;
+        const rowOpts = computeRowOpts.value;
+        const { isHover, padding } = rowOpts;
+        const isDrag = computeIsDrag.value;
+        const scrollbarOpts = computeScrollbarOpts.value;
+        const scrollXVisible = computeScrollXVisible.value;
+        const scrollYVisible = computeScrollYVisible.value;
+        const scrollbarXToTop = computeScrollbarXToTop.value;
+        const scrollbarYToLeft = computeScrollbarYToLeft.value;
+        const scrollXAutoHide = computeScrollXAutoHide.value;
+        const scrollYAutoHide = computeScrollYAutoHide.value;
+        const scrollbarWrapperClss = computeScrollbarWrapperClss.value;
+        const showDefChekboxHead = showCheckbox && showHeader !== false;
+        const leOns = {};
+        if (isCrossListDrag && !rowList.length) {
+          leOns.onDragover = $xeList.handleCrossListRowDragoverEmptyEvent;
+        }
+        return h(
+          "div",
+          {
+            ref: refElem,
+            class: [
+              "vxe-list",
+              isVScrollbar ? `ov-x--${scrollXVisible === false ? "hidden" : "visible"}` : "",
+              isVScrollbar ? `ov-y--${scrollYVisible === false ? "hidden" : "visible"}` : "",
+              isVScrollbar ? `sx-pos--${scrollbarXToTop ? "top" : "bottom"}` : "",
+              isVScrollbar ? `sy-pos--${scrollbarYToLeft ? "left" : "right"}` : "",
+              className ? XEUtils.isFunction(className) ? className({ $list: $xeList }) : className : "",
+              {
+                [`size--${vSize}`]: vSize,
+                "is--virtual-scrollbar": isVScrollbar,
+                "ov-padding": isVScrollbar && scrollbarOpts.padding,
+                "ov-x--auto-hide": isVScrollbar && scrollXAutoHide,
+                "ov-y--auto-hide": isVScrollbar && scrollYAutoHide,
+                "overflow-y": yThumbHeight,
+                "overflow-x": xThumbWidth,
+                "is--drag": isDrag,
+                "is--loading": loading
+              }
+            ],
+            style: wrapperStyles,
+            ...leOns
+          },
+          [
+            headerSlot || showDefChekboxHead ? h(
+              "div",
+              {
+                ref: refHeaderElem,
+                class: "vxe-list--header-wrapper"
+              },
+              [
+                showDefChekboxHead ? h(
+                  "div",
+                  {
+                    class: "vxe-list--header-left"
+                  },
+                  [
+                    h(
+                      "div",
+                      {
+                        class: [
+                          "vxe-list--checkbox-header",
+                          {
+                            "is--checked": isAllChecked,
+                            "is--indeterminate": isAllIndeterminate
+                          }
+                        ],
+                        onClick: changeCheckboxAllEvent
+                      },
+                      [
+                        h("span", {
+                          class: ["vxe-checkbox--icon", isAllChecked ? getIcon().CHECKBOX_CHECKED : isAllIndeterminate ? getIcon().CHECKBOX_INDETERMINATE : getIcon().CHECKBOX_UNCHECKED]
+                        }),
+                        h(
+                          "span",
+                          {
+                            class: "vxe-checkbox--label"
+                          },
+                          XEUtils.eqNull(headerTitle) ? getI18n("vxe.list.allChecked") : getText(headerTitle)
+                        )
+                      ]
+                    )
+                  ]
+                ) : renderEmptyElement($xeList),
+                headerSlot ? h(
+                  "div",
+                  {
+                    class: "vxe-list--header-content"
+                  },
+                  headerSlot({ items: rowList, $list: $xeList })
+                ) : renderEmptyElement($xeList)
+              ]
+            ) : renderEmptyElement($xeList),
+            h(
+              "div",
+              {
+                ref: refVirtualWrapper,
+                class: "vxe-list--virtual-wrapper",
+                style: virtualStyles,
+                onScroll: scrollEvent
+              },
+              [
+                h("div", {
+                  ref: refVirtualSpaceElem,
+                  class: "vxe-list--y-space",
+                  style: {
+                    height: bodyHeight ? `${bodyHeight}px` : ""
+                  }
+                }),
+                h(
+                  "div",
+                  {
+                    ref: refVirtualBody,
+                    class: [
+                      "vxe-list--body",
+                      {
+                        "trigger--row": trigger === "row",
+                        "checkbox--highlight": checkboxOpts.highlight,
+                        "radio--highlight": radioOpts.highlight,
+                        "row--hover": isHover,
+                        "is--padding": padding
+                      }
+                    ],
+                    style: {
+                      marginTop: topSpaceHeight ? `${topSpaceHeight}px` : ""
+                    }
+                  },
+                  defaultSlot ? defaultSlot({ items: rowList, $list: $xeList }) : rowList.map((row, i) => renderRow(row, i))
+                )
+              ]
+            ),
+            footerSlot ? h(
+              "div",
+              {
+                ref: refFooterElem,
+                class: "vxe-list--footer-wrapper"
+              },
+              footerSlot({ items: rowList, $list: $xeList })
+            ) : renderEmptyElement($xeList),
+            /**
+             * 滚动条
+             */
+            isVScrollbar ? h(
+              "div",
+              {
+                class: scrollbarWrapperClss
+              },
+              [
+                scrollXVisible === false ? renderEmptyElement($xeList) : h(
+                  "div",
+                  {
+                    ref: refTrackXElem,
+                    class: "vxe-scrollbar--track-x",
+                    onClick: clickTrackXEvent
+                  },
+                  [
+                    h("div", {
+                      ref: refThumbXElem,
+                      class: "vxe-scrollbar--thumb-x",
+                      onPointerdown: pointerdownThumbXEvent,
+                      onPointermove: pointermoveThumbXEvent,
+                      onPointerup: cleatPointerThumbEvent,
+                      onPointercancel: cleatPointerThumbEvent,
+                      onLostpointercapture: cleatPointerThumbEvent
+                    })
+                  ]
+                ),
+                scrollYVisible === false ? renderEmptyElement($xeList) : h(
+                  "div",
+                  {
+                    ref: refTrackYElem,
+                    class: "vxe-scrollbar--track-y",
+                    onClick: clickTrackYEvent
+                  },
+                  [
+                    h("div", {
+                      ref: refThumbYElem,
+                      class: "vxe-scrollbar--thumb-y",
+                      onPointerdown: pointerdownThumbYEvent,
+                      onPointermove: pointermoveThumbYEvent,
+                      onPointerup: cleatPointerThumbEvent,
+                      onPointercancel: cleatPointerThumbEvent,
+                      onLostpointercapture: cleatPointerThumbEvent
+                    })
+                  ]
+                )
+              ]
+            ) : renderEmptyElement($xeList),
+            /**
+             * 拖拽提示
+             */
+            renderDragTip(),
+            /**
+             * 加载中
+             */
+            h(VxeLoadingComponent, {
+              class: "vxe-list--loading",
+              modelValue: loading
+            })
+          ]
+        );
+      };
+      const dataFlag = ref(0);
+      watch(
+        () => props.data ? props.data.length : -1,
+        () => {
+          dataFlag.value++;
+        }
       );
-    };
-    const dataFlag = ref(0);
-    watch(
-      () => props.data ? props.data.length : -1,
-      () => {
-        dataFlag.value++;
-      }
-    );
-    watch(
-      () => props.data,
-      () => {
-        dataFlag.value++;
-      }
-    );
-    watch(dataFlag, () => {
-      loadData(props.data || []);
-    });
-    const reScrollFlag = ref(0);
-    const reLayoutFlag = ref(0);
-    watch(
-      () => props.height,
-      () => {
-        reLayoutFlag.value++;
-      }
-    );
-    watch(
-      () => props.maxHeight,
-      () => {
-        reLayoutFlag.value++;
-      }
-    );
-    watch(
-      () => props.syncResize,
-      () => {
-        reLayoutFlag.value++;
-      }
-    );
-    watch(computeIsVScrollbar, () => {
-      nextTick(() => {
-        bindScrollbarResize();
-        nextTick(() => {
+      watch(
+        () => props.data,
+        () => {
+          dataFlag.value++;
+        }
+      );
+      watch(dataFlag, () => {
+        loadData(props.data || []);
+      });
+      const reScrollFlag = ref(0);
+      const reLayoutFlag = ref(0);
+      watch(
+        () => props.height,
+        () => {
+          reLayoutFlag.value++;
+        }
+      );
+      watch(
+        () => props.maxHeight,
+        () => {
+          reLayoutFlag.value++;
+        }
+      );
+      watch(
+        () => props.syncResize,
+        () => {
           reLayoutFlag.value++;
+        }
+      );
+      watch(computeIsVScrollbar, () => {
+        nextTick(() => {
+          bindScrollbarResize();
+          nextTick(() => {
+            reLayoutFlag.value++;
+          });
         });
       });
-    });
-    watch(computeRowHeight, () => {
-      reLayoutFlag.value++;
-    });
-    watch(computeScrollYWidth, () => {
-      reLayoutFlag.value++;
-    });
-    watch(computeScrollXHeight, () => {
-      reLayoutFlag.value++;
-    });
-    watch(computeScrollXVisible, () => {
-      nextTick(() => {
+      watch(computeRowHeight, () => {
         reLayoutFlag.value++;
       });
-    });
-    watch(computeScrollYVisible, () => {
-      nextTick(() => {
+      watch(computeScrollYWidth, () => {
         reLayoutFlag.value++;
       });
-    });
-    watch(reLayoutFlag, () => {
-      recalculate().then(() => {
-        recalculate();
+      watch(computeScrollXHeight, () => {
+        reLayoutFlag.value++;
       });
-    });
-    watch(reScrollFlag, () => {
-      updateScrollbar().then(() => {
-        updateScrollbar();
+      watch(computeScrollXVisible, () => {
+        nextTick(() => {
+          reLayoutFlag.value++;
+        });
       });
-    });
-    watch(
-      () => props.checkRowKey,
-      () => {
-        updateRadioModeValue();
-      }
-    );
-    const checkKeyFlag = ref(0);
-    watch(
-      () => props.checkRowKeys ? props.checkRowKeys.length : -1,
-      () => {
-        checkKeyFlag.value++;
-      }
-    );
-    watch(
-      () => props.checkRowKeys,
-      () => {
-        checkKeyFlag.value++;
-      }
-    );
-    watch(checkKeyFlag, () => {
-      updateCheckboxModeValue();
-    });
-    onActivated(() => {
-      recalculate().then(() => {
-        refreshScroll();
+      watch(computeScrollYVisible, () => {
+        nextTick(() => {
+          reLayoutFlag.value++;
+        });
+      });
+      watch(reLayoutFlag, () => {
+        recalculate().then(() => {
+          recalculate();
+        });
       });
-    });
-    nextTick(() => {
-      loadData(props.data || []);
-    });
-    onMounted(() => {
-      const { showSeq, showRadio, showCheckbox, autoResize } = props;
-      const rowOpts = computeRowOpts.value;
-      const { useKey } = rowOpts;
-      const isDrag = computeIsDrag.value;
-      const keyField = computeKeyField.value;
-      if (!keyField) {
-        if (showSeq) {
-          errLog("vxe.error.reqSupportProp", ["show-seq", "row-config.keyField"]);
+      watch(reScrollFlag, () => {
+        updateScrollbar().then(() => {
+          updateScrollbar();
+        });
+      });
+      watch(
+        () => props.checkRowKey,
+        () => {
+          updateRadioModeValue();
         }
-        if (showRadio) {
-          errLog("vxe.error.reqSupportProp", ["show-radio", "row-config.keyField"]);
+      );
+      const checkKeyFlag = ref(0);
+      watch(
+        () => props.checkRowKeys ? props.checkRowKeys.length : -1,
+        () => {
+          checkKeyFlag.value++;
         }
-        if (showCheckbox) {
-          errLog("vxe.error.reqSupportProp", ["show-checkbox", "row-config.keyField"]);
+      );
+      watch(
+        () => props.checkRowKeys,
+        () => {
+          checkKeyFlag.value++;
         }
-        if (isDrag) {
-          errLog("vxe.error.reqSupportProp", ["drag-config", "row-config.keyField"]);
+      );
+      watch(checkKeyFlag, () => {
+        updateCheckboxModeValue();
+      });
+      onActivated(() => {
+        recalculate().then(() => {
+          refreshScroll();
+        });
+      });
+      nextTick(() => {
+        loadData(props.data || []);
+      });
+      onMounted(() => {
+        const { showSeq, showRadio, showCheckbox, autoResize } = props;
+        const rowOpts = computeRowOpts.value;
+        const { useKey } = rowOpts;
+        const isDrag = computeIsDrag.value;
+        const keyField = computeKeyField.value;
+        if (!keyField) {
+          if (showSeq) {
+            errLog("vxe.error.reqSupportProp", ["show-seq", "row-config.keyField"]);
+          }
+          if (showRadio) {
+            errLog("vxe.error.reqSupportProp", ["show-radio", "row-config.keyField"]);
+          }
+          if (showCheckbox) {
+            errLog("vxe.error.reqSupportProp", ["show-checkbox", "row-config.keyField"]);
+          }
+          if (isDrag) {
+            errLog("vxe.error.reqSupportProp", ["drag-config", "row-config.keyField"]);
+          }
         }
-      }
-      if (useKey && !keyField) {
-        errLog("vxe.error.reqSupportProp", ["row-config.useKey", "row-config.keyField"]);
-      }
-      if (autoResize) {
-        const el = refElem.value;
-        const parentEl = getParentElem();
-        const resizeObserver = globalResize.create(() => {
-          if (props.autoResize) {
-            reLayoutFlag.value++;
+        if (useKey && !keyField) {
+          errLog("vxe.error.reqSupportProp", ["row-config.useKey", "row-config.keyField"]);
+        }
+        if (autoResize) {
+          const el = refElem.value;
+          const parentEl = getParentElem();
+          const resizeObserver = globalResize.create(() => {
+            if (props.autoResize) {
+              reLayoutFlag.value++;
+            }
+          });
+          if (el) {
+            resizeObserver.observe(el);
           }
+          if (parentEl) {
+            resizeObserver.observe(parentEl);
+          }
+          internalData.resizeObserver = resizeObserver;
+        }
+        reLayoutFlag.value++;
+        bindScrollbarResize();
+        globalEvents.on($xeList, "resize", () => {
+          reLayoutFlag.value++;
         });
-        if (el) {
-          resizeObserver.observe(el);
+      });
+      onBeforeUnmount(() => {
+        const { scrollObserver, resizeObserver } = internalData;
+        if (resizeObserver) {
+          resizeObserver.disconnect();
         }
-        if (parentEl) {
-          resizeObserver.observe(parentEl);
+        if (scrollObserver) {
+          scrollObserver.disconnect();
         }
-        internalData.resizeObserver = resizeObserver;
-      }
-      reLayoutFlag.value++;
-      bindScrollbarResize();
-      globalEvents.on($xeList, "resize", () => {
-        reLayoutFlag.value++;
+        globalEvents.off($xeList, "resize");
+        XEUtils.assign(reactData, createReactData());
+        XEUtils.assign(internalData, createInternalData());
       });
-    });
-    onBeforeUnmount(() => {
-      const { scrollObserver, resizeObserver } = internalData;
-      if (resizeObserver) {
-        resizeObserver.disconnect();
-      }
-      if (scrollObserver) {
-        scrollObserver.disconnect();
-      }
-      globalEvents.off($xeList, "resize");
-      XEUtils.assign(reactData, createReactData());
-      XEUtils.assign(internalData, createInternalData());
-    });
-    $xeList.renderVN = renderVN;
-    return $xeList;
-  },
-  render() {
-    return this.renderVN();
-  }
-});
+      $xeList.renderVN = renderVN;
+      return $xeList;
+    },
+    render() {
+      return this.renderVN();
+    }
+  })
+);
 export {
   list_default as default
 };