diff --git a/packages/fighting-design/tree/components/tree-item/index.vue b/packages/fighting-design/tree/components/tree-item/index.vue
index 5e55451b21..3ee10c5b6a 100644
--- a/packages/fighting-design/tree/components/tree-item/index.vue
+++ b/packages/fighting-design/tree/components/tree-item/index.vue
@@ -13,7 +13,7 @@
const prop = defineProps(Props)
- defineOptions({ name: 'f-tree-item' })
+ defineOptions({ name: 'FTreeItem' })
const { run } = useRun()
@@ -61,6 +61,7 @@
if (__level) {
return { '--tree-item-level-padding': `${__level * offset.value}px` }
}
+
return {}
})
@@ -87,13 +88,19 @@
:show-label="false"
/>
+
- {{ model.label }}
+
+
+
+
+
+
{{ model.label }}
diff --git a/packages/fighting-design/tree/components/tree-item/interface.ts b/packages/fighting-design/tree/components/tree-item/interface.ts
index b8b54f6aa9..2755e8db15 100644
--- a/packages/fighting-design/tree/components/tree-item/interface.ts
+++ b/packages/fighting-design/tree/components/tree-item/interface.ts
@@ -1,3 +1,5 @@
+import type { FightingIcon } from '../../../_interface'
+
/**
* 子数每一项的类型接口
*
@@ -10,6 +12,7 @@
export interface TreeItemModel {
label: string
__level: number
+ icon?: FightingIcon
value?: number | string
disabled?: boolean
children?: TreeItemModel[]
diff --git a/packages/fighting-design/tree/src/interface.ts b/packages/fighting-design/tree/src/interface.ts
index 6811bbc803..fb4d4537f4 100644
--- a/packages/fighting-design/tree/src/interface.ts
+++ b/packages/fighting-design/tree/src/interface.ts
@@ -1,4 +1,5 @@
import type { TreeItemModel } from '../components'
+import type { FightingIcon } from '../../_interface'
export type { TreeProps } from './props'
@@ -8,12 +9,14 @@ export type { TreeProps } from './props'
* @param { string } label label
* @param { number | string } value 多选 checkbox 绑定的值
* @param { boolean } disabled 是否禁用当前标签
+ * @param { Object } icon 自定义 icon
* @param { Array } [children] 孩子节点
*/
export interface TreeDataItem {
label: string
value?: number | string
disabled?: boolean
+ icon?: FightingIcon
children?: TreeDataItem[]
}
diff --git a/packages/fighting-design/tree/src/tree.vue b/packages/fighting-design/tree/src/tree.vue
index 720666b539..06d149f3de 100644
--- a/packages/fighting-design/tree/src/tree.vue
+++ b/packages/fighting-design/tree/src/tree.vue
@@ -9,7 +9,7 @@
import type { CheckboxGroupChange } from '../../checkbox-group'
const prop = defineProps(Props)
- const modelVlaue = defineModel('check', { type: Array, default: [] })
+ const modelValue = defineModel('check', { type: Array, default: [] })
defineOptions({ name: 'FTree' })
@@ -53,7 +53,7 @@
const checkOption = ref([])
const checkboxChange: CheckboxGroupChange = (val): void => {
- modelVlaue.value = val
+ modelValue.value = val
}
/** 注入依赖项 */
diff --git a/packages/fighting-theme/src/tree.scss b/packages/fighting-theme/src/tree.scss
index dc2e002731..502dfafd16 100644
--- a/packages/fighting-theme/src/tree.scss
+++ b/packages/fighting-theme/src/tree.scss
@@ -33,21 +33,27 @@
// 前缀
.f-tree-item__label-prefix {
- font-size: 15px;
- color: #333;
display: flex;
align-items: center;
- column-gap: 8px;
+ column-gap: 6px;
// icon
.f-svg-icon {
margin-left: 5px;
transition: 0.3s;
+ font-size: 15px;
+ color: #333;
&.f-tree-item__icon-animation {
transform: rotate(90deg);
}
}
+
+ // 文字内容
+ .f-tree-item__text {
+ font-size: 15px;
+ color: #333;
+ }
}
}
diff --git a/start/src/App.vue b/start/src/App.vue
index f1bcb01e64..c6bae2f78a 100644
--- a/start/src/App.vue
+++ b/start/src/App.vue
@@ -1,18 +1,19 @@