vxe-pc-ui 4.15.11 → 4.15.13

package/lib/list/src/list.js

@@ -8,24 +8,51 @@ var _vue = require("vue");
 var _comp = require("../../ui/src/comp");
 var _xeUtils = _interopRequireDefault(require("xe-utils"));
 var _ui = require("../../ui");
+var _store = require("./store");
 var _dom = require("../../ui/src/dom");
+var _utils = require("../../ui/src/utils");
+var _log = require("../../ui/src/log");
+var _anime = require("../../ui/src/anime");
 var _loading = _interopRequireDefault(require("../../loading/src/loading"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const {
+  errLog
+} = (0, _log.createComponentLog)('tree');
+function getRowKeyByField(row, keyField) {
+  return row ? '' + (row[keyField] || '') : '';
+}
+function getRowIdByField(row, keyField) {
+  if (!row) {
+    return '';
+  }
+  const rowKey = getRowKeyByField(row, keyField);
+  return (0, _utils.enModelValue)(rowKey);
+}
 function createReactData() {
   return {
     scrollYLoad: false,
     bodyHeight: 0,
+    headHeight: 0,
+    footHeight: 0,
     customHeight: 0,
     customMaxHeight: 0,
     parentHeight: 0,
     topSpaceHeight: 0,
-    items: []
+    rowList: [],
+    selectRadioRow: null,
+    currRowFlag: 1,
+    updateCheckboxFlag: 1,
+    isAllChecked: false,
+    isAllIndeterminate: false,
+    dragRow: null,
+    dragTipText: ''
   };
 }
 function createInternalData() {
   return {
     resizeObserver: undefined,
     fullData: [],
+    fullKeyMaps: {},
     lastScrollLeft: 0,
     lastScrollTop: 0,
     scrollYStore: {
@@ -34,7 +61,11 @@ function createInternalData() {
       visibleSize: 0,
       offsetSize: 0,
       rowHeight: 0
-    }
+    },
+    currentRow: null,
+    selectCheckboxMaps: {}
+    // prevDragRow: null,
+    // prevDragPos: ''
   };
 }
 var _default = exports.default = (0, _comp.defineVxeComponent)({
@@ -54,10 +85,24 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
       default: () => (0, _ui.getConfig)().list.autoResize
     },
     syncResize: [Boolean, String, Number],
+    showRadio: {
+      type: Boolean,
+      default: () => (0, _ui.getConfig)().list.showRadio
+    },
+    checkRowKey: [String, Number],
+    radioConfig: Object,
+    showCheckbox: {
+      type: Boolean,
+      default: () => (0, _ui.getConfig)().list.showCheckbox
+    },
+    checkRowKeys: Array,
+    checkboxConfig: Object,
+    rowConfig: Object,
+    dragConfig: Object,
     virtualYConfig: Object,
     scrollY: Object
   },
-  emits: ['scroll'],
+  emits: ['update:checkRowKey', 'update:checkRowKeys', 'row-click', 'row-dblclick', 'current-change', 'radio-change', 'checkbox-change', 'checkbox-all', 'scroll', 'row-dragstart', 'row-dragover', 'row-dragend'],
   setup(props, context) {
     const {
       slots,
@@ -70,9 +115,14 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
     } = (0, _ui.useSize)(props);
     const reactData = (0, _vue.reactive)(createReactData());
     const internalData = createInternalData();
+    const crossListDragRowInfo = (0, _store.getCrossListDragRowInfo)();
     const refElem = (0, _vue.ref)();
+    const refHeaderElem = (0, _vue.ref)();
+    const refFooterElem = (0, _vue.ref)();
     const refVirtualWrapper = (0, _vue.ref)();
     const refVirtualBody = (0, _vue.ref)();
+    const refDragRowLineElem = (0, _vue.ref)();
+    const refDragTipElem = (0, _vue.ref)();
     const refMaps = {
       refElem
     };
@@ -84,24 +134,71 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
       internalData,
       getRefMaps: () => refMaps
     };
+    const computeRowOpts = (0, _vue.computed)(() => {
+      return Object.assign({}, (0, _ui.getConfig)().list.rowConfig, props.rowConfig);
+    });
+    const computeDragOpts = (0, _vue.computed)(() => {
+      return Object.assign({}, (0, _ui.getConfig)().list.dragConfig, props.dragConfig);
+    });
     const computeSYOpts = (0, _vue.computed)(() => {
       return Object.assign({}, (0, _ui.getConfig)().list.virtualYConfig || (0, _ui.getConfig)().list.scrollY, props.virtualYConfig || props.scrollY);
     });
-    const computeStyles = (0, _vue.computed)(() => {
+    const computeKeyField = (0, _vue.computed)(() => {
+      const rowOpts = computeRowOpts.value;
+      const {
+        keyField
+      } = rowOpts;
+      return keyField || '';
+    });
+    const computeIsDrag = (0, _vue.computed)(() => {
+      const {
+        dragConfig
+      } = props;
+      const dragOpts = computeDragOpts.value;
+      return dragConfig && (0, _utils.isEnableConf)(dragOpts);
+    });
+    const computeRowHeight = (0, _vue.computed)(() => {
+      const rowOpts = computeRowOpts.value;
+      const {
+        height
+      } = rowOpts;
+      return height;
+    });
+    const computeRadioOpts = (0, _vue.computed)(() => {
+      return Object.assign({
+        showIcon: true
+      }, (0, _ui.getConfig)().list.radioConfig, props.radioConfig);
+    });
+    const computeCheckboxOpts = (0, _vue.computed)(() => {
+      return Object.assign({
+        showIcon: true
+      }, (0, _ui.getConfig)().list.checkboxConfig, props.checkboxConfig);
+    });
+    const computeWrapperStyles = (0, _vue.computed)(() => {
+      const rowHeight = computeRowHeight.value;
+      const style = {};
+      if (rowHeight) {
+        style['--vxe-ui-list-row-height'] = (0, _dom.toCssUnit)(rowHeight);
+      }
+      return style;
+    });
+    const computeVirtualStyles = (0, _vue.computed)(() => {
       const {
         height,
         maxHeight
       } = props;
       const {
         customHeight,
-        customMaxHeight
+        customMaxHeight,
+        headHeight,
+        footHeight
       } = reactData;
       const style = {};
       if (height) {
-        style.height = `${customHeight}px`;
+        style.height = (0, _dom.toCssUnit)(Math.max(20, customHeight - headHeight - footHeight));
       } else if (maxHeight) {
         style.height = 'auto';
-        style.maxHeight = `${customMaxHeight}px`;
+        style.maxHeight = (0, _dom.toCssUnit)(Math.max(20, customMaxHeight - headHeight - footHeight));
       }
       return style;
     });
@@ -110,6 +207,16 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
         $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 calcTableHeight = key => {
       const {
         parentHeight
@@ -131,6 +238,10 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
       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');
     };
@@ -153,7 +264,7 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
         fullData,
         scrollYStore
       } = internalData;
-      reactData.items = scrollYLoad ? fullData.slice(scrollYStore.startIndex, scrollYStore.endIndex) : fullData.slice(0);
+      reactData.rowList = scrollYLoad ? fullData.slice(scrollYStore.startIndex, scrollYStore.endIndex) : fullData.slice(0);
       return (0, _vue.nextTick)();
     };
     const updateYData = () => {
@@ -171,17 +282,17 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
         const virtualBodyElem = refVirtualBody.value;
         const sYOpts = computeSYOpts.value;
         let rowHeight = 0;
-        let firstItemElem;
+        let firstRowElem;
         if (virtualBodyElem) {
           if (sYOpts.sItem) {
-            firstItemElem = virtualBodyElem.querySelector(sYOpts.sItem);
+            firstRowElem = virtualBodyElem.querySelector(sYOpts.sItem);
           }
-          if (!firstItemElem) {
-            firstItemElem = virtualBodyElem.children[0];
+          if (!firstRowElem) {
+            firstRowElem = virtualBodyElem.children[0];
           }
         }
-        if (firstItemElem) {
-          rowHeight = firstItemElem.offsetHeight;
+        if (firstRowElem) {
+          rowHeight = firstRowElem.offsetHeight;
         }
         rowHeight = Math.max(12, rowHeight);
         scrollYStore.rowHeight = rowHeight;
@@ -310,6 +421,53 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
         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;
+          }
+        }
+      }
+      internalData.selectCheckboxMaps = selectMaps;
+      updateCheckboxStatus();
+    };
+    const cacheRowMap = () => {
+      const {
+        fullData
+      } = internalData;
+      const keyField = computeKeyField.value;
+      const keyMaps = {};
+      fullData.forEach(row => {
+        const rowKey = getRowKeyByField(row, keyField);
+        keyMaps[rowKey] = row;
+      });
+      internalData.fullKeyMaps = keyMaps;
+    };
     /**
      * 加载数据
      * @param {Array} datas 数据
@@ -328,11 +486,790 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
       internalData.fullData = fullData;
       // 如果gt为0，则总是启用
       reactData.scrollYLoad = !!sYOpts.enabled && sYOpts.gt > -1 && (sYOpts.gt === 0 || sYOpts.gt <= fullData.length);
+      cacheRowMap();
       handleData();
+      updateRadioModeValue();
+      updateCheckboxModeValue();
       return computeScrollLoad().then(() => {
         refreshScroll();
       });
     };
+    const clearRowDropOrigin = () => {
+      const el = refElem.value;
+      if (el) {
+        const clss = 'row--drag-origin';
+        _xeUtils.default.arrayEach(el.querySelectorAll(`.${clss}`), elem => {
+          elem.draggable = false;
+          (0, _dom.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.default.arrayEach(el.querySelectorAll(`.vxe-list--row[rowid="${rowid}"]` + (sItem ? `${sItem}[rowid="${rowid}"]` : '')), elem => {
+          (0, _dom.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 = (0, _ui.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();
+        clearCrossListDragStatus();
+        reactData.dragRow = null;
+      }
+    };
+    const handleRowDragMousedownEvent = (evnt, params) => {
+      evnt.stopPropagation();
+      const {
+        row
+      } = params;
+      const dragConfig = computeDragOpts.value;
+      const {
+        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;
+      }
+      const dragstartEventParams = {
+        row
+      };
+      reactData.dragRow = row;
+      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 = '';
+          }
+        }
+      }
+      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();
+      (0, _anime.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 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;
+          }
+        }
+        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 (0, _vue.nextTick)().then(() => {
+            if (animation) {
+              const {
+                rowList
+              } = reactData;
+              const {
+                fullData
+              } = internalData;
+              const _newRowIndex = findRowIndexOfByKey(fullData, dragRowid);
+              const firstRow = fullData[0];
+              const _firstRowIndex = findRowIndexOf(fullData, firstRow);
+              const wrapperEl = el;
+              if (_firstRowIndex > -1) {
+                const _lastRowIndex = _firstRowIndex + fullData.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 = fullData.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 = fullData.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(','));
+                  (0, _anime.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) {
+                (0, _anime.moveRowAnimateToTb)(newDtTrList, dragOffsetTop - newTrEl.offsetTop);
+              }
+            }
+            recalculate();
+          }).then(() => {
+            return {
+              status: true
+            };
+          });
+        }).catch(() => {
+          return errRest;
+        }).then(rest => {
+          clearRowDragData();
+          clearCrossListDragStatus();
+          return rest;
+        });
+      }
+      clearRowDragData();
+      clearCrossListDragStatus();
+      return Promise.resolve(errRest);
+    };
+    const handleRowDragDragstartEvent = evnt => {
+      if (evnt.dataTransfer) {
+        evnt.dataTransfer.setDragImage((0, _dom.getTpImg)(), 0, 0);
+      }
+    };
+    const handleRowDragDragendEvent = evnt => {
+      const {
+        dragRow
+      } = reactData;
+      const {
+        prevDragRow,
+        prevDragPos
+      } = internalData;
+      handleRowDragSwapEvent(evnt, dragRow, prevDragRow, prevDragPos);
+    };
+    const handleRowDragDragoverEvent = evnt => {
+      const {
+        dragRow
+      } = reactData;
+      const {
+        fullData
+      } = internalData;
+      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 (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);
+      }
+    };
+    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 {
+        currentRow
+      } = internalData;
+      const rowOpts = computeRowOpts.value;
+      const {
+        isCurrent
+      } = rowOpts;
+      let triggerCurrent = false;
+      if (isCurrent) {
+        triggerCurrent = true;
+        changeCurrentEvent(evnt, row);
+      } else if (currentRow) {
+        internalData.currentRow = null;
+        reactData.currRowFlag++;
+      }
+      dispatchEvent('row-click', {
+        row,
+        triggerCurrent
+      }, 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.default.find(list, obj => eqRow(obj, row)) : null;
+    };
+    const findRowByKey = (list, rowKey) => {
+      const keyField = computeKeyField.value;
+      return _xeUtils.default.find(list, obj => eqRowKey(getRowIdByField(obj, keyField), rowKey));
+    };
+    const findRowIndexOf = (list, row) => {
+      return row ? _xeUtils.default.findIndexOf(list, obj => eqRow(obj, row)) : -1;
+    };
+    const findRowIndexOfByKey = (list, rowKey) => {
+      const keyField = computeKeyField.value;
+      return _xeUtils.default.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 (0, _vue.nextTick)();
+    };
+    const setCurrentRowByKey = rowKey => {
+      const {
+        fullData
+      } = internalData;
+      internalData.currentRow = findRowByKey(fullData, rowKey);
+      reactData.currRowFlag++;
+      return (0, _vue.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 (0, _vue.nextTick)();
+    };
+    const setRadioRow = row => {
+      reactData.selectRadioRow = row;
+      const value = getRowKey(row);
+      emitRadioMode(value);
+      return (0, _vue.nextTick)();
+    };
+    const setRadioRowByKey = rowKey => {
+      const {
+        fullData
+      } = internalData;
+      reactData.selectRadioRow = findRowByKey(fullData, rowKey);
+      const value = rowKey;
+      emitRadioMode(value);
+      return (0, _vue.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 (0, _vue.nextTick)();
+    };
+    const setCheckboxRow = (row, checked) => {
+      const {
+        selectCheckboxMaps
+      } = internalData;
+      const keyField = computeKeyField.value;
+      const rowList = row ? _xeUtils.default.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 value = getCheckboxRowKeys();
+      emitCheckboxMode(value);
+      return updateCheckboxStatus();
+    };
+    const setCheckboxRowByKey = (rowKey, checked) => {
+      const {
+        selectCheckboxMaps,
+        fullKeyMaps
+      } = internalData;
+      const keyField = computeKeyField.value;
+      const rowKeys = rowKey ? _xeUtils.default.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];
+          }
+        }
+      });
+      const value = getCheckboxRowKeys();
+      emitCheckboxMode(value);
+      return updateCheckboxStatus();
+    };
+    const getCheckboxRows = () => {
+      const {
+        updateCheckboxFlag
+      } = reactData;
+      const {
+        selectCheckboxMaps
+      } = internalData;
+      const rowList = [];
+      if (updateCheckboxFlag) {
+        _xeUtils.default.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.default.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 (0, _vue.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();
+      }
+      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;
+          } else {
+            hasUnchecked = true;
+            if (hasChecked) {
+              break;
+            }
+          }
+        }
+      }
+      reactData.isAllChecked = hasChecked && !hasUnchecked;
+      reactData.isAllIndeterminate = hasChecked && hasUnchecked;
+      reactData.updateCheckboxFlag++;
+      return (0, _vue.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.default.keys(selectCheckboxMaps);
+      const value = rowids.map(_utils.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;
+      }
+      emitRadioMode(value);
+      dispatchEvent('radio-change', {
+        row,
+        value,
+        checked: isChecked
+      }, evnt);
+    };
     const listMethods = {
       dispatchEvent,
       loadData,
@@ -344,37 +1281,330 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
         clearScroll();
         return loadData(datas);
       },
+      getFullData() {
+        const {
+          fullData
+        } = internalData;
+        return fullData;
+      },
       recalculate,
       scrollTo,
       refreshScroll,
-      clearScroll
+      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,
+      getCheckboxRows,
+      getCheckboxRowKeys,
+      clearCheckboxRow,
+      setAllCheckboxRow
+    };
+    const listPrivateMethods = {};
+    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 (0, _vue.h)('div', {
+          class: 'vxe-list--drag-wrapper'
+        }, [(0, _vue.h)('div', {
+          ref: refDragRowLineElem,
+          class: ['vxe-list--drag-row-line', {
+            'is--guides': dragOpts.showGuidesStatus
+          }]
+        }), dRow && dragOpts.showDragTip ? (0, _vue.h)('div', {
+          ref: refDragTipElem,
+          class: 'vxe-list--drag-sort-tip'
+        }, [(0, _vue.h)('div', {
+          class: 'vxe-list--drag-sort-tip-wrapper'
+        }, [(0, _vue.h)('div', {
+          class: 'vxe-list--drag-sort-tip-status'
+        }, [(0, _vue.h)('span', {
+          class: ['vxe-list--drag-sort-tip-normal-status', (0, _ui.getIcon)().LIST_DRAG_STATUS_NODE]
+        }), (0, _vue.h)('span', {
+          class: ['vxe-list--drag-sort-tip-disabled-status', (0, _ui.getIcon)().LIST_DRAG_DISABLED]
+        })]), (0, _vue.h)('div', {
+          class: 'vxe-list--drag-sort-tip-content'
+        }, dragTipText)])]) : (0, _ui.renderEmptyElement)($xeList)]);
+      }
+      return (0, _ui.renderEmptyElement)($xeList);
+    };
+    const renderRadio = (row, rowid, isChecked) => {
+      const {
+        showRadio
+      } = props;
+      const radioOpts = computeRadioOpts.value;
+      const {
+        showIcon,
+        checkMethod,
+        visibleMethod
+      } = radioOpts;
+      const isVisible = !visibleMethod || visibleMethod({
+        $list: $xeList,
+        row
+      });
+      if (showRadio && showIcon && isVisible) {
+        const isDisabled = checkMethod ? !checkMethod({
+          $list: $xeList,
+          row
+        }) : false;
+        return (0, _vue.h)('div', {
+          key: 'ct2',
+          class: ['vxe-list--radio-option', {
+            'is--checked': isChecked,
+            'is--disabled': isDisabled
+          }],
+          onClick(evnt) {
+            if (!isDisabled) {
+              changeRadioEvent(evnt, row);
+            }
+          }
+        }, [(0, _vue.h)('span', {
+          class: ['vxe-radio--icon', isChecked ? (0, _ui.getIcon)().RADIO_CHECKED : (0, _ui.getIcon)().RADIO_UNCHECKED]
+        })]);
+      }
+      return (0, _ui.renderEmptyElement)($xeList);
+    };
+    const renderCheckbox = (row, rowid, isChecked) => {
+      const {
+        showCheckbox
+      } = props;
+      const checkboxOpts = computeCheckboxOpts.value;
+      const {
+        showIcon,
+        checkMethod,
+        visibleMethod
+      } = checkboxOpts;
+      const isVisible = !visibleMethod || visibleMethod({
+        $list: $xeList,
+        row
+      });
+      if (showCheckbox && showIcon && isVisible) {
+        const isDisabled = checkMethod ? !checkMethod({
+          $list: $xeList,
+          row
+        }) : false;
+        return (0, _vue.h)('div', {
+          key: 'ct3',
+          class: ['vxe-list--checkbox-option', {
+            'is--checked': isChecked,
+            'is--disabled': isDisabled
+          }],
+          onClick(evnt) {
+            if (!isDisabled) {
+              changeCheckboxEvent(evnt, row);
+            }
+          }
+        }, [(0, _vue.h)('span', {
+          class: ['vxe-checkbox--icon', isChecked ? (0, _ui.getIcon)().CHECKBOX_CHECKED : (0, _ui.getIcon)().CHECKBOX_UNCHECKED]
+        })]);
+      }
+      return (0, _ui.renderEmptyElement)($xeList);
+    };
+    const renderRow = (row, rowIndex) => {
+      const {
+        showRadio,
+        showCheckbox
+      } = props;
+      const {
+        selectRadioRow,
+        currRowFlag,
+        updateCheckboxFlag
+      } = reactData;
+      const {
+        selectCheckboxMaps,
+        currentRow
+      } = internalData;
+      const contentSlot = slots.content;
+      const dragOpts = computeDragOpts.value;
+      const {
+        trigger,
+        icon,
+        disabledMethod,
+        visibleMethod
+      } = dragOpts;
+      const rowOpts = computeRowOpts.value;
+      const {
+        useKey,
+        contentField,
+        className: rowClassName,
+        isCurrent
+      } = rowOpts;
+      const isDrag = computeIsDrag.value;
+      const keyField = computeKeyField.value;
+      const isRowFnCls = rowClassName && _xeUtils.default.isFunction(rowClassName);
+      const hasKey = keyField || useKey || isDrag || isCurrent || showRadio || showCheckbox;
+      const rowKey = hasKey && keyField ? getRowIdByField(row, keyField) : '';
+      const rowid = (0, _utils.enModelValue)(rowKey);
+      const rowParams = {
+        row,
+        $list: $xeList
+      };
+      let isRadioChecked = false;
+      if (showRadio) {
+        isRadioChecked = selectRadioRow && (row === selectRadioRow || eqRowByKey(selectRadioRow, rowKey));
+      }
+      let isCheckboxChecked = false;
+      if (showCheckbox) {
+        isCheckboxChecked = !!(updateCheckboxFlag && selectCheckboxMaps[rowid]);
+      }
+      const ctVNs = [];
+      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((0, _vue.h)('div', {
+          key: 'ct1',
+          class: 'vxe-list--row-drag'
+        }, [(0, _vue.h)('span', Object.assign({
+          class: 'vxe-list--drag-handle'
+        }, handleOns), [(0, _vue.h)('i', {
+          class: icon || (0, _ui.getIcon)().LIST_DRAG
+        })])]));
+      }
+      if (showRadio) {
+        ctVNs.push(renderRadio(row, rowid, isRadioChecked));
+      }
+      if (showCheckbox) {
+        ctVNs.push(renderCheckbox(row, rowid, isCheckboxChecked));
+      }
+      ctVNs.push((0, _vue.h)('div', {
+        key: 'ct5',
+        class: 'vxe-list--row-content'
+      }, contentSlot ? contentSlot(rowParams) : contentField ? (0, _utils.getText)(row[contentField]) : ''));
+      const rowOns = {
+        onMousedown(evnt) {
+          handleRowMousedownEvent(evnt, row);
+        },
+        onMouseup: handleRowDragMouseupEvent,
+        onClick(evnt) {
+          handleRowClickEvent(evnt, row);
+        },
+        onDblclick(evnt) {
+          handleRowDblclickEvent(evnt, row);
+        }
+      };
+      // 拖拽行事件
+      if (isDrag) {
+        rowOns.onDragstart = handleRowDragDragstartEvent;
+        rowOns.onDragend = handleRowDragDragendEvent;
+        rowOns.onDragover = handleRowDragDragoverEvent;
+      }
+      return (0, _vue.h)('div', Object.assign({
+        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--checked': isRadioChecked,
+          'is-checkbox--checked': isCheckboxChecked
+        }],
+        rowid: hasKey && keyField ? rowid : undefined
+      }, rowOns), ctVNs);
     };
-    Object.assign($xeList, listMethods);
     const renderVN = () => {
       const {
+        showCheckbox,
         className,
         loading
       } = props;
       const {
         bodyHeight,
         topSpaceHeight,
-        items
+        rowList,
+        isAllChecked,
+        isAllIndeterminate
       } = reactData;
       const defaultSlot = slots.default;
+      const headerSlot = slots.header;
+      const footerSlot = slots.footer;
       const vSize = computeSize.value;
-      const styles = computeStyles.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
+      } = dragOpts;
+      const rowOpts = computeRowOpts.value;
+      const {
+        isHover,
+        padding
+      } = rowOpts;
+      const isDrag = computeIsDrag.value;
+      const showDefChekboxHead = showCheckbox && showHeader !== false;
       return (0, _vue.h)('div', {
         ref: refElem,
         class: ['vxe-list', className ? _xeUtils.default.isFunction(className) ? className({
           $list: $xeList
         }) : className : '', {
           [`size--${vSize}`]: vSize,
+          'is--drag': isDrag,
           'is--loading': loading
-        }]
+        }],
+        style: wrapperStyles
+      }, [headerSlot || showDefChekboxHead ? (0, _vue.h)('div', {
+        ref: refHeaderElem,
+        class: 'vxe-list--header-wrapper'
+      }, [showDefChekboxHead ? (0, _vue.h)('div', {
+        class: 'vxe-list--header-left'
       }, [(0, _vue.h)('div', {
+        class: ['vxe-list--checkbox-header', {
+          'is--checked': isAllChecked,
+          'is--indeterminate': isAllIndeterminate
+        }],
+        onClick: changeCheckboxAllEvent
+      }, [(0, _vue.h)('span', {
+        class: ['vxe-checkbox--icon', isAllChecked ? (0, _ui.getIcon)().CHECKBOX_CHECKED : isAllIndeterminate ? (0, _ui.getIcon)().CHECKBOX_INDETERMINATE : (0, _ui.getIcon)().CHECKBOX_UNCHECKED]
+      }), (0, _vue.h)('span', {
+        class: 'vxe-checkbox--label'
+      }, _xeUtils.default.eqNull(headerTitle) ? (0, _ui.getI18n)('vxe.list.allChecked') : (0, _utils.getText)(headerTitle))])]) : (0, _ui.renderEmptyElement)($xeList), headerSlot ? (0, _vue.h)('div', {
+        class: 'vxe-list--header-content'
+      }, headerSlot({
+        items: rowList,
+        $list: $xeList
+      })) : (0, _ui.renderEmptyElement)($xeList)]) : (0, _ui.renderEmptyElement)($xeList), (0, _vue.h)('div', {
         ref: refVirtualWrapper,
         class: 'vxe-list--virtual-wrapper',
-        style: styles,
+        style: virtualStyles,
         onScroll: scrollEvent
       }, [(0, _vue.h)('div', {
         class: 'vxe-list--y-space',
@@ -383,14 +1613,30 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
         }
       }), (0, _vue.h)('div', {
         ref: refVirtualBody,
-        class: 'vxe-list--body',
+        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,
+        items: rowList,
+        $list: $xeList
+      }) : rowList.map((row, i) => renderRow(row, i)))]), footerSlot ? (0, _vue.h)('div', {
+        ref: refFooterElem,
+        class: 'vxe-list--footer-wrapper'
+      }, footerSlot({
+        items: rowList,
         $list: $xeList
-      }) : [])]),
+      })) : (0, _ui.renderEmptyElement)($xeList),
+      /**
+       * 拖拽提示
+       */
+      renderDragTip(),
       /**
        * 加载中
        */
@@ -409,17 +1655,36 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
     (0, _vue.watch)(dataFlag, () => {
       loadData(props.data || []);
     });
+    const reFlag = (0, _vue.ref)(0);
     (0, _vue.watch)(() => props.height, () => {
-      recalculate();
+      reFlag.value++;
     });
     (0, _vue.watch)(() => props.maxHeight, () => {
-      recalculate();
+      reFlag.value++;
+    });
+    (0, _vue.watch)(() => props.syncResize, () => {
+      reFlag.value++;
     });
-    (0, _vue.watch)(() => props.syncResize, value => {
-      if (value) {
+    (0, _vue.watch)(computeRowHeight, () => {
+      reFlag.value++;
+    });
+    (0, _vue.watch)(reFlag, () => {
+      (0, _vue.nextTick)(() => {
         recalculate();
-        (0, _vue.nextTick)(() => setTimeout(() => recalculate()));
-      }
+      });
+    });
+    (0, _vue.watch)(() => props.checkRowKey, () => {
+      updateRadioModeValue();
+    });
+    const checkKeyFlag = (0, _vue.ref)(0);
+    (0, _vue.watch)(() => props.checkRowKeys ? props.checkRowKeys.length : -1, () => {
+      checkKeyFlag.value++;
+    });
+    (0, _vue.watch)(() => props.checkRowKeys, () => {
+      checkKeyFlag.value++;
+    });
+    (0, _vue.watch)(checkKeyFlag, () => {
+      updateCheckboxModeValue();
     });
     (0, _vue.onActivated)(() => {
       recalculate().then(() => refreshScroll());
@@ -428,7 +1693,30 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
       loadData(props.data || []);
     });
     (0, _vue.onMounted)(() => {
-      recalculate();
+      const {
+        showRadio,
+        showCheckbox
+      } = props;
+      const rowOpts = computeRowOpts.value;
+      const {
+        useKey
+      } = rowOpts;
+      const isDrag = computeIsDrag.value;
+      const keyField = computeKeyField.value;
+      if (!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 (props.autoResize) {
         const el = refElem.value;
         const resizeObserver = _ui.globalResize.create(() => recalculate());
@@ -438,6 +1726,7 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
         }
         internalData.resizeObserver = resizeObserver;
       }
+      recalculate();
       _ui.globalEvents.on($xeList, 'resize', recalculate);
     });
     (0, _vue.onBeforeUnmount)(() => {