bkui-vue 1.0.3-beta.7 → 1.0.3-beta.70

package/lib/table/index.js

@@ -8,10 +8,10 @@ import * as __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_virtual_render_927587a8__ fro
 import "../virtual-render/virtual-render.less";
 import * as __WEBPACK_EXTERNAL_MODULE_lodash_isElement_e6b2a6ce__ from "lodash/isElement";
 import * as __WEBPACK_EXTERNAL_MODULE_lodash_throttle_a7b7506a__ from "lodash/throttle";
-import * as __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_loading_dcf0e69a__ from "../loading";
-import "../loading/loading.less";
 import * as __WEBPACK_EXTERNAL_MODULE_lodash_debounce_3540babe__ from "lodash/debounce";
 import * as __WEBPACK_EXTERNAL_MODULE_lodash_get_9427f899__ from "lodash/get";
+import * as __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_loading_dcf0e69a__ from "../loading";
+import "../loading/loading.less";
 import * as __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_checkbox_13b1cb4a__ from "../checkbox";
 import "../checkbox/checkbox.less";
 import * as __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_icon_a97c79c3__ from "../icon";
@@ -122,7 +122,95 @@ function defineProperty_defineProperty(obj, key, value) {
 ;// CONCATENATED MODULE: external "vue"
 var external_vue_x = y => { var x = {}; __webpack_require__.d(x, y); return x; }
 var external_vue_y = x => () => x
-const external_vue_namespaceObject = external_vue_x({ ["Fragment"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.Fragment, ["computed"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.computed, ["createTextVNode"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.createTextVNode, ["createVNode"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.createVNode, ["defineComponent"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.defineComponent, ["inject"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.inject, ["isProxy"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.isProxy, ["isVNode"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.isVNode, ["mergeProps"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.mergeProps, ["nextTick"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.nextTick, ["onBeforeUnmount"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.onBeforeUnmount, ["onMounted"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.onMounted, ["provide"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.provide, ["reactive"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.reactive, ["ref"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.ref, ["toRaw"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.toRaw, ["toRef"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.toRef, ["toRefs"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.toRefs, ["unref"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.unref, ["watch"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.watch });
+const external_vue_namespaceObject = external_vue_x({ ["Fragment"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.Fragment, ["computed"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.computed, ["createTextVNode"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.createTextVNode, ["createVNode"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.createVNode, ["defineComponent"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.defineComponent, ["inject"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.inject, ["isProxy"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.isProxy, ["isVNode"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.isVNode, ["mergeProps"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.mergeProps, ["nextTick"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.nextTick, ["onBeforeUnmount"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.onBeforeUnmount, ["onMounted"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.onMounted, ["provide"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.provide, ["reactive"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.reactive, ["ref"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.ref, ["toRaw"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.toRaw, ["toRef"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.toRef, ["unref"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.unref, ["watch"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.watch, ["watchEffect"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.watchEffect });
+;// CONCATENATED MODULE: ../../node_modules/uuid/dist/esm-browser/native.js
+const randomUUID = typeof crypto !== 'undefined' && crypto.randomUUID && crypto.randomUUID.bind(crypto);
+/* harmony default export */ const esm_browser_native = ({
+  randomUUID
+});
+;// CONCATENATED MODULE: ../../node_modules/uuid/dist/esm-browser/rng.js
+// Unique ID creation requires a high quality random # generator. In the browser we therefore
+// require the crypto API and do not support built-in fallback to lower quality random number
+// generators (like Math.random()).
+let getRandomValues;
+const rnds8 = new Uint8Array(16);
+function rng() {
+  // lazy load so that environments that need to polyfill have a chance to do so
+  if (!getRandomValues) {
+    // getRandomValues needs to be invoked in a context where "this" is a Crypto implementation.
+    getRandomValues = typeof crypto !== 'undefined' && crypto.getRandomValues && crypto.getRandomValues.bind(crypto);
+
+    if (!getRandomValues) {
+      throw new Error('crypto.getRandomValues() not supported. See https://github.com/uuidjs/uuid#getrandomvalues-not-supported');
+    }
+  }
+
+  return getRandomValues(rnds8);
+}
+;// CONCATENATED MODULE: ../../node_modules/uuid/dist/esm-browser/stringify.js
+
+/**
+ * Convert array of 16 byte values to UUID string format of the form:
+ * XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX
+ */
+
+const byteToHex = [];
+
+for (let i = 0; i < 256; ++i) {
+  byteToHex.push((i + 0x100).toString(16).slice(1));
+}
+
+function unsafeStringify(arr, offset = 0) {
+  // Note: Be careful editing this code!  It's been tuned for performance
+  // and works in ways you may not expect. See https://github.com/uuidjs/uuid/pull/434
+  return byteToHex[arr[offset + 0]] + byteToHex[arr[offset + 1]] + byteToHex[arr[offset + 2]] + byteToHex[arr[offset + 3]] + '-' + byteToHex[arr[offset + 4]] + byteToHex[arr[offset + 5]] + '-' + byteToHex[arr[offset + 6]] + byteToHex[arr[offset + 7]] + '-' + byteToHex[arr[offset + 8]] + byteToHex[arr[offset + 9]] + '-' + byteToHex[arr[offset + 10]] + byteToHex[arr[offset + 11]] + byteToHex[arr[offset + 12]] + byteToHex[arr[offset + 13]] + byteToHex[arr[offset + 14]] + byteToHex[arr[offset + 15]];
+}
+
+function stringify(arr, offset = 0) {
+  const uuid = unsafeStringify(arr, offset); // Consistency check for valid UUID.  If this throws, it's likely due to one
+  // of the following:
+  // - One or more input array values don't map to a hex octet (leading to
+  // "undefined" in the uuid)
+  // - Invalid input values for the RFC `version` or `variant` fields
+
+  if (!validate(uuid)) {
+    throw TypeError('Stringified UUID is invalid');
+  }
+
+  return uuid;
+}
+
+/* harmony default export */ const esm_browser_stringify = ((/* unused pure expression or super */ null && (stringify)));
+;// CONCATENATED MODULE: ../../node_modules/uuid/dist/esm-browser/v4.js
+
+
+
+
+function v4(options, buf, offset) {
+  if (esm_browser_native.randomUUID && !buf && !options) {
+    return esm_browser_native.randomUUID();
+  }
+
+  options = options || {};
+  const rnds = options.random || (options.rng || rng)(); // Per 4.4, set bits for version and `clock_seq_hi_and_reserved`
+
+  rnds[6] = rnds[6] & 0x0f | 0x40;
+  rnds[8] = rnds[8] & 0x3f | 0x80; // Copy bytes to buffer, if provided
+
+  if (buf) {
+    offset = offset || 0;
+
+    for (let i = 0; i < 16; ++i) {
+      buf[offset + i] = rnds[i];
+    }
+
+    return buf;
+  }
+
+  return unsafeStringify(rnds);
+}
+
+/* harmony default export */ const esm_browser_v4 = (v4);
 ;// CONCATENATED MODULE: ../../packages/table/src/const.ts
 
 /*
@@ -302,7 +390,7 @@ var ColumnTypeEnum;
   ColumnTypeEnum["SELECTION"] = "selection";
   ColumnTypeEnum["INDEX"] = "index";
   ColumnTypeEnum["EXPAND"] = "expand";
-  ColumnTypeEnum["NONE"] = "none";
+  ColumnTypeEnum["NONE"] = "__COL_TYPE_NONE";
 })(ColumnTypeEnum || (ColumnTypeEnum = {}));
 var TableAlignEnum;
 (function (TableAlignEnum) {
@@ -640,6 +728,7 @@ var tableProps = {
 ;// CONCATENATED MODULE: ../../packages/table/src/components/table-column.tsx
 
 
+
 /*
  * Tencent is pleased to support the open source community by making
  * 蓝鲸智云PaaS平台社区版 (BlueKing PaaS Community Edition) available.
@@ -669,6 +758,7 @@ var tableProps = {
 
 
 
+
 var TableColumnProp = {
   label: LabelFunctionStringType,
   field: LabelFunctionStringType,
@@ -687,7 +777,10 @@ var TableColumnProp = {
   align: TableAlign,
   className: RowClassFunctionStringType,
   prop: LabelFunctionStringType,
-  index: shared_namespaceObject.PropTypes.number.def(undefined)
+  index: shared_namespaceObject.PropTypes.number.def(undefined),
+  uniqueId: shared_namespaceObject.PropTypes.object.def({
+    val: ''
+  })
 };
 /* harmony default export */ const table_column = ((0,external_vue_namespaceObject.defineComponent)({
   name: 'TableColumn',
@@ -704,18 +797,39 @@ var TableColumnProp = {
     var column = (0,external_vue_namespaceObject.reactive)(Object.assign({}, props, {
       field: props.prop || props.field
     }));
+    var isIndexPropChanged = (0,external_vue_namespaceObject.ref)(false);
+    var setIsIndexChanged = function setIsIndexChanged(val) {
+      isIndexPropChanged.value = val;
+    };
     return {
+      isIndexPropChanged: isIndexPropChanged,
+      setIsIndexChanged: setIsIndexChanged,
       initColumns: initColumns,
       bkTableCache: bkTableCache,
       column: column
     };
   },
+  watch: {
+    index: {
+      handler: function handler() {
+        this.setIsIndexChanged(!this.isIndexPropChanged);
+      },
+      deep: true
+    }
+  },
   unmounted: function unmounted() {
     this.updateColumnDefine(true);
   },
   mounted: function mounted() {
+    this.setNodeUid();
     this.updateColumnDefine();
   },
+  updated: function updated() {
+    if (this.isIndexPropChanged) {
+      this.updateColumnDefineByParent();
+      this.setIsIndexChanged(!this.isIndexPropChanged);
+    }
+  },
   methods: {
     updateColumnDefine: function updateColumnDefine() {
       var unmounted = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
@@ -733,43 +847,113 @@ var TableColumnProp = {
         return Object.assign(result, defineProperty_defineProperty({}, target, props[key]));
       }, {});
     },
+    rsolveIndexedColumn: function rsolveIndexedColumn() {
+      // 如果是设置了Index，则先添加Index列，不做自动递归读取Column
+      if (/\d+\.?\d*/.test("".concat(this.$props.index))) {
+        var _props$render;
+        var props = this.$.vnode.props;
+        var resolveProp = Object.assign({}, this.copyProps(props), {
+          field: props.prop || props.field,
+          render: (_props$render = props.render) !== null && _props$render !== void 0 ? _props$render : this.$slots["default"],
+          uniqueId: this.getNodeCtxUid(this.$.ctx)
+        });
+        this.initColumns(resolveProp);
+        return false;
+      }
+      return true;
+    },
+    setNodeUid: function setNodeUid() {
+      var ctx = this.$.ctx;
+      if (!ctx) {
+        return;
+      }
+      if (ctx.uniqueId && !ctx.uniqueId.val) {
+        ctx.uniqueId.val = esm_browser_v4();
+      }
+      if (!ctx.uniqueId) {
+        Object.assign(ctx, {
+          uniqueId: {
+            val: esm_browser_v4()
+          }
+        });
+      }
+    },
+    getNodeCtxUid: function getNodeCtxUid(ctx) {
+      var _ctx$uniqueId;
+      return ctx === null || ctx === void 0 || (_ctx$uniqueId = ctx.uniqueId) === null || _ctx$uniqueId === void 0 ? void 0 : _ctx$uniqueId.val;
+    },
     updateColumnDefineByParent: function updateColumnDefineByParent() {
       var _this = this;
+      if (!this.rsolveIndexedColumn()) {
+        return;
+      }
       var fn = function fn() {
         // @ts-ignore
-        var selfVnode = _this._;
-        var colList = selfVnode.parent.vnode.children["default"]() || [];
+        var selfVnode = _this.$;
+        var getTableNode = function getTableNode(root) {
+          var _parentVnode$type;
+          if (root === document.body || !root) {
+            return null;
+          }
+          var parentVnode = root.parent;
+          if (((_parentVnode$type = parentVnode.type) === null || _parentVnode$type === void 0 ? void 0 : _parentVnode$type.name) === 'Table') {
+            return parentVnode.vnode;
+          }
+          return getTableNode(parentVnode);
+        };
+        var getNodeUid = function getNodeUid(node) {
+          return _this.getNodeCtxUid(node.ctx);
+        };
+        var tableNode = getTableNode(selfVnode);
+        if (!tableNode) {
+          return;
+        }
         var sortColumns = [];
         var index = 0;
+        var resolveChildNode = function resolveChildNode(node) {
+          var _node$type;
+          if (!node) {
+            return null;
+          }
+          if (((_node$type = node.type) === null || _node$type === void 0 ? void 0 : _node$type.name) === 'TableColumn') {
+            var _node$props$render, _node$children;
+            var resolveProp = Object.assign({
+              index: index
+            }, _this.copyProps(node.props), {
+              field: node.props.prop || node.props.field,
+              render: (_node$props$render = node.props.render) !== null && _node$props$render !== void 0 ? _node$props$render : (_node$children = node.children) === null || _node$children === void 0 ? void 0 : _node$children["default"],
+              uniqueId: getNodeUid(node)
+            });
+            sortColumns.push((0,external_vue_namespaceObject.unref)(resolveProp));
+            index = index + 1;
+            return null;
+          }
+          if (Array.isArray(node === null || node === void 0 ? void 0 : node.children)) {
+            return node.children;
+          }
+          if ((0,external_vue_namespaceObject.isVNode)(node) && node !== null && node !== void 0 && node.children && typeof_typeof(node === null || node === void 0 ? void 0 : node.children) === 'object') {
+            return Object.keys(node.children).map(function (key) {
+              return node.children[key];
+            });
+          }
+          if (typeof node === 'function') {
+            return node();
+          }
+          return null;
+        };
         var reduceColumns = function reduceColumns(nodes) {
           if (!Array.isArray(nodes)) {
+            var children = resolveChildNode(nodes);
+            if (children) {
+              reduceColumns(children);
+            }
             return;
           }
-          nodes.forEach(function (node) {
-            var _node$type, _node$children2;
-            if (Array.isArray(node)) {
-              reduceColumns(node);
-              return;
-            }
-            var skipValidateKey0 = true;
-            if (((_node$type = node.type) === null || _node$type === void 0 ? void 0 : _node$type.name) === 'TableColumn') {
-              var _node$children;
-              skipValidateKey0 = Object.hasOwnProperty.call(node.props || {}, 'key');
-              var resolveProp = Object.assign({
-                index: index
-              }, _this.copyProps(node.props), {
-                field: node.props.prop || node.props.field,
-                render: (_node$children = node.children) === null || _node$children === void 0 ? void 0 : _node$children["default"]
-              });
-              sortColumns.push((0,external_vue_namespaceObject.unref)(resolveProp));
-              index = index + 1;
-            }
-            if ((_node$children2 = node.children) !== null && _node$children2 !== void 0 && _node$children2.length && skipValidateKey0) {
-              reduceColumns(node.children);
-            }
+          nodes === null || nodes === void 0 || nodes.forEach(function (node) {
+            return reduceColumns(node);
           });
         };
-        reduceColumns(colList);
+        reduceColumns(tableNode);
         _this.initColumns(sortColumns);
       };
       if (typeof this.bkTableCache.queueStack === 'function') {
@@ -777,9 +961,12 @@ var TableColumnProp = {
       }
     },
     unmountColumn: function unmountColumn() {
+      var _props$render2;
+      var props = this.$.vnode.props;
       var resolveProp = Object.assign({}, this.copyProps(this.$props), {
-        field: this.$props.prop || this.$props.field,
-        render: this.$slots["default"]
+        field: props.prop || props.field,
+        render: (_props$render2 = props.render) !== null && _props$render2 !== void 0 ? _props$render2 : this.$slots["default"],
+        uniqueId: this.getNodeCtxUid(this.$.ctx)
       });
       this.initColumns(resolveProp, true);
     }
@@ -861,21 +1048,41 @@ var BkTableCache = /*#__PURE__*/function () {
   function BkTableCache() {
     _classCallCheck(this, BkTableCache);
     defineProperty_defineProperty(this, "storage", undefined);
-    this.storage = {};
+    defineProperty_defineProperty(this, "defKey", Symbol('bk-table-cache-def-key'));
+    this.storage = new WeakMap();
   }
   _createClass(BkTableCache, [{
     key: "queueStack",
     value: function queueStack(methodName) {
+      var _target$methodName;
       var fn = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : function () {};
-      this.storage[methodName] && clearTimeout(this.storage[methodName]);
-      this.storage[methodName] = setTimeout(function () {
-        return fn();
-      });
+      var key = arguments.length > 2 ? arguments[2] : undefined;
+      var stackKey = key !== null && key !== void 0 ? key : this.defKey;
+      if (!this.storage.has(stackKey)) {
+        this.storage.set(stackKey, {});
+      }
+      var target = this.storage.get(stackKey);
+      if ((_target$methodName = target[methodName]) !== null && _target$methodName !== void 0 && _target$methodName.timerId) {
+        var _target$methodName2;
+        clearTimeout((_target$methodName2 = target[methodName]) === null || _target$methodName2 === void 0 ? void 0 : _target$methodName2.timerId);
+      }
+      Object.assign(target, defineProperty_defineProperty({}, methodName, {
+        timerId: setTimeout(fn),
+        fn: fn
+      }));
     }
   }, {
     key: "clearQueueStack",
-    value: function clearQueueStack(methodName) {
-      this.storage[methodName] && clearTimeout(this.storage[methodName]);
+    value: function clearQueueStack(methodName, key) {
+      var stackKey = key !== null && key !== void 0 ? key : this.defKey;
+      if (this.storage.has(stackKey)) {
+        var _target$methodName3;
+        var target = this.storage.get(stackKey);
+        if ((_target$methodName3 = target[methodName]) !== null && _target$methodName3 !== void 0 && _target$methodName3.timerId) {
+          var _target$methodName4;
+          clearTimeout((_target$methodName4 = target[methodName]) === null || _target$methodName4 === void 0 ? void 0 : _target$methodName4.timerId);
+        }
+      }
     }
   }]);
   return BkTableCache;
@@ -1439,176 +1646,6 @@ function _toConsumableArray(arr) {
     updateFixClass: updateFixClass
   };
 });
-;// CONCATENATED MODULE: external "../loading"
-var loading_x = y => { var x = {}; __webpack_require__.d(x, y); return x; }
-var loading_y = x => () => x
-const loading_namespaceObject = loading_x({ ["BkLoadingMode"]: () => __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_loading_dcf0e69a__.BkLoadingMode, ["BkLoadingSize"]: () => __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_loading_dcf0e69a__.BkLoadingSize, ["default"]: () => __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_loading_dcf0e69a__["default"] });
-;// CONCATENATED MODULE: external "../loading/loading.less"
-var loading_less_x = y => { var x = {}; __webpack_require__.d(x, y); return x; }
-var loading_less_y = x => () => x
-const loading_less_namespaceObject = loading_less_x({  });
-;// CONCATENATED MODULE: ../../packages/table/src/plugins/use-scroll-loading.tsx
-
-
-/*
- * Tencent is pleased to support the open source community by making
- * 蓝鲸智云PaaS平台社区版 (BlueKing PaaS Community Edition) available.
- *
- * Copyright (C) 2021 THL A29 Limited, a Tencent company.  All rights reserved.
- *
- * 蓝鲸智云PaaS平台社区版 (BlueKing PaaS Community Edition) is licensed under the MIT License.
- *
- * License for 蓝鲸智云PaaS平台社区版 (BlueKing PaaS Community Edition):
- *
- * ---------------------------------------------------
- * Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated
- * documentation files (the "Software"), to deal in the Software without restriction, including without limitation
- * the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and
- * to permit persons to whom the Software is furnished to do so, subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in all copies or substantial portions of
- * the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO
- * THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF
- * CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
- * IN THE SOFTWARE.
- */
-
-
-
-
-/* harmony default export */ const use_scroll_loading = (function (props, ctx) {
-  var refScrollLoading = (0,external_vue_namespaceObject.toRef)(props, 'scrollLoading');
-  var getLoadingOption = function getLoadingOption() {
-    if (typeof refScrollLoading.value === 'boolean') {
-      return {
-        loading: !!refScrollLoading.value,
-        inline: true,
-        title: '',
-        size: loading_namespaceObject.BkLoadingSize.Normal,
-        mode: loading_namespaceObject.BkLoadingMode.Default,
-        indicator: null
-      };
-    }
-    return refScrollLoading.value;
-  };
-  var isRender = (0,external_vue_namespaceObject.computed)(function () {
-    return refScrollLoading.value !== null && (typeof refScrollLoading.value === 'boolean' && refScrollLoading.value || typeof_typeof(refScrollLoading.value) === 'object');
-  });
-  var renderScrollLoading = function renderScrollLoading() {
-    if (isRender.value) {
-      var _ctx$slots$fixedBotto, _ctx$slots$fixedBotto2, _ctx$slots;
-      var _getLoadingOption = getLoadingOption(),
-        loading = _getLoadingOption.loading,
-        size = _getLoadingOption.size,
-        mode = _getLoadingOption.mode,
-        title = _getLoadingOption.title,
-        inline = _getLoadingOption.inline,
-        indicator = _getLoadingOption.indicator;
-      return (_ctx$slots$fixedBotto = (_ctx$slots$fixedBotto2 = (_ctx$slots = ctx.slots).fixedBottom) === null || _ctx$slots$fixedBotto2 === void 0 ? void 0 : _ctx$slots$fixedBotto2.call(_ctx$slots)) !== null && _ctx$slots$fixedBotto !== void 0 ? _ctx$slots$fixedBotto : (0,external_vue_namespaceObject.createVNode)(loading_namespaceObject["default"], {
-        loading: loading,
-        size: size,
-        mode: mode,
-        title: title,
-        inline: inline,
-        indicator: indicator
-      }, null);
-    }
-  };
-  return {
-    renderScrollLoading: renderScrollLoading
-  };
-});
-;// CONCATENATED MODULE: ../../node_modules/uuid/dist/esm-browser/native.js
-const randomUUID = typeof crypto !== 'undefined' && crypto.randomUUID && crypto.randomUUID.bind(crypto);
-/* harmony default export */ const esm_browser_native = ({
-  randomUUID
-});
-;// CONCATENATED MODULE: ../../node_modules/uuid/dist/esm-browser/rng.js
-// Unique ID creation requires a high quality random # generator. In the browser we therefore
-// require the crypto API and do not support built-in fallback to lower quality random number
-// generators (like Math.random()).
-let getRandomValues;
-const rnds8 = new Uint8Array(16);
-function rng() {
-  // lazy load so that environments that need to polyfill have a chance to do so
-  if (!getRandomValues) {
-    // getRandomValues needs to be invoked in a context where "this" is a Crypto implementation.
-    getRandomValues = typeof crypto !== 'undefined' && crypto.getRandomValues && crypto.getRandomValues.bind(crypto);
-
-    if (!getRandomValues) {
-      throw new Error('crypto.getRandomValues() not supported. See https://github.com/uuidjs/uuid#getrandomvalues-not-supported');
-    }
-  }
-
-  return getRandomValues(rnds8);
-}
-;// CONCATENATED MODULE: ../../node_modules/uuid/dist/esm-browser/stringify.js
-
-/**
- * Convert array of 16 byte values to UUID string format of the form:
- * XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX
- */
-
-const byteToHex = [];
-
-for (let i = 0; i < 256; ++i) {
-  byteToHex.push((i + 0x100).toString(16).slice(1));
-}
-
-function unsafeStringify(arr, offset = 0) {
-  // Note: Be careful editing this code!  It's been tuned for performance
-  // and works in ways you may not expect. See https://github.com/uuidjs/uuid/pull/434
-  return byteToHex[arr[offset + 0]] + byteToHex[arr[offset + 1]] + byteToHex[arr[offset + 2]] + byteToHex[arr[offset + 3]] + '-' + byteToHex[arr[offset + 4]] + byteToHex[arr[offset + 5]] + '-' + byteToHex[arr[offset + 6]] + byteToHex[arr[offset + 7]] + '-' + byteToHex[arr[offset + 8]] + byteToHex[arr[offset + 9]] + '-' + byteToHex[arr[offset + 10]] + byteToHex[arr[offset + 11]] + byteToHex[arr[offset + 12]] + byteToHex[arr[offset + 13]] + byteToHex[arr[offset + 14]] + byteToHex[arr[offset + 15]];
-}
-
-function stringify(arr, offset = 0) {
-  const uuid = unsafeStringify(arr, offset); // Consistency check for valid UUID.  If this throws, it's likely due to one
-  // of the following:
-  // - One or more input array values don't map to a hex octet (leading to
-  // "undefined" in the uuid)
-  // - Invalid input values for the RFC `version` or `variant` fields
-
-  if (!validate(uuid)) {
-    throw TypeError('Stringified UUID is invalid');
-  }
-
-  return uuid;
-}
-
-/* harmony default export */ const esm_browser_stringify = ((/* unused pure expression or super */ null && (stringify)));
-;// CONCATENATED MODULE: ../../node_modules/uuid/dist/esm-browser/v4.js
-
-
-
-
-function v4(options, buf, offset) {
-  if (esm_browser_native.randomUUID && !buf && !options) {
-    return esm_browser_native.randomUUID();
-  }
-
-  options = options || {};
-  const rnds = options.random || (options.rng || rng)(); // Per 4.4, set bits for version and `clock_seq_hi_and_reserved`
-
-  rnds[6] = rnds[6] & 0x0f | 0x40;
-  rnds[8] = rnds[8] & 0x3f | 0x80; // Copy bytes to buffer, if provided
-
-  if (buf) {
-    offset = offset || 0;
-
-    for (let i = 0; i < 16; ++i) {
-      buf[offset + i] = rnds[i];
-    }
-
-    return buf;
-  }
-
-  return unsafeStringify(rnds);
-}
-
-/* harmony default export */ const esm_browser_v4 = (v4);
 ;// CONCATENATED MODULE: external "lodash/debounce"
 var debounce_x = y => { var x = {}; __webpack_require__.d(x, y); return x; }
 var debounce_y = x => () => x
@@ -2847,7 +2884,7 @@ var getRowKeyNull = function getRowKeyNull(item, props, index) {
     if (props.rowKey === TABLE_ROW_ATTRIBUTE.ROW_INDEX) {
       return "__ROW_INDEX_".concat(index);
     }
-    return (0,get_namespaceObject["default"])(item, props.rowKey);
+    return props.rowKey;
   }
   if (typeof props.rowKey === 'function') {
     return Reflect.apply(props.rowKey, _this, [item]);
@@ -2941,7 +2978,7 @@ var skipThisColumn = function skipThisColumn(columns, colIndex, row, rowIndex) {
   for (var i = colIndex; i > 0; i--) {
     var colspan = resolveColumnSpan(columns[i], i, row, rowIndex, 'colspan');
     if (colspan > 1) {
-      skip = colspan - 1 + i >= colIndex;
+      skip = colspan - 1;
       break;
     }
   }
@@ -3021,7 +3058,7 @@ var isRowSelectEnable = function isRowSelectEnable(props, _ref3) {
 var getRowId = function getRowId(row, defVal, props) {
   var key = getRowKey(row, props, defVal);
   if (key !== undefined && row[key] !== undefined) {
-    return row[key];
+    return (0,get_namespaceObject["default"])(row, key);
   }
   return defVal;
 };
@@ -3044,6 +3081,147 @@ var getRawData = function getRawData(data) {
   }
   return data;
 };
+;// CONCATENATED MODULE: ../../packages/table/src/plugins/use-observer-resize.tsx
+
+/*
+ * Tencent is pleased to support the open source community by making
+ * 蓝鲸智云PaaS平台社区版 (BlueKing PaaS Community Edition) available.
+ *
+ * Copyright (C) 2021 THL A29 Limited, a Tencent company.  All rights reserved.
+ *
+ * 蓝鲸智云PaaS平台社区版 (BlueKing PaaS Community Edition) is licensed under the MIT License.
+ *
+ * License for 蓝鲸智云PaaS平台社区版 (BlueKing PaaS Community Edition):
+ *
+ * ---------------------------------------------------
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated
+ * documentation files (the "Software"), to deal in the Software without restriction, including without limitation
+ * the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and
+ * to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial portions of
+ * the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO
+ * THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF
+ * CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
+ * IN THE SOFTWARE.
+ */
+
+
+
+/* harmony default export */ const use_observer_resize = (function (target, fn) {
+  var args = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [];
+  var immediate = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : true;
+  var instance = null;
+  var dispose = function dispose() {
+    if (instance) {
+      instance.disconnect();
+      instance = null;
+    }
+  };
+  (0,external_vue_namespaceObject.watch)(target, function () {
+    if (!(0,shared_namespaceObject.isElement)(target.value)) {
+      return;
+    }
+    dispose();
+    instance = observerResize(target.value, function () {
+      fn === null || fn === void 0 || fn.apply.apply(fn, _toConsumableArray(args));
+    }, 60, true, 'debounce');
+    if (immediate) {
+      instance.start();
+    }
+  }, {
+    flush: 'post',
+    immediate: true
+  });
+  return {
+    instance: instance
+  };
+});
+;// CONCATENATED MODULE: external "../loading"
+var loading_x = y => { var x = {}; __webpack_require__.d(x, y); return x; }
+var loading_y = x => () => x
+const loading_namespaceObject = loading_x({ ["BkLoadingMode"]: () => __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_loading_dcf0e69a__.BkLoadingMode, ["BkLoadingSize"]: () => __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_loading_dcf0e69a__.BkLoadingSize, ["default"]: () => __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_loading_dcf0e69a__["default"] });
+;// CONCATENATED MODULE: external "../loading/loading.less"
+var loading_less_x = y => { var x = {}; __webpack_require__.d(x, y); return x; }
+var loading_less_y = x => () => x
+const loading_less_namespaceObject = loading_less_x({  });
+;// CONCATENATED MODULE: ../../packages/table/src/plugins/use-scroll-loading.tsx
+
+
+/*
+ * Tencent is pleased to support the open source community by making
+ * 蓝鲸智云PaaS平台社区版 (BlueKing PaaS Community Edition) available.
+ *
+ * Copyright (C) 2021 THL A29 Limited, a Tencent company.  All rights reserved.
+ *
+ * 蓝鲸智云PaaS平台社区版 (BlueKing PaaS Community Edition) is licensed under the MIT License.
+ *
+ * License for 蓝鲸智云PaaS平台社区版 (BlueKing PaaS Community Edition):
+ *
+ * ---------------------------------------------------
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated
+ * documentation files (the "Software"), to deal in the Software without restriction, including without limitation
+ * the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and
+ * to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial portions of
+ * the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO
+ * THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF
+ * CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
+ * IN THE SOFTWARE.
+ */
+
+
+
+
+/* harmony default export */ const use_scroll_loading = (function (props, ctx) {
+  var refScrollLoading = (0,external_vue_namespaceObject.toRef)(props, 'scrollLoading');
+  var getLoadingOption = function getLoadingOption() {
+    if (typeof refScrollLoading.value === 'boolean') {
+      return {
+        loading: !!refScrollLoading.value,
+        inline: true,
+        title: '',
+        size: loading_namespaceObject.BkLoadingSize.Normal,
+        mode: loading_namespaceObject.BkLoadingMode.Default,
+        indicator: null
+      };
+    }
+    return refScrollLoading.value;
+  };
+  var isRender = (0,external_vue_namespaceObject.computed)(function () {
+    return refScrollLoading.value !== null && (typeof refScrollLoading.value === 'boolean' && refScrollLoading.value || typeof_typeof(refScrollLoading.value) === 'object');
+  });
+  var renderScrollLoading = function renderScrollLoading() {
+    if (isRender.value) {
+      var _ctx$slots$fixedBotto, _ctx$slots$fixedBotto2, _ctx$slots;
+      var _getLoadingOption = getLoadingOption(),
+        loading = _getLoadingOption.loading,
+        size = _getLoadingOption.size,
+        mode = _getLoadingOption.mode,
+        title = _getLoadingOption.title,
+        inline = _getLoadingOption.inline,
+        indicator = _getLoadingOption.indicator;
+      return (_ctx$slots$fixedBotto = (_ctx$slots$fixedBotto2 = (_ctx$slots = ctx.slots).fixedBottom) === null || _ctx$slots$fixedBotto2 === void 0 ? void 0 : _ctx$slots$fixedBotto2.call(_ctx$slots)) !== null && _ctx$slots$fixedBotto !== void 0 ? _ctx$slots$fixedBotto : (0,external_vue_namespaceObject.createVNode)(loading_namespaceObject["default"], {
+        loading: loading,
+        size: size,
+        mode: mode,
+        title: title,
+        inline: inline,
+        indicator: indicator
+      }, null);
+    }
+  };
+  return {
+    renderScrollLoading: renderScrollLoading
+  };
+});
 ;// CONCATENATED MODULE: ../../packages/table/src/plugins/use-pagination.tsx
 
 
@@ -3271,7 +3449,7 @@ function use_attributes_objectSpread(e) { for (var r = 1; r < arguments.length;
 
 
 
-/* harmony default export */ const use_attributes = (function (props) {
+var tableSchemaResponse = function tableSchemaResponse(props) {
   var t = (0,config_provider_namespaceObject.useLocale)('table');
   var getDefaultSettings = function getDefaultSettings() {
     var _ref, _SETTING_SIZE$size;
@@ -3936,7 +4114,8 @@ function use_attributes_objectSpread(e) { for (var r = 1; r < arguments.length;
     formatData: formatData,
     setIndexData: setIndexData
   };
-});
+};
+/* harmony default export */ const use_attributes = (tableSchemaResponse);
 ;// CONCATENATED MODULE: ../../packages/table/src/use-column.ts
 
 /*
@@ -3975,6 +4154,11 @@ function use_attributes_objectSpread(e) { for (var r = 1; r < arguments.length;
 /* harmony default export */ const use_column = (function (props, targetColumns) {
   var _props$columns;
   var resolvedColumns = (0,external_vue_namespaceObject.reactive)((_props$columns = props.columns) !== null && _props$columns !== void 0 ? _props$columns : []);
+  /**
+   * 初始化Column配置
+   * @param column 传入
+   * @param remove 是否移除当前列
+   */
   var initColumns = function initColumns(column) {
     var remove = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
     var resolveColumns = [];
@@ -3986,7 +4170,7 @@ function use_attributes_objectSpread(e) { for (var r = 1; r < arguments.length;
     if (!remove) {
       resolveColumns.forEach(function (col) {
         var index = targetColumns.findIndex(function (tc) {
-          return tc.label === col.label && tc.field === col.field;
+          return tc.label === col.label && tc.field === col.field && tc.uniqueId === col.uniqueId;
         });
         if (index >= 0) {
           Object.assign(targetColumns[index], col);
@@ -4000,7 +4184,7 @@ function use_attributes_objectSpread(e) { for (var r = 1; r < arguments.length;
     } else {
       resolveColumns.forEach(function (col) {
         var matchColIndex = targetColumns.findIndex(function (c) {
-          return c.label === col.label && c.field === col.field;
+          return c.label === col.label && c.field === col.field && c.uniqueId === col.uniqueId;
         });
         if (matchColIndex >= 0) {
           targetColumns.splice(matchColIndex, 1);
@@ -4420,14 +4604,21 @@ const directives_namespaceObject = directives_x({ ["bkEllipsisInstance"]: () =>
     });
     var resolveSetting = function resolveSetting() {
       if (/boolean|object/.test(typeof_typeof(props.column.showOverflowTooltip)) && props.column.showOverflowTooltip !== null) {
+        var _props$column$showOve = props.column.showOverflowTooltip,
+          _props$column$showOve2 = _props$column$showOve.content,
+          content = _props$column$showOve2 === void 0 ? '' : _props$column$showOve2,
+          _props$column$showOve3 = _props$column$showOve.mode,
+          mode = _props$column$showOve3 === void 0 ? undefined : _props$column$showOve3,
+          _props$column$showOve4 = _props$column$showOve.popoverOption,
+          popoverOption = _props$column$showOve4 === void 0 ? {} : _props$column$showOve4;
         var result = {
           showOverflowTooltip: {
-            content: '',
+            content: content,
             disabled: !props.column.showOverflowTooltip,
-            mode: undefined,
+            mode: mode,
             resizerWay: undefined,
             watchCellResize: undefined,
-            popoverOption: {}
+            popoverOption: popoverOption
           }
         };
         if (props.parentSetting !== null && typeof_typeof(props.parentSetting) === 'object') {
@@ -4445,15 +4636,17 @@ const directives_namespaceObject = directives_x({ ["bkEllipsisInstance"]: () =>
         showOverflowTooltip: props.parentSetting
       };
     };
-    var _resolveSetting = resolveSetting(),
-      _resolveSetting$showO = _resolveSetting.showOverflowTooltip,
-      showOverflowTooltip = _resolveSetting$showO === void 0 ? false : _resolveSetting$showO;
     var bkEllipsisIns = null;
     var resolveTooltipOption = function resolveTooltipOption() {
+      var _getEllipsisTarget$cl, _getEllipsisTarget, _getEllipsisTarget$cl2;
+      var _resolveSetting = resolveSetting(),
+        _resolveSetting$showO = _resolveSetting.showOverflowTooltip,
+        showOverflowTooltip = _resolveSetting$showO === void 0 ? false : _resolveSetting$showO;
       var disabled = true;
       var resizerWay = props.resizerWay;
+      var defaultContent = (_getEllipsisTarget$cl = (_getEllipsisTarget = getEllipsisTarget()) === null || _getEllipsisTarget === void 0 || (_getEllipsisTarget$cl2 = _getEllipsisTarget.cloneNode) === null || _getEllipsisTarget$cl2 === void 0 ? void 0 : _getEllipsisTarget$cl2.call(_getEllipsisTarget, true)) !== null && _getEllipsisTarget$cl !== void 0 ? _getEllipsisTarget$cl : '';
       var content = function content() {
-        return refRoot.value.innerText;
+        return defaultContent;
       };
       var popoverOption = {};
       var mode = 'auto';
@@ -4466,7 +4659,7 @@ const directives_namespaceObject = directives_x({ ["bkEllipsisInstance"]: () =>
         popoverOption = showOverflowTooltip.popoverOption;
         resizerWay = showOverflowTooltip.resizerWay || 'debounce';
         content = function content() {
-          return showOverflowTooltip.content || refRoot.value.innerText;
+          return showOverflowTooltip.content || defaultContent;
         };
         if (typeof showOverflowTooltip.content === 'function') {
           content = function content() {
@@ -4492,12 +4685,12 @@ const directives_namespaceObject = directives_x({ ["bkEllipsisInstance"]: () =>
         }
       }
       if (props.isHead) {
-        var _props$column$showOve, _props$column;
-        disabled = !((_props$column$showOve = (_props$column = props.column) === null || _props$column === void 0 || (_props$column = _props$column.showOverflowTooltip) === null || _props$column === void 0 ? void 0 : _props$column.showHead) !== null && _props$column$showOve !== void 0 ? _props$column$showOve : true);
+        var _props$column$showOve5, _props$column;
+        disabled = !((_props$column$showOve5 = (_props$column = props.column) === null || _props$column === void 0 || (_props$column = _props$column.showOverflowTooltip) === null || _props$column === void 0 ? void 0 : _props$column.showHead) !== null && _props$column$showOve5 !== void 0 ? _props$column$showOve5 : true);
         mode = 'auto';
         content = function content() {
-          var _getEllipsisTarget;
-          return (_getEllipsisTarget = getEllipsisTarget()) === null || _getEllipsisTarget === void 0 ? void 0 : _getEllipsisTarget.innerHTML;
+          var _getEllipsisTarget$cl3, _getEllipsisTarget2, _getEllipsisTarget2$c;
+          return (_getEllipsisTarget$cl3 = (_getEllipsisTarget2 = getEllipsisTarget()) === null || _getEllipsisTarget2 === void 0 || (_getEllipsisTarget2$c = _getEllipsisTarget2.cloneNode) === null || _getEllipsisTarget2$c === void 0 ? void 0 : _getEllipsisTarget2$c.call(_getEllipsisTarget2, true)) !== null && _getEllipsisTarget$cl3 !== void 0 ? _getEllipsisTarget$cl3 : '';
         };
         if (props.headExplain) {
           mode = 'static';
@@ -4773,7 +4966,7 @@ function _isSlot(s) {
       return resolvePropVal(item, ['id', 'field', 'type'], [item, index]);
     };
     var checkAll = (0,external_vue_namespaceObject.ref)(false);
-    var isShow = (0,external_vue_namespaceObject.ref)(false);
+    var refSetting = (0,external_vue_namespaceObject.ref)(null);
     var localSettings = (0,external_vue_namespaceObject.computed)(function () {
       var deafultSettings = {
         fields: props.columns.map(function (col) {
@@ -4786,6 +4979,7 @@ function _isSlot(s) {
         size: 'small',
         sizeList: defaultSizeList,
         showLineHeight: true,
+        extCls: '',
         trigger: 'manual'
       };
       if (typeof props.settings === 'boolean') {
@@ -4808,6 +5002,7 @@ function _isSlot(s) {
       checkedFields: localSettings.value.checked || []
     };
     var handleSaveClick = function handleSaveClick() {
+      var _refSetting$value;
       Object.assign(cachedValue, {
         checkAll: checkAll.value,
         activeSize: activeSize.value,
@@ -4820,17 +5015,21 @@ function _isSlot(s) {
         height: activeHeight.value,
         fields: (0,external_vue_namespaceObject.unref)(renderFields)
       });
-      isShow.value = false;
+      (_refSetting$value = refSetting.value) === null || _refSetting$value === void 0 || _refSetting$value.hide();
     };
     var handleCancelClick = function handleCancelClick() {
+      var _refSetting$value2;
       checkAll.value = cachedValue.checkAll;
       activeSize.value = cachedValue.activeSize;
       activeHeight.value = cachedValue.activeHeight;
       checkedFields.value = cachedValue.checkedFields;
-      isShow.value = false;
+      (_refSetting$value2 = refSetting.value) === null || _refSetting$value2 === void 0 || _refSetting$value2.hide();
     };
     var handleSettingClick = function handleSettingClick() {
-      isShow.value = true;
+      if (localSettings.value.trigger === 'manual') {
+        var _refSetting$value3;
+        (_refSetting$value3 = refSetting.value) === null || _refSetting$value3 === void 0 || _refSetting$value3.show();
+      }
     };
     var handleCheckAllClick = function handleCheckAllClick(e) {
       e.stopImmediatePropagation();
@@ -4925,9 +5124,10 @@ function _isSlot(s) {
       var _localSettings$value$2;
       return props.settings ? (0,external_vue_namespaceObject.createVNode)(popover_namespaceObject["default"], (0,external_vue_namespaceObject.mergeProps)({
         "trigger": (_localSettings$value$2 = localSettings.value.trigger) !== null && _localSettings$value$2 !== void 0 ? _localSettings$value$2 : 'manual',
-        "isShow": isShow.value,
         "placement": "bottom-end",
-        "arrow": true
+        "ref": refSetting,
+        "arrow": true,
+        "extCls": localSettings.value.extCls
       }, {
         theme: theme
       }), {
@@ -5049,6 +5249,31 @@ function _isSlot(s) {
   if (!props.rowDraggable) {
     return {};
   }
+  var placeDiv = document.createElement('div');
+  placeDiv.style.setProperty('height', '20px');
+  placeDiv.style.setProperty('width', '100%');
+  placeDiv.style.setProperty('background', '#E2EDFF');
+  placeDiv.style.setProperty('cursor', 'move');
+  ['dragenter', 'dragover'].forEach(function (type) {
+    placeDiv.addEventListener(type, function (event) {
+      event.preventDefault();
+      event.stopPropagation();
+      event.dataTransfer.dropEffect = 'move';
+    });
+  });
+  var lastDragRow = null;
+  var lastDragRowClass = '';
+  var insertPlaceDiv = function insertPlaceDiv(target, placement) {
+    if (placement === '--top') {
+      target.parentNode.insertBefore(placeDiv, target);
+      return;
+    }
+    if (target.nextElementSibling === null) {
+      target.parentNode.append(placeDiv);
+      return;
+    }
+    target.parentNode.insertBefore(placeDiv, target.nextElementSibling);
+  };
   var beforeEventFire = function beforeEventFire(fn) {
     if (props.rowDraggable) {
       fn === null || fn === void 0 || fn();
@@ -5062,9 +5287,10 @@ function _isSlot(s) {
     var _target$getBoundingCl = target.getBoundingClientRect(),
       top = _target$getBoundingCl.top,
       bottom = _target$getBoundingCl.bottom;
-    var position = y - top > bottom - y ? '--bottom' : '--top';
+    var placement = y - top > bottom - y ? '--bottom' : '--top';
     removeDragClass(target);
-    target.classList.add(position);
+    target.classList.add(placement);
+    insertPlaceDiv(target, placement);
   };
   var removeDragClass = function removeDragClass(target) {
     var classList = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : ['--bottom', '--top'];
@@ -5075,45 +5301,59 @@ function _isSlot(s) {
   var onDragstart = function onDragstart(event) {
     beforeEventFire(function () {
       var target = getTargetRow(event);
+      placeDiv.style.setProperty('height', "".concat(target.offsetHeight, "px"));
+      placeDiv.style.setProperty('width', "".concat(target.offsetWidth, "px"));
       target.classList.add('--drag-start');
+      event.dataTransfer.setDragImage(target, 0, 0);
       event.dataTransfer.setData('text/plain', null);
-      event.dataTransfer.dropEffect = 'copy';
+      event.dataTransfer.dropEffect = 'move';
       var rowIndex = event.target.dataset.rowIndex;
       event.dataTransfer.setData('data-row-index', rowIndex);
     });
   };
   var onDragenter = function onDragenter(event) {
+    var target = getTargetRow(event);
+    event.preventDefault();
+    event.stopPropagation();
     beforeEventFire(function () {
       event.dataTransfer.dropEffect = 'move';
-      var target = getTargetRow(event);
       target.classList.add('--drag-enter');
       setTargetRowPlacement(target, event);
+      lastDragRow = target;
     });
   };
   var onDragleave = function onDragleave(event) {
     beforeEventFire(function () {
       var target = getTargetRow(event);
+      lastDragRowClass = target.classList.contains('--bottom') ? '--bottom' : '--top';
       removeDragClass(target, ['--drag-enter', '--bottom', '--top']);
     });
   };
   var onDragover = function onDragover(event) {
     event.preventDefault();
+    event.stopPropagation();
     event.dataTransfer.dropEffect = 'move';
     var target = getTargetRow(event);
     setTargetRowPlacement(target, event);
   };
-  var onDrop = function onDrop(event) {
+  var onDragend = function onDragend(event) {
+    var _event$target$dataset;
     event.preventDefault();
     event.stopPropagation();
-    var target = getTargetRow(event);
+    placeDiv.remove();
+    if (!lastDragRow) {
+      return;
+    }
+    var target = lastDragRow;
     var rowIndex = target.dataset.rowIndex;
     var targetIndex = Number(rowIndex);
-    var sourceIndex = event.dataTransfer.getData('data-row-index');
-    if (target.classList.contains('--bottom')) {
+    var sourceIndex = (_event$target$dataset = event.target.dataset) === null || _event$target$dataset === void 0 ? void 0 : _event$target$dataset.rowIndex;
+    if (lastDragRowClass === '--bottom') {
       targetIndex = targetIndex + 1;
     }
     resp.changePageRowIndex(Number(sourceIndex), targetIndex);
-    removeDragClass(target, ['--drag-enter', '--bottom', '--top']);
+    lastDragRow = null;
+    lastDragRowClass = '';
     ctx.emit(EMIT_EVENTS.DRAG_END, {
       sourceEvent: event,
       data: resp.pageData
@@ -5124,7 +5364,7 @@ function _isSlot(s) {
     onDragleave: onDragleave,
     onDragstart: onDragstart,
     onDragover: onDragover,
-    onDrop: onDrop
+    onDragend: onDragend
   };
 });
 ;// CONCATENATED MODULE: external "../input"
@@ -5198,8 +5438,10 @@ function head_filter_isSlot(s) {
       resolveClassName = _usePrefix.resolveClassName;
     var t = (0,config_provider_namespaceObject.useLocale)('table');
     var column = props.column;
-    var _toRefs = (0,external_vue_namespaceObject.toRefs)(props.column),
-      filter = _toRefs.filter;
+    var filter = (0,external_vue_namespaceObject.computed)(function () {
+      var _props$column;
+      return (_props$column = props.column) === null || _props$column === void 0 ? void 0 : _props$column.filter;
+    });
     var checked = (0,external_vue_namespaceObject.computed)(function () {
       var _filter$value$checked, _filter$value;
       return (_filter$value$checked = (_filter$value = filter.value) === null || _filter$value === void 0 ? void 0 : _filter$value.checked) !== null && _filter$value$checked !== void 0 ? _filter$value$checked : [];
@@ -5246,7 +5488,6 @@ function head_filter_isSlot(s) {
       var filterList = list.filter(function (l) {
         return getRegExp(searchValue.value).test(l.value);
       });
-      console.log(' filterList: ', filterList);
       return filterList;
     });
     var getRegExp = function getRegExp(val) {
@@ -6100,7 +6341,7 @@ function use_render_isSlot(s) {
     }
     return '';
   };
-  var getRowSpanConfig = function getRowSpanConfig(row, index, preRow, col, store) {
+  var getRowSpanConfig = function getRowSpanConfig(row, rowIndex, preRow, col, store) {
     var _store$get$get, _store$get;
     if (!store.has(row)) {
       store.set(row, new WeakMap());
@@ -6115,7 +6356,7 @@ function use_render_isSlot(s) {
       _ref$skipRowLen = _ref.skipRowLen,
       skipRowLen = _ref$skipRowLen === void 0 ? 0 : _ref$skipRowLen;
     var skipRow = false;
-    var rowspan = resolveColumnSpan(col, null, row, index, 'rowspan');
+    var rowspan = resolveColumnSpan(col, null, row, rowIndex, 'rowspan');
     if (skipRowLen > 1) {
       skipRowLen = skipRowLen - 1;
       skipRow = true;
@@ -6166,7 +6407,8 @@ function use_render_isSlot(s) {
         return [(0,external_vue_namespaceObject.createVNode)("tr", (0,external_vue_namespaceObject.mergeProps)({
           "style": rowStyle,
           "class": rowClass,
-          "key": getRowKeyNull(row, props, rowIndex),
+          "data-row-id": rowId,
+          "key": rowId,
           "data-row-index": rowIndex,
           "onClick": function onClick(e) {
             return handleRowClick(e, row, rowIndex, rows);
@@ -6188,7 +6430,7 @@ function use_render_isSlot(s) {
             rowspan = _resolveCellSpan.rowspan;
           var _tableResp$getColumnA = tableResp.getColumnAttribute(column, COLUMN_ATTRIBUTE.COL_SPAN),
             skipCol = _tableResp$getColumnA.skipCol;
-          var _ref2 = needRowSpan && !isChild ? getRowSpanConfig(row, index, preRow, column, rowSpanMap) : {
+          var _ref2 = needRowSpan && !isChild ? getRowSpanConfig(row, rowIndex, preRow, column, rowSpanMap) : {
               skipRow: false
             },
             skipRow = _ref2.skipRow;
@@ -6538,6 +6780,7 @@ function table_objectSpread(e) { for (var r = 1; r < arguments.length; r++) { va
 
 
 
+
 /* harmony default export */ const table = ((0,external_vue_namespaceObject.defineComponent)({
   // eslint-disable-next-line vue/no-reserved-component-names
   name: 'Table',
@@ -6594,6 +6837,11 @@ function table_objectSpread(e) { for (var r = 1; r < arguments.length; r++) { va
         hasScrollY: hasScrollYRef.value
       };
     });
+    use_observer_resize(root, function () {
+      (0,external_vue_namespaceObject.nextTick)(function () {
+        resolveFixedColumns(tableOffsetRight.value);
+      });
+    });
     var _useRender = use_render(props, ctx, tableSchema, styleRef, head, root, resetTableHeight),
       renderTableBodySchema = _useRender.renderTableBodySchema,
       renderTableFooter = _useRender.renderTableFooter,
@@ -6611,13 +6859,12 @@ function table_objectSpread(e) { for (var r = 1; r < arguments.length; r++) { va
       }
     };
     var isFirstLoad = (0,external_vue_namespaceObject.ref)(true);
-    // const tableWidth = ref(null);
-    (0,external_vue_namespaceObject.watch)(function () {
-      return [props.data, columns];
-    }, function () {
+    (0,external_vue_namespaceObject.watchEffect)(function () {
+      tableSchema.formatDataSchema(props.data);
+      tableSchema.formatColumns(columns);
+      resolveFixedColumns(tableOffsetRight.value);
       tableSchema.setIndexData().then(function () {
-        tableSchema.formatColumns(columns);
-        tableSchema.formatDataSchema(props.data);
+        // tableSchema.formatDataSchema(props.data);
         tableSchema.resetStartEndIndex();
         if (isFirstLoad.value) {
           tableSchema.resolveByDefColumns();
@@ -6628,7 +6875,6 @@ function table_objectSpread(e) { for (var r = 1; r < arguments.length; r++) { va
         registerResizeEvent();
         (0,external_vue_namespaceObject.nextTick)(function () {
           updateOffsetRight();
-          resolveFixedColumns(tableOffsetRight.value);
           /**
            * 确保在所有数据渲染完毕再执行fix column计算
            */
@@ -6637,9 +6883,6 @@ function table_objectSpread(e) { for (var r = 1; r < arguments.length; r++) { va
           });
         });
       });
-    }, {
-      immediate: true,
-      deep: true
     });
     (0,external_vue_namespaceObject.watch)(function () {
       return [props.height, props.maxHeight, props.minHeight];