feat(components): [tree-v2] add item-size attribute (#11522)

* feat(components): [tree-v2] add item-size attribute

* fix: modify internal variable name

* fix: extract itemSize prop

* test: add test case

* test: update test

docs/en-US/component/tree-v2.md

@@ -85,6 +85,7 @@ tree-v2/filter
 | filter-method         | this function will be executed on each node when use filter method. if return `false`, tree node will be hidden.                             | Function(value, data) | —       |
 | indent                | horizontal indentation of nodes in adjacent levels in pixels                                                                                 | number                | 16      |
 | icon                  | custom tree node icon                                                                                                                        | `string \| Component` | -       |
+| item-size             | custom tree node height                                                                                                                      | number                | 26      |
 
 ## props
 

packages/components/tree-v2/__tests__/tree.test.ts

@@ -122,6 +122,7 @@ const createTree = (
         :check-strictly="checkStrictly"
         :default-expanded-keys="defaultExpandedKeys"
         :indent="indent"
+        :item-size="itemSize"
         :icon-class="iconClass"
         :expand-on-click-node="expandOnClickNode"
         :check-on-click-node="checkOnClickNode"
@@ -152,6 +153,7 @@ const createTree = (
           checkStrictly: false,
           defaultExpandedKeys: undefined,
           indent: 16,
+          itemSize: 26,
           iconClass: undefined,
           expandOnClickNode: true,
           checkOnClickNode: false,
@@ -231,6 +233,21 @@ describe('Virtual Tree', () => {
     expect(el.style.height).toBe('300px')
   })
 
+  test('item-size', async () => {
+    const { wrapper } = createTree({
+      data() {
+        return {
+          itemSize: 40,
+        }
+      },
+    })
+    await nextTick()
+    const node = wrapper.find('.el-tree-node').element
+    const content = wrapper.find('.el-tree-node__content').element
+    expect(node.style.height).toBe('40px')
+    expect(content.style.height).toBe('40px')
+  })
+
   test('props', async () => {
     const { wrapper } = createTree({
       data() {

packages/components/tree-v2/src/tree-node.vue

@@ -19,7 +19,10 @@
   >
     <div
       :class="ns.be('node', 'content')"
-      :style="{ paddingLeft: `${(node.level - 1) * indent}px` }"
+      :style="{
+        paddingLeft: `${(node.level - 1) * indent}px`,
+        height: itemSize + 'px',
+      }"
     >
       <el-icon
         v-if="icon"

packages/components/tree-v2/src/tree.vue

@@ -9,7 +9,7 @@
       :data="flattenTree"
       :total="flattenTree.length"
       :height="height"
-      :item-size="itemSize"
+      :item-size="treeNodeSize"
       :perf-mode="perfMode"
     >
       <template #default="{ data, index, style }">
@@ -21,6 +21,7 @@
           :show-checkbox="showCheckbox"
           :checked="isChecked(data[index])"
           :indeterminate="isIndeterminate(data[index])"
+          :item-size="treeNodeSize"
           :disabled="isDisabled(data[index])"
           :current="isCurrent(data[index])"
           :hidden-expand-icon="isForceHiddenExpandIcon(data[index])"
@@ -39,7 +40,7 @@
 </template>
 
 <script lang="ts" setup>
-import { getCurrentInstance, provide, useSlots } from 'vue'
+import { computed, getCurrentInstance, provide, useSlots } from 'vue'
 import { useLocale, useNamespace } from '@element-plus/hooks'
 import { formItemContextKey } from '@element-plus/tokens'
 import { FixedSizeList } from '@element-plus/components/virtual-list'
@@ -56,7 +57,7 @@ const emit = defineEmits(treeEmits)
 
 const slots = useSlots()
 
-const itemSize = 26
+const treeNodeSize = computed(() => props.itemSize)
 
 provide(ROOT_TREE_INJECTION_KEY, {
   ctx: {

packages/components/tree-v2/src/virtual-tree.ts

@@ -38,6 +38,11 @@ export const enum SetOperationEnum {
   DELETE = 'delete',
 }
 
+const itemSize = {
+  type: Number,
+  default: 26,
+}
+
 // props
 export const treeProps = buildProps({
   data: {
@@ -87,6 +92,7 @@ export const treeProps = buildProps({
     type: Number,
     default: 16,
   },
+  itemSize,
   icon: {
     type: iconPropType,
   },
@@ -149,6 +155,7 @@ export const treeNodeProps = buildProps({
     type: Boolean,
     default: false,
   },
+  itemSize,
 } as const)
 
 export const treeNodeContentProps = buildProps({