Fighting Design

Appearance

On this page

Tree 树 ​

树形结构

基本使用 ​

需要传入一个 data 的树形结构来展示

Node 1
Node 2
Node 3
开启

禁用指定项 ​

数据中使用 disabled 可以禁用指定项

Node 1
Node 2
Node 3
开启

多选状态 ​

使用 is-check 配置项可配置多选，v-model:check 可获得选中的值

数据中可以使用 value 自定义选中返回的内容，默认为 label

[]
Node 1
Node 2
Node 3
开启

自定义 icon ​

数据中可以使用 icon 自定义图标

Node 1
Node 2
Node 3
开启

自定义缩进量 ​

offset 配置项可配置子节点的缩进偏移量

Node 1
Node 2
Node 3
开启

点击的回调 ​

on-click-label 配置项传入一个方法，接收 5 个参数，分别是：事件对象、当前的元素数据、打开状态、格式化后的树形数据

Node 1
Node 2
Node 3
开启

Attributes ​

参数说明类型可选值默认值
data树形数据TreeData——[]
is-check是否可多选boolean——false
offset子节点缩进偏移量number——40
on-click-label点击标签执行的回调TreeClickLabel————

Interface ​

组件导出以下类型定义：

ts
import type {
  TreeInstance,
  TreeProps,
  TreeDataItem,
  TreeData,
  TreeClickLabel,
  TreeItemModel
} from 'fighting-design'

TreeDataItem ​

ts
/**
 * 树形结构每一项类型接口
 *
 * @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[]
}

TreeData ​

ts
/** 树形结构数组类型 */
export type TreeData = TreeDataItem[]

TreeClickLabel ​

ts
/**
 * 点击每一项 label 执行的回调方法类型
 *
 * @param { Object } evt 事件对象
 * @param { string } label label
 * @param { number } level 层级
 * @param { Object } isOpen 展开状态
 * @param { Array } tree 格式化后的树形数据
 */
export type TreeClickLabel = (
  evt: MouseEvent,
  model: TreeItemModel,
  isOpen: boolean,
  tree: TreeItemModel[]
) => void

TreeItemModel ​

ts
/**
 * 子数每一项的类型接口
 *
 * @param { string } label 标签
 * @param { number } __level 层级
 * @param { number | string } value 多选 checkbox 绑定的值
 * @param { boolean } disabled 是否禁用
 * @param { Array } [children] 子节点
 */
export interface TreeItemModel {
  label: string
  __level: number
  icon?: FightingIcon
  value?: number | string
  disabled?: boolean
  children?: TreeItemModel[]
}

Contributors ​