树形组件 - STree

借助 ATree 的 checkStrictly="true" 特性，重新实现了 勾选、选中、展开、禁用、异步加载 等联动逻辑

演示

基本用法

基本用法

简单的用法，展示 勾选项、 选中项、 展开项、 禁用 等功能

0

0-0

0-0-0

0-0-1

0-1

0-1-0

0-1-1

0-2

checkedKeys:
 "0-0"
 "0-0-0"
 "0-0-1"
 "0-1-0"

expandedKeys:
 "0"
 "0-0"
 "0-1"

selectedKeys:
 "0-0-0"

复制代码

显示代码

<template>
  <div class="container">
    <div class="left-container">
      <STree
        ref="tree"
        v-model:treeData="treeData"
        v-model:checkedKeys="checkedKeys"
        v-model:selectedKeys="selectedKeys"
        v-model:expandedKeys="expandedKeys"
        :checkable="true"
      />
    </div>

    <div class="right-container">
      <div class="right-item">
        <pre>{{ printCheckedKeys }}</pre>
      </div>
      <div class="right-item">
        <pre>{{ printExpandedKeys }}</pre>
      </div>
      <div class="right-item">
        <pre>{{ printSelectedKeys }}</pre>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
export interface TreeData {
  key: string;
  title: string;
  disabled?: boolean;
  disableCheckbox?: boolean;
  children?: TreeData[];
  [key: string]: any;
}

const treeData = treeDataDefiner<TreeData>([
  {
    key: '0',
    title: '0',
    children: [
      {
        key: '0-0',
        title: '0-0',
        disableCheckbox: true,
        children: [
          {
            key: '0-0-0',
            title: '0-0-0',
          },
          {
            key: '0-0-1',
            title: '0-0-1',
          },
        ],
      },
      {
        key: '0-1',
        title: '0-1',
        children: [
          {
            key: '0-1-0',
            title: '0-1-0',
          },
          {
            key: '0-1-1',
            title: '0-1-1',
            disabled: true,
          },
        ],
      },
      {
        key: '0-2',
        title: '0-2',
        children: [
          {
            key: '0-2-0',
            title: '0-2-0',
          },
        ],
      },
    ],
  },
])

const checkedKeys = ref(['0-0', '0-0-0', '0-0-1', '0-1-0'])
const expandedKeys = ref(['0', '0-0', '0-1'])
const selectedKeys = ref(['0-0-0'])

// Printing
const printCheckedKeys = ref('')
const printExpandedKeys = ref('')
const printSelectedKeys = ref('')

watchEffect(() => {
  const prints = {
    checkedKeys: [] as string[],
    expandedKeys: [] as string[],
    selectedKeys: [] as string[],
  }

  prints.checkedKeys.push(`checkedKeys:`)
  prints.expandedKeys.push(`expandedKeys:`)
  prints.selectedKeys.push(`selectedKeys:`)

  prints.checkedKeys.push(checkedKeys.value.map(key => ` "${key}"`).join('\n'))
  prints.expandedKeys.push(expandedKeys.value.map(key => ` "${key}"`).join('\n'))
  prints.selectedKeys.push(selectedKeys.value.map(key => ` "${key}"`).join('\n'))

  printCheckedKeys.value = prints.checkedKeys.join('\n')
  printExpandedKeys.value = prints.expandedKeys.join('\n')
  printSelectedKeys.value = prints.selectedKeys.join('\n')
})
</script>

<style lang="less" scoped>
.container {
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-start;
  align-items: stretch;

  .left-container {
    flex: 0 0 auto;
    width: 240px;
    padding: 3px 8px 5px;
  }

  .right-container {
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
    align-items: stretch;
    flex: 1 1 auto;
    width: 100%;
    margin: 0 0 0 5px;
    padding: 0 0 0 35px;
    color: #606266;
    font-size: 13px;
    font-weight: 500;
    border-left: dashed 1px #ddd;

    .right-item {
      flex: 0 0 auto;
      width: 33.3333%;

      pre {
        margin: 0;
        padding: 3px 0 0;
      }
    }
  }
}
</style>

禁用用法

禁用用法

如果我们希望 禁用父选项 同时禁用其子选项时，则可以使用 props.forceApplyDisabled="true" 来实现

0

0-0

0-0-0

0-0-1

0-1

0-1-0

0-1-1

0-2

checkedKeys:
 "0-0"
 "0-0-0"
 "0-0-1"
 "0-1-0"

expandedKeys:
 "0"
 "0-0"
 "0-1"

selectedKeys:
 "0-0-0"

复制代码

显示代码

<template>
  <div class="container">
    <div class="left-container">
      <STree
        ref="tree"
        v-model:treeData="treeData"
        v-model:checkedKeys="checkedKeys"
        v-model:selectedKeys="selectedKeys"
        v-model:expandedKeys="expandedKeys"
        :forceApplyDisabled="true"
        :checkable="true"
      />
    </div>

    <div class="right-container">
      <div class="right-item">
        <pre>{{ printCheckedKeys }}</pre>
      </div>
      <div class="right-item">
        <pre>{{ printExpandedKeys }}</pre>
      </div>
      <div class="right-item">
        <pre>{{ printSelectedKeys }}</pre>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
export interface TreeData {
  key: string;
  title: string;
  disabled?: boolean;
  disableCheckbox?: boolean;
  children?: TreeData[];
  [key: string]: any;
}

const treeData = treeDataDefiner<TreeData>([
  {
    key: '0',
    title: '0',
    children: [
      {
        key: '0-0',
        title: '0-0',
        disableCheckbox: true,
        children: [
          {
            key: '0-0-0',
            title: '0-0-0',
          },
          {
            key: '0-0-1',
            title: '0-0-1',
          },
        ],
      },
      {
        key: '0-1',
        title: '0-1',
        children: [
          {
            key: '0-1-0',
            title: '0-1-0',
          },
          {
            key: '0-1-1',
            title: '0-1-1',
            disabled: true,
          },
        ],
      },
      {
        key: '0-2',
        title: '0-2',
        children: [
          {
            key: '0-2-0',
            title: '0-2-0',
          },
        ],
      },
    ],
  },
])

const checkedKeys = ref(['0-0', '0-0-0', '0-0-1', '0-1-0'])
const expandedKeys = ref(['0', '0-0', '0-1'])
const selectedKeys = ref(['0-0-0'])

// Printing
const printCheckedKeys = ref('')
const printExpandedKeys = ref('')
const printSelectedKeys = ref('')

watchEffect(() => {
  const prints = {
    checkedKeys: [] as string[],
    expandedKeys: [] as string[],
    selectedKeys: [] as string[],
  }

  prints.checkedKeys.push(`checkedKeys:`)
  prints.expandedKeys.push(`expandedKeys:`)
  prints.selectedKeys.push(`selectedKeys:`)

  prints.checkedKeys.push(checkedKeys.value.map(key => ` "${key}"`).join('\n'))
  prints.expandedKeys.push(expandedKeys.value.map(key => ` "${key}"`).join('\n'))
  prints.selectedKeys.push(selectedKeys.value.map(key => ` "${key}"`).join('\n'))

  printCheckedKeys.value = prints.checkedKeys.join('\n')
  printExpandedKeys.value = prints.expandedKeys.join('\n')
  printSelectedKeys.value = prints.selectedKeys.join('\n')
})
</script>

<style lang="less" scoped>
.container {
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-start;
  align-items: stretch;

  .left-container {
    flex: 0 0 auto;
    width: 240px;
    padding: 3px 8px 5px;
  }

  .right-container {
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
    align-items: stretch;
    flex: 1 1 auto;
    width: 100%;
    margin: 0 0 0 5px;
    padding: 0 0 0 35px;
    color: #606266;
    font-size: 13px;
    font-weight: 500;
    border-left: dashed 1px #ddd;

    .right-item {
      flex: 0 0 auto;
      width: 33.3333%;

      pre {
        margin: 0;
        padding: 3px 0 0;
      }
    }
  }
}
</style>

搜索用法

搜索用法

STree 支持通过 props.filterField 和 props.filterValue 来实现 TreeNode 的筛选和搜索
props.filterField: 搜索模式，支持 key 和 title 两种模式，默认 title
props.filterValue: 搜索值

0

0-0

0-1

0-2

0-2-0

checkedKeys:
 "0-0"
 "0-0-0"
 "0-0-1"
 "0-1-0"

expandedKeys:
 "0"
 "0-0"
 "0-1"

selectedKeys:
 "0-0-0"

复制代码

显示代码

<template>
  <div class="container">
    <div class="left-container">
      <AInputSearch
        v-model:value="filterValue"
        style="width:220px; margin-bottom: 8px"
        placeholder="请输入Tree节点文本"
      />

      <STree
        ref="tree"
        v-model:treeData="treeData"
        v-model:checkedKeys="checkedKeys"
        v-model:selectedKeys="selectedKeys"
        v-model:expandedKeys="expandedKeys"
        v-model:filterField="filterField"
        v-model:filterValue="filterValue"
        :forceApplyDisabled="true"
        :checkable="true"
      />
    </div>

    <div class="right-container">
      <div class="right-item">
        <pre>{{ printCheckedKeys }}</pre>
      </div>
      <div class="right-item">
        <pre>{{ printExpandedKeys }}</pre>
      </div>
      <div class="right-item">
        <pre>{{ printSelectedKeys }}</pre>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
export interface TreeData {
  key: string;
  title: string;
  disabled?: boolean;
  disableCheckbox?: boolean;
  children?: TreeData[];
  [key: string]: any;
}

const treeData = treeDataDefiner<TreeData>([
  {
    key: '0',
    title: '0',
    children: [
      {
        key: '0-0',
        title: '0-0',
        disableCheckbox: true,
        children: [
          {
            key: '0-0-0',
            title: '0-0-0',
          },
          {
            key: '0-0-1',
            title: '0-0-1',
          },
        ],
      },
      {
        key: '0-1',
        title: '0-1',
        children: [
          {
            key: '0-1-0',
            title: '0-1-0',
          },
          {
            key: '0-1-1',
            title: '0-1-1',
            disabled: true,
          },
        ],
      },
      {
        key: '0-2',
        title: '0-2',
        children: [
          {
            key: '0-2-0',
            title: '0-2-0',
          },
        ],
      },
    ],
  },
])

const filterValue = ref<any>('0-2')
const filterField = ref<any>('title')
const checkedKeys = ref(['0-0', '0-0-0', '0-0-1', '0-1-0'])
const expandedKeys = ref(['0', '0-0', '0-1'])
const selectedKeys = ref(['0-0-0'])

// Printing
const printCheckedKeys = ref('')
const printExpandedKeys = ref('')
const printSelectedKeys = ref('')

watchEffect(() => {
  const prints = {
    checkedKeys: [] as string[],
    expandedKeys: [] as string[],
    selectedKeys: [] as string[],
  }

  prints.checkedKeys.push(`checkedKeys:`)
  prints.expandedKeys.push(`expandedKeys:`)
  prints.selectedKeys.push(`selectedKeys:`)

  prints.checkedKeys.push(checkedKeys.value.map(key => ` "${key}"`).join('\n'))
  prints.expandedKeys.push(expandedKeys.value.map(key => ` "${key}"`).join('\n'))
  prints.selectedKeys.push(selectedKeys.value.map(key => ` "${key}"`).join('\n'))

  printCheckedKeys.value = prints.checkedKeys.join('\n')
  printExpandedKeys.value = prints.expandedKeys.join('\n')
  printSelectedKeys.value = prints.selectedKeys.join('\n')
})
</script>

<style lang="less" scoped>
.container {
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-start;
  align-items: stretch;

  .left-container {
    flex: 0 0 auto;
    width: 240px;
    padding: 3px 8px 5px;
  }

  .right-container {
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
    align-items: stretch;
    flex: 1 1 auto;
    width: 100%;
    margin: 0 0 0 5px;
    padding: 0 0 0 35px;
    color: #606266;
    font-size: 13px;
    font-weight: 500;
    border-left: dashed 1px #ddd;

    .right-item {
      flex: 0 0 auto;
      width: 33.3333%;

      pre {
        margin: 0;
        padding: 3px 0 0;
      }
    }
  }
}
</style>

自定义字段

自定义字段

我们可以通过 props.fieldNames 指定 STree 节点中 key, title, children 字段，从而适配不同的数据结构

0

0-0

0-0-0

0-0-1

0-1

0-1-0

0-1-1

0-2

checkedKeys:
 "0-0"
 "0-0-0"
 "0-0-1"
 "0-1-0"

expandedKeys:
 "0"
 "0-0"
 "0-1"

selectedKeys:
 "0-0-0"

复制代码

显示代码

<template>
  <div class="container">
    <div class="left-container">
      <STree
        ref="tree"
        v-model:treeData="treeData"
        v-model:checkedKeys="checkedKeys"
        v-model:selectedKeys="selectedKeys"
        v-model:expandedKeys="expandedKeys"
        :fieldNames="fieldNames"
        :checkable="true"
      />
    </div>

    <div class="right-container">
      <div class="right-item">
        <pre>{{ printCheckedKeys }}</pre>
      </div>
      <div class="right-item">
        <pre>{{ printExpandedKeys }}</pre>
      </div>
      <div class="right-item">
        <pre>{{ printSelectedKeys }}</pre>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
export interface TreeData {
  id: string;
  label: string;
  disabled?: boolean;
  disableCheckbox?: boolean;
  tree?: TreeData[];
  [key: string]: any;
}

const treeData = treeDataDefiner<TreeData>([
  {
    id: '0',
    label: '0',
    tree: [
      {
        id: '0-0',
        label: '0-0',
        tree: [
          {
            id: '0-0-0',
            label: '0-0-0',
          },
          {
            id: '0-0-1',
            label: '0-0-1',
          },
        ],
      },
      {
        id: '0-1',
        label: '0-1',
        tree: [
          {
            id: '0-1-0',
            label: '0-1-0',
          },
          {
            id: '0-1-1',
            label: '0-1-1',
          },
        ],
      },
      {
        id: '0-2',
        label: '0-2',
        tree: [
          {
            id: '0-2-0',
            label: '0-2-0',
          },
        ],
      },
    ],
  },
])

const fieldNames = treeFieldNamesDefiner({
  key: 'id',
  title: 'label',
  children: 'tree',
})

const checkedKeys = ref(['0-0', '0-0-0', '0-0-1', '0-1-0'])
const expandedKeys = ref(['0', '0-0', '0-1'])
const selectedKeys = ref(['0-0-0'])

// Printing
const printCheckedKeys = ref('')
const printExpandedKeys = ref('')
const printSelectedKeys = ref('')

watchEffect(() => {
  const prints = {
    checkedKeys: [] as string[],
    expandedKeys: [] as string[],
    selectedKeys: [] as string[],
  }

  prints.checkedKeys.push(`checkedKeys:`)
  prints.expandedKeys.push(`expandedKeys:`)
  prints.selectedKeys.push(`selectedKeys:`)

  prints.checkedKeys.push(checkedKeys.value.map(key => ` "${key}"`).join('\n'))
  prints.expandedKeys.push(expandedKeys.value.map(key => ` "${key}"`).join('\n'))
  prints.selectedKeys.push(selectedKeys.value.map(key => ` "${key}"`).join('\n'))

  printCheckedKeys.value = prints.checkedKeys.join('\n')
  printExpandedKeys.value = prints.expandedKeys.join('\n')
  printSelectedKeys.value = prints.selectedKeys.join('\n')
})
</script>

<style lang="less" scoped>
.container {
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-start;
  align-items: stretch;

  .left-container {
    flex: 0 0 auto;
    width: 240px;
    padding: 3px 8px 5px;
  }

  .right-container {
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
    align-items: stretch;
    flex: 1 1 auto;
    width: 100%;
    margin: 0 0 0 5px;
    padding: 0 0 0 35px;
    color: #606266;
    font-size: 13px;
    font-weight: 500;
    border-left: dashed 1px #ddd;

    .right-item {
      flex: 0 0 auto;
      width: 33.3333%;

      pre {
        margin: 0;
        padding: 3px 0 0;
      }
    }
  }
}
</style>

自定义层级

自定义层级

我们可以通过 props.allowCheckedLevel 和 props.allowSelectedLevel 指定 checkable / selectable 的层级

root

0-0

0-0-0

0-0-1

0-1

0-1-0

0-1-1

0-2

checkedKeys:
 "0-0-0"
 "0-0-1"
 "0-1-0"

expandedKeys:
 "0"
 "0-0"
 "0-1"

selectedKeys:
 "0-0-0"

复制代码

显示代码

<template>
  <div class="container">
    <div class="left-container">
      <STree
        ref="tree"
        v-model:treeData="treeData"
        v-model:checkedKeys="checkedKeys"
        v-model:selectedKeys="selectedKeys"
        v-model:expandedKeys="expandedKeys"
        :allowSelectedLevel="2"
        :allowCheckedLevel="2"
        :allowUnExpanded="true"
        :checkable="true"
      />
    </div>

    <div class="right-container">
      <div class="right-item">
        <pre>{{ printCheckedKeys }}</pre>
      </div>
      <div class="right-item">
        <pre>{{ printExpandedKeys }}</pre>
      </div>
      <div class="right-item">
        <pre>{{ printSelectedKeys }}</pre>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
export interface TreeData {
  key: string;
  title: string;
  disabled?: boolean;
  disableCheckbox?: boolean;
  children?: TreeData[];
  [key: string]: any;
}

const treeData = treeDataDefiner<TreeData>([
  {
    key: '0',
    title: 'root',
    children: [
      {
        key: '0-0',
        title: '0-0',
        children: [
          {
            key: '0-0-0',
            title: '0-0-0',
          },
          {
            key: '0-0-1',
            title: '0-0-1',
          },
        ],
      },
      {
        key: '0-1',
        title: '0-1',
        children: [
          {
            key: '0-1-0',
            title: '0-1-0',
          },
          {
            key: '0-1-1',
            title: '0-1-1',
          },
        ],
      },
      {
        key: '0-2',
        title: '0-2',
        children: [
          {
            key: '0-2-0',
            title: '0-2-0',
          },
        ],
      },
    ],
  },
])

const checkedKeys = ref(['0-0-0', '0-0-1', '0-1-0'])
const expandedKeys = ref(['0', '0-0', '0-1'])
const selectedKeys = ref(['0-0-0'])

// Printing
const printCheckedKeys = ref('')
const printExpandedKeys = ref('')
const printSelectedKeys = ref('')

watchEffect(() => {
  const prints = {
    checkedKeys: [] as string[],
    expandedKeys: [] as string[],
    selectedKeys: [] as string[],
  }

  prints.checkedKeys.push(`checkedKeys:`)
  prints.expandedKeys.push(`expandedKeys:`)
  prints.selectedKeys.push(`selectedKeys:`)

  prints.checkedKeys.push(checkedKeys.value.map(key => ` "${key}"`).join('\n'))
  prints.expandedKeys.push(expandedKeys.value.map(key => ` "${key}"`).join('\n'))
  prints.selectedKeys.push(selectedKeys.value.map(key => ` "${key}"`).join('\n'))

  printCheckedKeys.value = prints.checkedKeys.join('\n')
  printExpandedKeys.value = prints.expandedKeys.join('\n')
  printSelectedKeys.value = prints.selectedKeys.join('\n')
})
</script>

<style lang="less" scoped>
.container {
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-start;
  align-items: stretch;

  .left-container {
    flex: 0 0 auto;
    width: 240px;
    padding: 3px 8px 5px;
  }

  .right-container {
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
    align-items: stretch;
    flex: 1 1 auto;
    width: 100%;
    margin: 0 0 0 5px;
    padding: 0 0 0 35px;
    color: #606266;
    font-size: 13px;
    font-weight: 500;
    border-left: dashed 1px #ddd;

    .right-item {
      flex: 0 0 auto;
      width: 33.3333%;

      pre {
        margin: 0;
        padding: 3px 0 0;
      }
    }
  }
}
</style>

自定义卡槽

自定义卡槽

STree 在 ATree 组件原有 icon 和 title 卡槽进行了扩展 (eg. iconRootLabel、titleParentButton 等)

Root Node

Parent Node

0-0-0

0-0-1

Mouse Hover

0-1-0

0-1-1

0-2

checkedKeys:
 "0-0"
 "0-0-0"
 "0-0-1"
 "0-1-0"

expandedKeys:
 "0"
 "0-0"
 "0-1"

selectedKeys:
 "0-1"

复制代码

显示代码

<template>
  <div class="container">
    <div class="left-container">
      <STree
        ref="tree"
        v-model:treeData="treeData"
        v-model:checkedKeys="checkedKeys"
        v-model:selectedKeys="selectedKeys"
        v-model:expandedKeys="expandedKeys"
        :iconfontUrl="iconfontUrl"
        :iconPrefix="iconPrefix"
        :blockNode="true"
        :checkable="true"
        :showIcon="true"
      >
        <template #iconParent="node">
          <template v-if="node.key === '0-0'">
            <DashboardOutlined />
          </template>
        </template>

        <template #titleRootLabel>
          Root Node
        </template>

        <template #titleParentLabel="node">
          <template v-if="node.key === '0-0'">
            Parent Node
          </template>

          <template v-if="node.key === '0-1'">
            Mouse Hover
          </template>
        </template>

        <template #titleRootButton="node">
          <template v-if="node.key === '0'">
            <AButton
              danger
              type="link"
              size="small"
              @click="(e)=>{ e.stopPropagation(); }"
            >
              <template #icon>
                <EditOutlined />
              </template>
            </AButton>
          </template>
        </template>

        <template #titleParentButton="node">
          <template v-if="node.key === '0-1'">
            <AButton
              type="link"
              size="small"
              @click="(e)=>{ e.stopPropagation(); }"
            >
              <template #icon>
                <EditOutlined />
              </template>
            </AButton>
          </template>
        </template>
      </STree>
    </div>

    <div class="right-container">
      <div class="right-item">
        <pre>{{ printCheckedKeys }}</pre>
      </div>
      <div class="right-item">
        <pre>{{ printExpandedKeys }}</pre>
      </div>
      <div class="right-item">
        <pre>{{ printSelectedKeys }}</pre>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
export interface TreeData {
  key: string;
  icon?: string;
  title: string;
  disabled?: boolean;
  disableCheckbox?: boolean;
  alwaysShowTitleButton?: boolean;
  children?: TreeData[];
  [key: string]: any;
}

const treeData = treeDataDefiner<TreeData>([
  {
    key: '0',
    title: '0',
    alwaysShowTitleButton: true,
    children: [
      {
        key: '0-0',
        title: '0-0',
        children: [
          {
            key: '0-0-0',
            icon: 'AppleOutlined', // AIcon
            title: '0-0-0',
          },
          {
            key: '0-0-1',
            icon: 'AppleOutlined', // AIcon
            title: '0-0-1',
          },
        ],
      },
      {
        key: '0-1',
        title: '0-1',
        icon: 'PrinterOutlined',
        children: [
          {
            key: '0-1-0',
            icon: 'font-shop-outline', // IconFont
            title: '0-1-0',
          },
          {
            key: '0-1-1',
            icon: 'font-shop-outline', // IconFont
            title: '0-1-1',
          },
        ],
      },
      {
        key: '0-2',
        title: '0-2',
        children: [
          {
            key: '0-2-0',
            title: '0-2-0',
          },
        ],
      },
    ],
  },
])

const iconPrefix = 'font-'
const iconfontUrl = 'https://at.alicdn.com/t/c/font_1403293_zz95gjv9ru.js'
const checkedKeys = ref(['0-0', '0-0-0', '0-0-1', '0-1-0'])
const expandedKeys = ref(['0', '0-0', '0-1'])
const selectedKeys = ref(['0-1'])

// Printing
const printCheckedKeys = ref('')
const printExpandedKeys = ref('')
const printSelectedKeys = ref('')

watchEffect(() => {
  const prints = {
    checkedKeys: [] as string[],
    expandedKeys: [] as string[],
    selectedKeys: [] as string[],
  }

  prints.checkedKeys.push(`checkedKeys:`)
  prints.expandedKeys.push(`expandedKeys:`)
  prints.selectedKeys.push(`selectedKeys:`)

  prints.checkedKeys.push(checkedKeys.value.map(key => ` "${key}"`).join('\n'))
  prints.expandedKeys.push(expandedKeys.value.map(key => ` "${key}"`).join('\n'))
  prints.selectedKeys.push(selectedKeys.value.map(key => ` "${key}"`).join('\n'))

  printCheckedKeys.value = prints.checkedKeys.join('\n')
  printExpandedKeys.value = prints.expandedKeys.join('\n')
  printSelectedKeys.value = prints.selectedKeys.join('\n')
})
</script>

<style lang="less" scoped>
.container {
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-start;
  align-items: stretch;

  .left-container {
    flex: 0 0 auto;
    width: 240px;
    padding: 3px 8px 5px;
  }

  .right-container {
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
    align-items: stretch;
    flex: 1 1 auto;
    width: 100%;
    margin: 0 0 0 5px;
    padding: 0 0 0 35px;
    color: #606266;
    font-size: 13px;
    font-weight: 500;
    border-left: dashed 1px #ddd;

    .right-item {
      flex: 0 0 auto;
      width: 33.3333%;

      pre {
        margin: 0;
        padding: 3px 0 0;
      }
    }
  }
}
</style>

手风琴模式

手风琴模式

在 STree 组件中，我们可以通过 props.allowMultiExpanded="false" 快速实现手风琴效果

root

0-0

0-0-0

0-0-1

0-1

0-2

checkedKeys:
 "0-0-0"
 "0-0-1"
 "0-1-0"

expandedKeys:
 "0"
 "0-0"

selectedKeys:
 "0-0-0"

复制代码

显示代码

<template>
  <div class="container">
    <div class="left-container">
      <STree
        ref="tree"
        v-model:treeData="treeData"
        v-model:checkedKeys="checkedKeys"
        v-model:selectedKeys="selectedKeys"
        v-model:expandedKeys="expandedKeys"
        :allowSelectedLevel="2"
        :allowCheckedLevel="2"
        :allowMultiExpanded="false"
        :allowUnExpanded="true"
        :checkable="true"
      />
    </div>

    <div class="right-container">
      <div class="right-item">
        <pre>{{ printCheckedKeys }}</pre>
      </div>
      <div class="right-item">
        <pre>{{ printExpandedKeys }}</pre>
      </div>
      <div class="right-item">
        <pre>{{ printSelectedKeys }}</pre>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
export interface TreeData {
  key: string;
  title: string;
  disabled?: boolean;
  disableCheckbox?: boolean;
  children?: TreeData[];
  [key: string]: any;
}

const treeData = treeDataDefiner<TreeData>([
  {
    key: '0',
    title: 'root',
    children: [
      {
        key: '0-0',
        title: '0-0',
        children: [
          {
            key: '0-0-0',
            title: '0-0-0',
          },
          {
            key: '0-0-1',
            title: '0-0-1',
          },
        ],
      },
      {
        key: '0-1',
        title: '0-1',
        children: [
          {
            key: '0-1-0',
            title: '0-1-0',
          },
          {
            key: '0-1-1',
            title: '0-1-1',
          },
        ],
      },
      {
        key: '0-2',
        title: '0-2',
        children: [
          {
            key: '0-2-0',
            title: '0-2-0',
          },
        ],
      },
    ],
  },
])

const checkedKeys = ref(['0-0-0', '0-0-1', '0-1-0'])
const expandedKeys = ref(['0', '0-0'])
const selectedKeys = ref(['0-0-0'])

// Printing
const printCheckedKeys = ref('')
const printExpandedKeys = ref('')
const printSelectedKeys = ref('')

watchEffect(() => {
  const prints = {
    checkedKeys: [] as string[],
    expandedKeys: [] as string[],
    selectedKeys: [] as string[],
  }

  prints.checkedKeys.push(`checkedKeys:`)
  prints.expandedKeys.push(`expandedKeys:`)
  prints.selectedKeys.push(`selectedKeys:`)

  prints.checkedKeys.push(checkedKeys.value.map(key => ` "${key}"`).join('\n'))
  prints.expandedKeys.push(expandedKeys.value.map(key => ` "${key}"`).join('\n'))
  prints.selectedKeys.push(selectedKeys.value.map(key => ` "${key}"`).join('\n'))

  printCheckedKeys.value = prints.checkedKeys.join('\n')
  printExpandedKeys.value = prints.expandedKeys.join('\n')
  printSelectedKeys.value = prints.selectedKeys.join('\n')
})
</script>

<style lang="less" scoped>
.container {
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-start;
  align-items: stretch;

  .left-container {
    flex: 0 0 auto;
    width: 240px;
    padding: 3px 8px 5px;
  }

  .right-container {
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
    align-items: stretch;
    flex: 1 1 auto;
    width: 100%;
    margin: 0 0 0 5px;
    padding: 0 0 0 35px;
    color: #606266;
    font-size: 13px;
    font-weight: 500;
    border-left: dashed 1px #ddd;

    .right-item {
      flex: 0 0 auto;
      width: 33.3333%;

      pre {
        margin: 0;
        padding: 3px 0 0;
      }
    }
  }
}
</style>

选项link模式

选项link模式

STree 组件中，无论是 checkedMode 还是 selectedMode, 它们都支持 default / link 两种模式

默认 default 模式

0

0-0

0-0-0

0-0-1

0-1

0-1-0

0-1-1

checkedKeys:
 "0-0"
 "0-0-0"
 "0-1-0"

expandedKeys:
 "0"
 "0-0"
 "0-1"

selectedKeys:
 "0-0-0"

使用 link 模式

0

0-0

0-0-0

0-0-1

0-1

0-1-0

0-1-1

checkedKeys:
 "0"
 "0-0"
 "0-0-0"
 "0-1"
 "0-1-0"

expandedKeys:
 "0"
 "0-0"
 "0-1"

selectedKeys:
 "0"
 "0-0"
 "0-0-0"

复制代码

显示代码

<template>
  <div class="section">
    <div class="container">
      <div class="left-container">
        <div style="margin-bottom: 8px; color: #303133; font-size: 14px;">
          <div> 默认 default 模式 </div>
        </div>

        <STree
          ref="tree"
          v-model:treeData="treeData"
          v-model:checkedKeys="checkedKeys1"
          v-model:selectedKeys="selectedKeys1"
          v-model:expandedKeys="expandedKeys1"
          :checkable="true"
        />
      </div>

      <div class="right-container">
        <div class="right-item">
          <pre>{{ printCheckedKeys1 }}</pre>
        </div>
        <div class="right-item">
          <pre>{{ printExpandedKeys1 }}</pre>
        </div>
        <div class="right-item">
          <pre>{{ printSelectedKeys1 }}</pre>
        </div>
      </div>
    </div>

    <div class="container">
      <div class="left-container">
        <div style="margin-bottom: 8px; color: #303133; font-size: 14px;">
          <div> 使用 link 模式 </div>
        </div>

        <STree
          ref="tree"
          v-model:treeData="treeData"
          v-model:checkedKeys="checkedKeys2"
          v-model:selectedKeys="selectedKeys2"
          v-model:expandedKeys="expandedKeys2"
          selectedMode="link"
          checkedMode="link"
          :checkable="true"
        />
      </div>

      <div class="right-container">
        <div class="right-item">
          <pre>{{ printCheckedKeys2 }}</pre>
        </div>
        <div class="right-item">
          <pre>{{ printExpandedKeys2 }}</pre>
        </div>
        <div class="right-item">
          <pre>{{ printSelectedKeys2 }}</pre>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
export interface TreeData {
  key: string;
  title: string;
  disabled?: boolean;
  disableCheckbox?: boolean;
  children?: TreeData[];
  [key: string]: any;
}

const treeData = treeDataDefiner<TreeData>([
  {
    key: '0',
    title: '0',
    children: [
      {
        key: '0-0',
        title: '0-0',
        children: [
          {
            key: '0-0-0',
            title: '0-0-0',
          },
          {
            key: '0-0-1',
            title: '0-0-1',
          },
        ],
      },
      {
        key: '0-1',
        title: '0-1',
        children: [
          {
            key: '0-1-0',
            title: '0-1-0',
          },
          {
            key: '0-1-1',
            title: '0-1-1',
          },
        ],
      },
    ],
  },
])

// default
const checkedKeys1 = ref(['0-0', '0-0-0', '0-1-0'])
const expandedKeys1 = ref(['0', '0-0', '0-1'])
const selectedKeys1 = ref(['0-0-0'])

const printCheckedKeys1 = ref('')
const printExpandedKeys1 = ref('')
const printSelectedKeys1 = ref('')

// link
const checkedKeys2 = ref(['0', '0-0', '0-0-0', '0-1', '0-1-0'])
const expandedKeys2 = ref(['0', '0-0', '0-1'])
const selectedKeys2 = ref(['0', '0-0', '0-0-0'])

const printCheckedKeys2 = ref('')
const printExpandedKeys2 = ref('')
const printSelectedKeys2 = ref('')

watchEffect(() => {
  const prints1 = {
    checkedKeys: [] as string[],
    expandedKeys: [] as string[],
    selectedKeys: [] as string[],
  }

  const prints2 = {
    checkedKeys: [] as string[],
    expandedKeys: [] as string[],
    selectedKeys: [] as string[],
  }

  prints1.checkedKeys.push(`checkedKeys:`)
  prints1.expandedKeys.push(`expandedKeys:`)
  prints1.selectedKeys.push(`selectedKeys:`)

  prints2.checkedKeys.push(`checkedKeys:`)
  prints2.expandedKeys.push(`expandedKeys:`)
  prints2.selectedKeys.push(`selectedKeys:`)

  prints1.checkedKeys.push(checkedKeys1.value.map(key => ` "${key}"`).join('\n'))
  prints1.expandedKeys.push(expandedKeys1.value.map(key => ` "${key}"`).join('\n'))
  prints1.selectedKeys.push(selectedKeys1.value.map(key => ` "${key}"`).join('\n'))

  prints2.checkedKeys.push(checkedKeys2.value.map(key => ` "${key}"`).join('\n'))
  prints2.expandedKeys.push(expandedKeys2.value.map(key => ` "${key}"`).join('\n'))
  prints2.selectedKeys.push(selectedKeys2.value.map(key => ` "${key}"`).join('\n'))

  printCheckedKeys1.value = prints1.checkedKeys.join('\n')
  printExpandedKeys1.value = prints1.expandedKeys.join('\n')
  printSelectedKeys1.value = prints1.selectedKeys.join('\n')

  printCheckedKeys2.value = prints2.checkedKeys.join('\n')
  printExpandedKeys2.value = prints2.expandedKeys.join('\n')
  printSelectedKeys2.value = prints2.selectedKeys.join('\n')
})
</script>

<style lang="less" scoped>
.section {
  .container {
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
    align-items: stretch;
    position: relative;

    .left-container {
      flex: 0 0 auto;
      width: 240px;
      padding: 3px 8px 5px;
    }

    .right-container {
      display: flex;
      flex-flow: row nowrap;
      justify-content: flex-start;
      align-items: stretch;
      flex: 1 1 auto;
      width: 100%;
      margin: 0 0 0 5px;
      padding: 0 0 0 35px;
      color: #606266;
      font-size: 13px;
      font-weight: 500;
      border-left: dashed 1px #ddd;

      .right-item {
        flex: 0 0 auto;
        width: 33.3333%;

        pre {
          margin: 0;
          padding: 3px 0 0;
        }
      }
    }
  }

  .container + .container {
    margin-top: 31px;

    .right-container {
      .right-item {
        pre {
          margin: 0;
          padding: 8px 0 0;
        }
      }
    }

    &::before {
      content: '';
      width: 100%;
      height: 1;
      border-top: dashed 1px #efefef;
      position: absolute;
      top: -15px;
    }
  }
}
</style>

异步加载节点

异步加载节点

在 STree 组件中，我们通过 props.loadData 异步加载远程 Tree 节点，props.checkedKeys 会自动适配异步节点

0

checkedKeys:
 "0-0-0"
 "0-0-1"
 "0-1-0"
 "0-2"

expandedKeys:
 "0"

selectedKeys:
 "0"

复制代码

显示代码

<template>
  <div class="container">
    <div class="left-container">
      <STree
        ref="tree"
        v-model:treeData="treeData"
        v-model:checkedKeys="checkedKeys"
        v-model:selectedKeys="selectedKeys"
        v-model:expandedKeys="expandedKeys"
        :loadData="loadData"
        :checkable="true"
      />
    </div>

    <div class="right-container">
      <div class="right-item">
        <pre>{{ printCheckedKeys }}</pre>
      </div>
      <div class="right-item">
        <pre>{{ printExpandedKeys }}</pre>
      </div>
      <div class="right-item">
        <pre>{{ printSelectedKeys }}</pre>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
export interface TreeData {
  key: string;
  title: string;
  isLeaf?: boolean;
  disabled?: boolean;
  disableCheckbox?: boolean;
  children?: TreeData[];
  [key: string]: any;
}

const treeData = treeDataDefiner<TreeData>([
  {
    key: '0',
    title: '0',
    isLeaf: false,
  },
])

const loadData = treeLoadDataDefiner<TreeData>(async options => {
  // 模拟接口异步返回
  await new Promise(resolve => setTimeout(resolve, 800))

  if (options.key === '0') {
    return [
      {
        key: '0-0',
        title: '0-0',
        isLeaf: false,
      },
      {
        key: '0-1',
        title: '0-1',
        isLeaf: false,
      },
      {
        key: '0-2',
        title: '0-2',
      },
    ]
  }

  if (options.key === '0-0') {
    return [
      {
        key: '0-0-0',
        title: '0-0-0',
      },
      {
        key: '0-0-1',
        title: '0-0-1',
      },
    ]
  }

  if (options.key === '0-1') {
    return [
      {
        key: '0-1-0',
        title: '0-1-0',
      },
      {
        key: '0-1-1',
        title: '0-1-1',
      },
    ]
  }
})

const checkedKeys = ref(['0-0-0', '0-0-1', '0-1-0', '0-2'])
const selectedKeys = ref(['0'])
const expandedKeys = ref(['0'])

// Printing
const printCheckedKeys = ref('')
const printExpandedKeys = ref('')
const printSelectedKeys = ref('')

watchEffect(() => {
  const prints = {
    checkedKeys: [] as string[],
    expandedKeys: [] as string[],
    selectedKeys: [] as string[],
  }

  prints.checkedKeys.push(`checkedKeys:`)
  prints.expandedKeys.push(`expandedKeys:`)
  prints.selectedKeys.push(`selectedKeys:`)

  prints.checkedKeys.push(checkedKeys.value.map(key => ` "${key}"`).join('\n'))
  prints.expandedKeys.push(expandedKeys.value.map(key => ` "${key}"`).join('\n'))
  prints.selectedKeys.push(selectedKeys.value.map(key => ` "${key}"`).join('\n'))

  printCheckedKeys.value = prints.checkedKeys.join('\n')
  printExpandedKeys.value = prints.expandedKeys.join('\n')
  printSelectedKeys.value = prints.selectedKeys.join('\n')
})
</script>

<style lang="less" scoped>
.container {
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-start;
  align-items: stretch;

  .left-container {
    flex: 0 0 auto;
    width: 240px;
    padding: 3px 8px 5px;
  }

  .right-container {
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
    align-items: stretch;
    flex: 1 1 auto;
    width: 100%;
    margin: 0 0 0 5px;
    padding: 0 0 0 35px;
    color: #606266;
    font-size: 13px;
    font-weight: 500;
    border-left: dashed 1px #ddd;

    .right-item {
      flex: 0 0 auto;
      width: 33.3333%;

      pre {
        margin: 0;
        padding: 3px 0 0;
      }
    }
  }
}
</style>

拖拽Tree节点

拖拽Tree节点

我们可以通过 props.draggable="true" 轻松实现，同时提供了 props.dropHandler 来定义拖拽结束时的拦截器

使用 link 模式

root

0-0

0-0-0

0-0-1

0-1

0-1-0

0-1-1

0-2

0-2-0

checkedKeys:
 "0"
 "0-0"
 "0-0-0"
 "0-0-1"
 "0-1"
 "0-1-0"

expandedKeys:
 "0"
 "0-0"
 "0-1"
 "0-2"

selectedKeys:
 "0"
 "0-1"
 "0-1-0"

复制代码

显示代码

<template>
  <div class="container">
    <div class="left-container">
      <div style="margin-bottom: 8px; color: #303133; font-size: 14px;">
        <div> 使用 link 模式 </div>
      </div>

      <STree
        ref="tree"
        v-model:treeData="treeData"
        v-model:checkedKeys="checkedKeys"
        v-model:selectedKeys="selectedKeys"
        v-model:expandedKeys="expandedKeys"
        :dropHandler="dropHandler"
        :allowUnExpanded="true"
        selectedMode="link"
        checkedMode="link"
        :draggable="true"
        :checkable="true"
      />
    </div>

    <div class="right-container">
      <div class="right-item">
        <pre>{{ printCheckedKeys }}</pre>
      </div>
      <div class="right-item">
        <pre>{{ printExpandedKeys }}</pre>
      </div>
      <div class="right-item">
        <pre>{{ printSelectedKeys }}</pre>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { treeDropHandlerDefiner } from '@antd-templater/library-3.x'

export interface TreeData {
  key: string;
  title: string;
  disabled?: boolean;
  disableCheckbox?: boolean;
  children?: TreeData[];
  [key: string]: any;
}

const tree = ref(null as InstanceType<STree> | null)
const treeData = treeDataDefiner<TreeData>([
  {
    key: '0',
    title: 'root',
    children: [
      {
        key: '0-0',
        title: '0-0',
        children: [
          {
            key: '0-0-0',
            title: '0-0-0',
          },
          {
            key: '0-0-1',
            title: '0-0-1',
          },
        ],
      },
      {
        key: '0-1',
        title: '0-1',
        children: [
          {
            key: '0-1-0',
            title: '0-1-0',
          },
          {
            key: '0-1-1',
            title: '0-1-1',
          },
        ],
      },
      {
        key: '0-2',
        title: '0-2',
        children: [
          {
            key: '0-2-0',
            title: '0-2-0',
          },
        ],
      },
    ],
  },
])

const dropHandler = treeDropHandlerDefiner(options => {
  console.log('appendNodes:', options.appendNodes) // 拖拽结束，appendNodes 情况
  console.log('removeNodes:', options.removeNodes) // 拖拽结束，removeNodes 情况
  console.log('reloadNodes:', options.reloadNodes) // 拖拽结束，reloadNodes 情况

  // 阻止拖拽
  // return false
})

const checkedKeys = ref(['0', '0-0', '0-0-0', '0-0-1', '0-1', '0-1-0'])
const expandedKeys = ref(['0', '0-0', '0-1', '0-2'])
const selectedKeys = ref(['0', '0-1', '0-1-0'])

// Printing
const printCheckedKeys = ref('')
const printExpandedKeys = ref('')
const printSelectedKeys = ref('')

watchEffect(() => {
  const prints = {
    checkedKeys: [] as string[],
    expandedKeys: [] as string[],
    selectedKeys: [] as string[],
  }

  prints.checkedKeys.push(`checkedKeys:`)
  prints.expandedKeys.push(`expandedKeys:`)
  prints.selectedKeys.push(`selectedKeys:`)

  prints.checkedKeys.push(checkedKeys.value.map(key => ` "${key}"`).join('\n'))
  prints.expandedKeys.push(expandedKeys.value.map(key => ` "${key}"`).join('\n'))
  prints.selectedKeys.push(selectedKeys.value.map(key => ` "${key}"`).join('\n'))

  printCheckedKeys.value = prints.checkedKeys.join('\n')
  printExpandedKeys.value = prints.expandedKeys.join('\n')
  printSelectedKeys.value = prints.selectedKeys.join('\n')
})
</script>

<style lang="less" scoped>
.container {
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-start;
  align-items: stretch;

  .left-container {
    flex: 0 0 auto;
    width: 240px;
    padding: 3px 8px 5px;
  }

  .right-container {
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
    align-items: stretch;
    flex: 1 1 auto;
    width: 100%;
    margin: 0 0 0 5px;
    padding: 0 0 0 35px;
    color: #606266;
    font-size: 13px;
    font-weight: 500;
    border-left: dashed 1px #ddd;

    .right-item {
      flex: 0 0 auto;
      width: 33.3333%;

      pre {
        margin: 0;
        padding: 3px 0 0;
      }
    }
  }
}
</style>

API

Props

STree Props

参数	说明	类型	默认值
class	定义 STree 组件 class 类	any	-
style	定义 STree 组件 样式	any	-
height	源自 ATree 组件 props.height	number	-
bgColor	定义 STree 组件 背景色	string	'transparent'
treeData (v-model)	STree 数据源	STreeSourceNode[]	[]
loadData	异步加载远程节点	STreeLoadData	-
dropHandler	拖拽结束时的拦截器，仅在 draggable="true" 时启用	STreeDropHandler	-
checkedKeys (v-model)	节点已勾选的选项	string[] | number[]	[]
selectedKeys (v-model)	节点已选中的选项	string[] | number[]	[]
expandedKeys (v-model)	已展开的节点选项	string[] | number[]	[]
selectedMode	节点选中时的模式，选项 link 模式	'link' | 'default'	'default'
checkedMode	节点勾选时的模式，选项 link 模式	'link' | 'default'	'default'
filterField (v-model)	搜索模式，支持 key / title 两种模式, 使用 title 时支持模糊匹配	'key' | 'title'	'title'
filterValue (v-model)	搜索值	string	-
fieldNames (原 replaceFields)	替换 title, key, children 字段, 若还使用 replaceFields，请及时修改 详情	object	-
allowCheckedLevel	指定 tree 节点 selectable 层级	number	1
allowSelectedLevel	指定 tree 节点 checkable 层级	number	1
forceCleanWhenNotInTreeNodes	是否清理不在当前 treeData 中的 checkedKeys/selectedKeys	boolean	false
forceCleanWhenRemoveTreeNode	是否清理从当前 treeData 中移除的那些 checkedKeys/selectedKeys	boolean	true
forceApplyDisableCheckbox	当某父节点禁用可选项时 (disableCheckbox), 是否强制其子节点也禁用可选项	boolean	false
forceApplyDisabled	当某父节点禁用选项时 (disabled), 是否强制其子节点也禁用选项	boolean	false
alwaysShowTitleButton	tree 节点定义的 titleButton 是否一直显示，而不是只有鼠标 hover 才显示	boolean	false
allowSelectToCheck	当选中某 tree 节点选择时，是否当 切换该节点勾选项 进行处理	boolean	false
allowAutoCollapsed	当折叠某节点时，是否同时折叠该节点名下的父节点	boolean	true
allowAutoExpanded	当展开某节点时，如果该节点名下仅有一个节点，且为父节点时，是否展开该父节点	boolean	true
allowAutoExpandLoad	当尝试展开某节点名下父节点，发现该父节点需要异步加载节点时，是否继续展开	boolean	fasle
allowMultiExpanded	是否允许多个展开项存在。当设置为 false 时，即出现了手风琴效果	boolean	true
defaultExpandAll	初次渲染 tree 节点时，是否展开当前所有父节点	boolean	false
allowUnExpanded	是否允许折叠所有 tree 节点	boolean	false
allowUnSelected	是否允许 tree 节点全部未 selected	boolean	false
allowUnChecked	是否允许 tree 节点全部未 checked	boolean	true
iconfontUrl	配置 tree 图标 iconfontUrl	string	-
iconPrefix	配置 tree 图标 iconPrefix	string	-
iconStyle	配置 tree 图标 style 样式	object	-
iconClass	配置 tree 图标 class 类	object	-
selectable	tree 节点是否可选中	boolean	true
checkable	设置独立节点是否展示 Checkbox	boolean	false
blockNode	是否 tree 节点占据一行	boolean	false
draggable	设置节点可拖拽	boolean	false
disabled	是否禁用	boolean	false
showIcon	是否展示图标	boolean	false
showLine	是否展示连接线	boolean	false
loading	是否 loading	boolean	false
virtual	设置 false 时关闭虚拟滚动	boolean	true
tooltip	是否启用 SEllipsis, 当 tree 节点标题内容过长，自动省略和提示	boolean	true
sticky	是否对 tree 根节点 进行置顶吸附	boolean	false

STree FieldNames

参数	说明	类型	默认值
key	定义 key	string	'key'
icon	定义 icon	string	'icon'
title	定义 title	string	'title'
isLeaf	定义 isLeaf	string	'isLeaf'
children	定义 children	string	'children'
disabled	定义 disabled	string	'disabled'
disableCheckbox	定义 disableCheckbox	string	'disableCheckbox'
forceApplyDisabled	定义 forceApplyDisabled	string	'forceApplyDisabled'
alwaysShowTitleButton	定义 alwaysShowTitleButton	string	'alwaysShowTitleButton'
forceApplyDisableCheckbox	定义 forceApplyDisableCheckbox	string	'forceApplyDisableCheckbox'

Emits

事件	说明	类型
check	tree 节点 勾选项发生变化时回调	(emiter: STreeEmiterCheck) => true
select	tree 节点 选中项发生变化时回调	(emiter: STreeEmiterSelect) => true
expand	tree 节点 展开项发生变化时回调	(emiter: STreeEmiterExpand) => true
change	tree 节点 发生变化时回调	(emiter: STreeEmiterChange) => true

Slots

插槽名	插槽说明	插槽参数
iconRoot	定义 tree 根节点 图标	STreeSourceNode
iconParent	定义 tree 父节点 图标	STreeSourceNode
iconLeaf	定义 tree 叶子节点 图标	STreeSourceNode
titleRoot	定义 tree 根节点 title 内容(不建议使用)	STreeSourceNode
titleParent	定义 tree 父节点 title 内容(不建议使用)	STreeSourceNode
titleLeaf	定义 tree 叶子节点 title 内容(不建议使用)	STreeSourceNode
titleRootLabel	定义 tree 根节点 title 中 标题	STreeSourceNode
titleParentLabel	定义 tree 父节点 title 中 标题	STreeSourceNode
titleLeafLabel	定义 tree 叶子节点 title 中 标题	STreeSourceNode
titleRootButton	定义 tree 根节点 title 中 按钮组	STreeSourceNode
titleParentButton	定义 tree 父节点 title 中 按钮组	STreeSourceNode
titleLeafButton	定义 tree 叶子节点 title 中 按钮组	STreeSourceNode
switcherIcon	定义 tree 节点 展开/折叠图标	STreeSourceNode & { switcherCls: string;}

Expose

属性/方法名	说明描述	类型
filterTreeNodes	搜索 tree 节点匹配项	(props: STreeFilterProps, expand?: boolean) => void
reloadTreeNodes	重新加载某 tree 节点数据	(nodes: STreeSourceNodes, parentKey?: STreeKey | null, force?: boolean) => void
appendTreeNodes	追加某 tree 节点数据	(nodes: STreeSourceNodes, parentKey?: STreeKey | null, force?: boolean) => void
removeTreeNodes	移除某 tree 节点数据	(nodes: STreeSourceNodes, parentKey?: STreeKey | null, force?: boolean) => void
changeTreeNodes	更新某 tree 节点数据	(nodes: STreeSourceNodes, parentKey?: STreeKey | null, force?: boolean) => void
pickUpperTreeNodes	根据 key, 查询匹配节点的所有上层 tree 节点数据	(key: STreeKey, level?: number) => Array<STreeSourceNode>
pickLowerTreeNodes	根据 key, 查询匹配节点的所有下层 tree 节点数据	(key: STreeKey, level?: number) => Array<STreeSourceNode>
pickMatchTreeNode	根据 key, 查询匹配节点的数据	(key: STreeKey, level?: number) => STreeSourceNode | null
doTreeAllExpanded	展开所有可展开的 tree 节点	() => void
doTreeAllCollapsed	折叠所有已展开的 tree 节点	() => void
doTreeToggleExpanded	切换一些 tree 节点展开项	(keys: STreeKeys) => void
doTreeOnlyExpanded	仅展开指定的一些 tree 节点	(keys: STreeKeys) => void
doTreePushExpanded	追加指定的 tree 节点展开项	(keys: STreeKeys) => void
doTreePopExpanded	折叠指定的 tree 节点展开项	(keys: STreeKeys) => void
doTreeAllChecked	勾选所有可勾选的 tree 节点	() => void
doTreeAllUnChecked	取消所有已勾选的 tree 节点	() => void
doTreeToggleChecked	切换一些 tree 节点勾选项	(keys: STreeKeys) => void
doTreeOnlyChecked	仅勾选指定的一些 tree 节点	(keys: STreeKeys) => void
doTreePushChecked	追加指定的 tree 节点勾选项	(keys: STreeKeys) => void
doTreePopChecked	取消指定的 tree 节点勾选项	(keys: STreeKeys) => void
doTreeSelected	手动选中某 tree 节点选项	(keys: STreeKeys) => void
forceUpdate	手动更新并重新渲染 STree 组件	(clear?: boolean) => void

Definer

定义	说明
treeDataDefiner	定义 Props.treeData 时的 TypeScript 提示和校验
treeLoadDataDefiner	定义 Props.loadData 时的 TypeScript 提示和校验
treeDropHandlerDefiner	定义 Props.dropHandler 时的 TypeScript 提示和校验
treeFieldNamesDefiner	定义 Props.fieldNames 时的 TypeScript 提示和校验
treeEmitCheckDefiner	定义 Emits.check 时的 TypeScript 提示和校验
treeEmitSelectDefiner	定义 Emits.select 时的 TypeScript 提示和校验
treeEmitExpandDefiner	定义 Emits.expand 时的 TypeScript 提示和校验
treeEmitChangeDefiner	定义 Emits.change 时的 TypeScript 提示和校验