bkui-vue 0.0.1-beta.21 → 0.0.1-beta.22

package/dist/bkui-vue.cjs.js

@@ -6003,7 +6003,8 @@ const tableProps = __spreadValues({
   showHead: PropTypes.bool.def(true),
   virtualEnabled: PropTypes.bool.def(false),
   border: PropTypes.arrayOf(PropTypes.commonType(BORDER_OPRIONS, "border")).def(["row"]),
-  pagination: PropTypes.oneOfType([PropTypes.bool.def(false), PropTypes.object.def({})]).def(false)
+  pagination: PropTypes.oneOfType([PropTypes.bool.def(false), PropTypes.object.def({})]).def(false),
+  remotePagination: PropTypes.bool.def(false)
 }, EventProps$1);
 const resolvePropVal = (prop, key, args) => {
   if (Object.prototype.hasOwnProperty.call(prop, key)) {
@@ -6126,7 +6127,13 @@ const isPercentPixOrNumber = (val) => /^\d+\.?\d*(px|%)?$/.test(`${val}`);
 const resolvePaginationOption = (propPagination, defVal) => {
   if (!!propPagination) {
     if (typeof propPagination === "object") {
-      return __spreadValues(__spreadValues({}, propPagination), defVal);
+      let current = Object.prototype.hasOwnProperty.call(propPagination, "current") ? propPagination.current : propPagination.value;
+      if (!/\d+/.test(current)) {
+        current = 1;
+      }
+      return __spreadProps(__spreadValues(__spreadValues({}, defVal), propPagination), {
+        current
+      });
     }
     return defVal;
   }
@@ -6606,7 +6613,24 @@ class TableRender {
     }, [this.renderColGroup(), this.renderTBody(rows)]);
   }
   renderTableFooter(options) {
-    return vue.createVNode(BkPagination, options, null);
+    return vue.createVNode(BkPagination, vue.mergeProps(options, {
+      "modelValue": options.current,
+      "onLimitChange": (limit) => this.handlePageLimitChange(limit),
+      "onChange": (current) => this.hanlePageChange(current)
+    }), null);
+  }
+  handlePageLimitChange(limit) {
+    Object.assign(this.props.pagination, {
+      limit
+    });
+    this.context.emit("page-limit-change", limit);
+  }
+  hanlePageChange(current) {
+    Object.assign(this.props.pagination, {
+      current,
+      value: current
+    });
+    this.context.emit("page-value-change", current);
   }
   setColumnActive(index, single = false) {
     const col = this.propActiveCols.find((item) => item.index === index);
@@ -6946,11 +6970,24 @@ var Component$4 = vue.defineComponent({
     const colgroups = vue.reactive(props.columns.map((col) => __spreadProps(__spreadValues({}, col), {
       calcWidth: null
     })));
+    const startIndex = vue.ref(0);
+    const endIndex = vue.ref(0);
     let pagination2 = vue.reactive({
       count: 0,
       limit: 10,
       current: 1
     });
+    pagination2 = resolvePaginationOption(props.pagination, pagination2);
+    const resetStartEndIndex = () => {
+      if (!props.pagination || props.remotePagination) {
+        startIndex.value = 0;
+        endIndex.value = props.data.length;
+        return;
+      }
+      startIndex.value = (pagination2.current - 1) * pagination2.limit;
+      endIndex.value = pagination2.current * pagination2.limit;
+    };
+    resetStartEndIndex();
     let observerIns = null;
     const root = vue.ref();
     const getActiveColumns = () => (props.columns || []).map((_column, index) => ({
@@ -6962,21 +6999,6 @@ var Component$4 = vue.defineComponent({
       activeColumns: getActiveColumns(),
       scrollTranslateY: 0
     });
-    const wrapperStyle = vue.computed(() => ({
-      minHeight: resolveNumberOrStringToPix(props.minHeight, "auto")
-    }));
-    const contentStyle = vue.computed(() => {
-      const resolveHeight = resolveNumberOrStringToPix(props.height);
-      const resolveHeadHeight = props.showHead ? resolveNumberOrStringToPix(props.headHeight) : "0";
-      const isAutoHeight = !isPercentPixOrNumber(props.height);
-      return __spreadValues({
-        display: "block"
-      }, isAutoHeight ? {
-        maxHeight: `calc(${resolveHeight} - ${resolveHeadHeight} - 2px)`
-      } : {
-        height: `calc(${resolveHeight} - ${resolveHeadHeight} - 2px)`
-      });
-    });
     vue.watch(() => [props.activeColumn, props.columns, props.pagination], () => {
       vue.nextTick(() => {
         reactiveProp.activeColumns = getActiveColumns();
@@ -6987,11 +7009,38 @@ var Component$4 = vue.defineComponent({
           });
         });
         pagination2 = resolvePaginationOption(props.pagination, pagination2);
+        resetStartEndIndex();
       });
     }, {
       deep: true
     });
     const tableRender = new TableRender(props, ctx, reactiveProp, colgroups);
+    const wrapperStyle = vue.computed(() => ({
+      minHeight: resolveNumberOrStringToPix(props.minHeight, "auto")
+    }));
+    const pageData = vue.computed(() => props.data.slice(startIndex.value, endIndex.value));
+    const localPagination = vue.computed(() => {
+      if (!props.pagination) {
+        return null;
+      }
+      return props.remotePagination ? pagination2 : __spreadProps(__spreadValues({}, pagination2), {
+        count: props.data.length
+      });
+    });
+    const contentStyle = vue.computed(() => {
+      const resolveHeight = resolveNumberOrStringToPix(props.height);
+      const resolveHeadHeight = props.showHead ? resolveNumberOrStringToPix(props.headHeight) : "0";
+      const isAutoHeight = !isPercentPixOrNumber(props.height);
+      const resolveFooterHeight = props.pagination ? 40 : 0;
+      const contentHeight = `calc(${resolveHeight} - ${resolveHeadHeight} - ${resolveFooterHeight}px - 2px)`;
+      return __spreadValues({
+        display: "block"
+      }, isAutoHeight ? {
+        maxHeight: contentHeight
+      } : {
+        height: contentHeight
+      });
+    });
     const tableClass = vue.computed(() => classes({
       [resolveClassName("table")]: true
     }, resolvePropBorderToClassStr(props.border)));
@@ -7029,9 +7078,9 @@ var Component$4 = vue.defineComponent({
       "class": headClass
     }, [props.showHead && tableRender.renderTableHeadSchema()]), vue.createVNode(BkVirtualRender, {
       "lineHeight": props.rowHeight,
-      "contentClassName": contentClass,
+      "class": contentClass,
       "style": contentStyle.value,
-      "list": props.data,
+      "list": pageData.value,
       "onContentScroll": handleScrollChanged,
       "throttleDelay": 0,
       "enabled": props.virtualEnabled
@@ -7042,7 +7091,7 @@ var Component$4 = vue.defineComponent({
       }, null)
     }), vue.createVNode("div", {
       "class": footerClass
-    }, [props.pagination && tableRender.renderTableFooter(pagination2)])]);
+    }, [props.pagination && tableRender.renderTableFooter(localPagination.value)])]);
   }
 });
 const BkTable = withInstall(Component$4);
@@ -12751,6 +12800,7 @@ const getFlatdata = (props, treeData = void 0, cachedSchema = []) => {
             __isRoot: parent === null,
             __order: order2,
             __isOpen: isOpen,
+            __checked: false,
             [children]: null
           };
           Object.assign(item, { __uuid: uuid2 });
@@ -12809,15 +12859,14 @@ const getTreeStyle = (item, props) => {
     "--level-line": levelLine,
     "--lineHeight": `${props.lineHeight}px`,
     "--indent": `${props.indent}px`,
-    padding: 0
+    "--offset-left": `${props.offsetLeft}px`
   };
 };
 const getNodeItemStyle = (item, props, flatData = {}) => {
   const { schema } = flatData;
   const depth = getNodeAttr(schema, item.__uuid, "__depth");
   return __spreadValues({
-    "--depth": depth,
-    paddingLeft: 0
+    "--depth": depth
   }, typeof props.levelLine === "function" ? {
     "--level-line": getPropsOneOfBoolValueWithDefault(props, "levelLine", item, DEFAULT_LEVLE_LINE, null, [
       "node"
@@ -12834,6 +12883,13 @@ const getNodeItemClass = (item, schema, props) => {
     "level-line": props.levelLine
   };
 };
+const getNodeRowClass = (item, schema) => {
+  const { __checked } = getSchemaVal(schema, item.__uuid) || {};
+  return {
+    "is-checked": __checked,
+    "bk-node-row": true
+  };
+};
 const updateTreeNode = (path, treeData, childKey, nodekey, nodeValue) => {
   assignTreeNode(path, treeData, childKey, { [nodekey]: nodeValue });
 };
@@ -12865,20 +12921,21 @@ const treeProps = {
   async: PropTypes.shape({
     callback: PropTypes.func.def(null),
     cache: PropTypes.bool.def(true)
-  })
+  }),
+  offsetLeft: PropTypes.number.def(15)
 };
 var Component = vue.defineComponent({
   name: "Tree",
   props: treeProps,
-  setup(props) {
+  setup(props, ctx) {
     const formatData = getFlatdata(props);
+    const checkedNodes = [];
     const flatData = vue.reactive({
       data: formatData[0],
       schema: formatData[1],
       levelLineSchema: {}
     });
     vue.watch(() => [props.data], (newData) => {
-      console.log("props.data changed");
       const formatData2 = getFlatdata(props, newData, schemaValues.value);
       flatData.data = formatData2[0];
       flatData.schema = formatData2[1];
@@ -12919,6 +12976,9 @@ var Component = vue.defineComponent({
         return val;
       }
       if (typeof val === "object" && val !== null) {
+        if (val.__v_isVNode) {
+          return val;
+        }
         const {
           node,
           className,
@@ -12956,7 +13016,7 @@ var Component = vue.defineComponent({
         }
       }
       if (prefixFnVal === "default" || typeof props.prefixIcon === "boolean" && props.prefixIcon) {
-        return isRootNode(item) ? getRootIcon(item) : vue.createVNode(textFile, {
+        return isRootNode(item) || hasChildNode(item) ? getRootIcon(item) : vue.createVNode(textFile, {
           "class": "bk-tree-icon"
         }, null);
       }
@@ -13003,6 +13063,23 @@ var Component = vue.defineComponent({
         setNodeOpened(item);
       }
     };
+    const handleNodeActionClick = (node) => {
+      hanldeTreeNodeClick(node);
+    };
+    const handleNodeContentClick = (item) => {
+      if (!checkedNodes.includes(item.__uuid)) {
+        checkedNodes.forEach((__uuid) => setNodeAttr({
+          __uuid
+        }, "__checked", false));
+        checkedNodes.length = 0;
+        setNodeAttr(item, "__checked", true);
+        checkedNodes.push(item.__uuid);
+        if (!isNodeOpened(item)) {
+          hanldeTreeNodeClick(item);
+        }
+        ctx.emit("check", item, getSchemaVal2(item.__uuid));
+      }
+    };
     const checkNodeIsOpen = (node) => isRootNode(node) || isItemOpen(node) || isItemOpen(getNodeAttr2(node, "__parentId"));
     const filterNextNode = (depth, node) => {
       if (isRootNode(node)) {
@@ -13037,6 +13114,8 @@ var Component = vue.defineComponent({
       renderData,
       flatData,
       hanldeTreeNodeClick,
+      handleNodeContentClick,
+      handleNodeActionClick,
       getActionIcon,
       getRootIcon,
       getVirtualLines,
@@ -13047,10 +13126,17 @@ var Component = vue.defineComponent({
   render() {
     const props = this.$props;
     const renderTreeNode = (item) => vue.createVNode("div", {
+      "class": getNodeRowClass(item, this.flatData.schema)
+    }, [vue.createVNode("div", {
       "class": getNodeItemClass(item, this.flatData.schema, props),
-      "style": getNodeItemStyle(item, props, this.flatData),
-      "onClick": () => this.hanldeTreeNodeClick(item)
-    }, [[this.getActionIcon(item), this.getNodePrefixIcon(item), this.getLoadingIcon(item)], vue.createVNode("span", null, [getLabel(item, props)]), this.getVirtualLines(item)]);
+      "style": getNodeItemStyle(item, props, this.flatData)
+    }, [vue.createVNode("span", {
+      "class": "node-action",
+      "onClick": () => this.handleNodeActionClick(item)
+    }, [this.getActionIcon(item)]), vue.createVNode("span", {
+      "class": "node-content",
+      "onClick": () => this.handleNodeContentClick(item)
+    }, [[this.getNodePrefixIcon(item), this.getLoadingIcon(item)], vue.createVNode("span", null, [getLabel(item, props)])]), this.getVirtualLines(item)])]);
     return vue.createVNode(BkVirtualRender, {
       "class": "bk-tree",
       "style": getTreeStyle(null, props),

package/dist/bkui-vue.esm.js

@@ -6001,7 +6001,8 @@ const tableProps = __spreadValues({
   showHead: PropTypes.bool.def(true),
   virtualEnabled: PropTypes.bool.def(false),
   border: PropTypes.arrayOf(PropTypes.commonType(BORDER_OPRIONS, "border")).def(["row"]),
-  pagination: PropTypes.oneOfType([PropTypes.bool.def(false), PropTypes.object.def({})]).def(false)
+  pagination: PropTypes.oneOfType([PropTypes.bool.def(false), PropTypes.object.def({})]).def(false),
+  remotePagination: PropTypes.bool.def(false)
 }, EventProps$1);
 const resolvePropVal = (prop, key, args) => {
   if (Object.prototype.hasOwnProperty.call(prop, key)) {
@@ -6124,7 +6125,13 @@ const isPercentPixOrNumber = (val) => /^\d+\.?\d*(px|%)?$/.test(`${val}`);
 const resolvePaginationOption = (propPagination, defVal) => {
   if (!!propPagination) {
     if (typeof propPagination === "object") {
-      return __spreadValues(__spreadValues({}, propPagination), defVal);
+      let current = Object.prototype.hasOwnProperty.call(propPagination, "current") ? propPagination.current : propPagination.value;
+      if (!/\d+/.test(current)) {
+        current = 1;
+      }
+      return __spreadProps(__spreadValues(__spreadValues({}, defVal), propPagination), {
+        current
+      });
     }
     return defVal;
   }
@@ -6604,7 +6611,24 @@ class TableRender {
     }, [this.renderColGroup(), this.renderTBody(rows)]);
   }
   renderTableFooter(options) {
-    return createVNode(BkPagination, options, null);
+    return createVNode(BkPagination, mergeProps(options, {
+      "modelValue": options.current,
+      "onLimitChange": (limit) => this.handlePageLimitChange(limit),
+      "onChange": (current) => this.hanlePageChange(current)
+    }), null);
+  }
+  handlePageLimitChange(limit) {
+    Object.assign(this.props.pagination, {
+      limit
+    });
+    this.context.emit("page-limit-change", limit);
+  }
+  hanlePageChange(current) {
+    Object.assign(this.props.pagination, {
+      current,
+      value: current
+    });
+    this.context.emit("page-value-change", current);
   }
   setColumnActive(index, single = false) {
     const col = this.propActiveCols.find((item) => item.index === index);
@@ -6944,11 +6968,24 @@ var Component$4 = defineComponent({
     const colgroups = reactive(props.columns.map((col) => __spreadProps(__spreadValues({}, col), {
       calcWidth: null
     })));
+    const startIndex = ref(0);
+    const endIndex = ref(0);
     let pagination2 = reactive({
       count: 0,
       limit: 10,
       current: 1
     });
+    pagination2 = resolvePaginationOption(props.pagination, pagination2);
+    const resetStartEndIndex = () => {
+      if (!props.pagination || props.remotePagination) {
+        startIndex.value = 0;
+        endIndex.value = props.data.length;
+        return;
+      }
+      startIndex.value = (pagination2.current - 1) * pagination2.limit;
+      endIndex.value = pagination2.current * pagination2.limit;
+    };
+    resetStartEndIndex();
     let observerIns = null;
     const root = ref();
     const getActiveColumns = () => (props.columns || []).map((_column, index) => ({
@@ -6960,21 +6997,6 @@ var Component$4 = defineComponent({
       activeColumns: getActiveColumns(),
       scrollTranslateY: 0
     });
-    const wrapperStyle = computed(() => ({
-      minHeight: resolveNumberOrStringToPix(props.minHeight, "auto")
-    }));
-    const contentStyle = computed(() => {
-      const resolveHeight = resolveNumberOrStringToPix(props.height);
-      const resolveHeadHeight = props.showHead ? resolveNumberOrStringToPix(props.headHeight) : "0";
-      const isAutoHeight = !isPercentPixOrNumber(props.height);
-      return __spreadValues({
-        display: "block"
-      }, isAutoHeight ? {
-        maxHeight: `calc(${resolveHeight} - ${resolveHeadHeight} - 2px)`
-      } : {
-        height: `calc(${resolveHeight} - ${resolveHeadHeight} - 2px)`
-      });
-    });
     watch(() => [props.activeColumn, props.columns, props.pagination], () => {
       nextTick(() => {
         reactiveProp.activeColumns = getActiveColumns();
@@ -6985,11 +7007,38 @@ var Component$4 = defineComponent({
           });
         });
         pagination2 = resolvePaginationOption(props.pagination, pagination2);
+        resetStartEndIndex();
       });
     }, {
       deep: true
     });
     const tableRender = new TableRender(props, ctx, reactiveProp, colgroups);
+    const wrapperStyle = computed(() => ({
+      minHeight: resolveNumberOrStringToPix(props.minHeight, "auto")
+    }));
+    const pageData = computed(() => props.data.slice(startIndex.value, endIndex.value));
+    const localPagination = computed(() => {
+      if (!props.pagination) {
+        return null;
+      }
+      return props.remotePagination ? pagination2 : __spreadProps(__spreadValues({}, pagination2), {
+        count: props.data.length
+      });
+    });
+    const contentStyle = computed(() => {
+      const resolveHeight = resolveNumberOrStringToPix(props.height);
+      const resolveHeadHeight = props.showHead ? resolveNumberOrStringToPix(props.headHeight) : "0";
+      const isAutoHeight = !isPercentPixOrNumber(props.height);
+      const resolveFooterHeight = props.pagination ? 40 : 0;
+      const contentHeight = `calc(${resolveHeight} - ${resolveHeadHeight} - ${resolveFooterHeight}px - 2px)`;
+      return __spreadValues({
+        display: "block"
+      }, isAutoHeight ? {
+        maxHeight: contentHeight
+      } : {
+        height: contentHeight
+      });
+    });
     const tableClass = computed(() => classes({
       [resolveClassName("table")]: true
     }, resolvePropBorderToClassStr(props.border)));
@@ -7027,9 +7076,9 @@ var Component$4 = defineComponent({
       "class": headClass
     }, [props.showHead && tableRender.renderTableHeadSchema()]), createVNode(BkVirtualRender, {
       "lineHeight": props.rowHeight,
-      "contentClassName": contentClass,
+      "class": contentClass,
       "style": contentStyle.value,
-      "list": props.data,
+      "list": pageData.value,
       "onContentScroll": handleScrollChanged,
       "throttleDelay": 0,
       "enabled": props.virtualEnabled
@@ -7040,7 +7089,7 @@ var Component$4 = defineComponent({
       }, null)
     }), createVNode("div", {
       "class": footerClass
-    }, [props.pagination && tableRender.renderTableFooter(pagination2)])]);
+    }, [props.pagination && tableRender.renderTableFooter(localPagination.value)])]);
   }
 });
 const BkTable = withInstall(Component$4);
@@ -12749,6 +12798,7 @@ const getFlatdata = (props, treeData = void 0, cachedSchema = []) => {
             __isRoot: parent === null,
             __order: order2,
             __isOpen: isOpen,
+            __checked: false,
             [children]: null
           };
           Object.assign(item, { __uuid: uuid2 });
@@ -12807,15 +12857,14 @@ const getTreeStyle = (item, props) => {
     "--level-line": levelLine,
     "--lineHeight": `${props.lineHeight}px`,
     "--indent": `${props.indent}px`,
-    padding: 0
+    "--offset-left": `${props.offsetLeft}px`
   };
 };
 const getNodeItemStyle = (item, props, flatData = {}) => {
   const { schema } = flatData;
   const depth = getNodeAttr(schema, item.__uuid, "__depth");
   return __spreadValues({
-    "--depth": depth,
-    paddingLeft: 0
+    "--depth": depth
   }, typeof props.levelLine === "function" ? {
     "--level-line": getPropsOneOfBoolValueWithDefault(props, "levelLine", item, DEFAULT_LEVLE_LINE, null, [
       "node"
@@ -12832,6 +12881,13 @@ const getNodeItemClass = (item, schema, props) => {
     "level-line": props.levelLine
   };
 };
+const getNodeRowClass = (item, schema) => {
+  const { __checked } = getSchemaVal(schema, item.__uuid) || {};
+  return {
+    "is-checked": __checked,
+    "bk-node-row": true
+  };
+};
 const updateTreeNode = (path, treeData, childKey, nodekey, nodeValue) => {
   assignTreeNode(path, treeData, childKey, { [nodekey]: nodeValue });
 };
@@ -12863,20 +12919,21 @@ const treeProps = {
   async: PropTypes.shape({
     callback: PropTypes.func.def(null),
     cache: PropTypes.bool.def(true)
-  })
+  }),
+  offsetLeft: PropTypes.number.def(15)
 };
 var Component = defineComponent({
   name: "Tree",
   props: treeProps,
-  setup(props) {
+  setup(props, ctx) {
     const formatData = getFlatdata(props);
+    const checkedNodes = [];
     const flatData = reactive({
       data: formatData[0],
       schema: formatData[1],
       levelLineSchema: {}
     });
     watch(() => [props.data], (newData) => {
-      console.log("props.data changed");
       const formatData2 = getFlatdata(props, newData, schemaValues.value);
       flatData.data = formatData2[0];
       flatData.schema = formatData2[1];
@@ -12917,6 +12974,9 @@ var Component = defineComponent({
         return val;
       }
       if (typeof val === "object" && val !== null) {
+        if (val.__v_isVNode) {
+          return val;
+        }
         const {
           node,
           className,
@@ -12954,7 +13014,7 @@ var Component = defineComponent({
         }
       }
       if (prefixFnVal === "default" || typeof props.prefixIcon === "boolean" && props.prefixIcon) {
-        return isRootNode(item) ? getRootIcon(item) : createVNode(textFile, {
+        return isRootNode(item) || hasChildNode(item) ? getRootIcon(item) : createVNode(textFile, {
           "class": "bk-tree-icon"
         }, null);
       }
@@ -13001,6 +13061,23 @@ var Component = defineComponent({
         setNodeOpened(item);
       }
     };
+    const handleNodeActionClick = (node) => {
+      hanldeTreeNodeClick(node);
+    };
+    const handleNodeContentClick = (item) => {
+      if (!checkedNodes.includes(item.__uuid)) {
+        checkedNodes.forEach((__uuid) => setNodeAttr({
+          __uuid
+        }, "__checked", false));
+        checkedNodes.length = 0;
+        setNodeAttr(item, "__checked", true);
+        checkedNodes.push(item.__uuid);
+        if (!isNodeOpened(item)) {
+          hanldeTreeNodeClick(item);
+        }
+        ctx.emit("check", item, getSchemaVal2(item.__uuid));
+      }
+    };
     const checkNodeIsOpen = (node) => isRootNode(node) || isItemOpen(node) || isItemOpen(getNodeAttr2(node, "__parentId"));
     const filterNextNode = (depth, node) => {
       if (isRootNode(node)) {
@@ -13035,6 +13112,8 @@ var Component = defineComponent({
       renderData,
       flatData,
       hanldeTreeNodeClick,
+      handleNodeContentClick,
+      handleNodeActionClick,
       getActionIcon,
       getRootIcon,
       getVirtualLines,
@@ -13045,10 +13124,17 @@ var Component = defineComponent({
   render() {
     const props = this.$props;
     const renderTreeNode = (item) => createVNode("div", {
+      "class": getNodeRowClass(item, this.flatData.schema)
+    }, [createVNode("div", {
       "class": getNodeItemClass(item, this.flatData.schema, props),
-      "style": getNodeItemStyle(item, props, this.flatData),
-      "onClick": () => this.hanldeTreeNodeClick(item)
-    }, [[this.getActionIcon(item), this.getNodePrefixIcon(item), this.getLoadingIcon(item)], createVNode("span", null, [getLabel(item, props)]), this.getVirtualLines(item)]);
+      "style": getNodeItemStyle(item, props, this.flatData)
+    }, [createVNode("span", {
+      "class": "node-action",
+      "onClick": () => this.handleNodeActionClick(item)
+    }, [this.getActionIcon(item)]), createVNode("span", {
+      "class": "node-content",
+      "onClick": () => this.handleNodeContentClick(item)
+    }, [[this.getNodePrefixIcon(item), this.getLoadingIcon(item)], createVNode("span", null, [getLabel(item, props)])]), this.getVirtualLines(item)])]);
     return createVNode(BkVirtualRender, {
       "class": "bk-tree",
       "style": getTreeStyle(null, props),