Tree 树形控件

用清晰的层级结构展示信息，可展开或折叠。

基础用法

垂直方向固定高度，即列表每个项的高度固定统一，滚动后按高度计算视图内需要展示的列表项。

点击按钮，展示tree

加载中...

<script setup>
import { ref, onMounted } from 'vue'
import axios from 'axios'
import PfTree from '@/components/lib/Tree/src/Tree.vue'
import PfButton from '@/components/lib/Button/src/Button.vue'
import PfSelect from '@/components/lib/Select/src/Select.vue'
import PfIcon from '@/components/lib/Icon/src/Icon.vue'

const checkedKeys = ref(['1-3'])
const isLoading = ref(true)
const isShowDialog = ref(false)
const expandKeys = ref([])
const treeRef = ref(null)
const test = ref('')
const options = [
  { label: '北京', value: '1' },
  { label: '上海', value: '2' },
  { label: '天津', value: '3' },
  { label: '重庆', value: '4', disabled: true }
]

onMounted(() => {
  btnClick('500')
})

const btnClick = async (count) => {
  isShowDialog.value = true
  axios
    .get(`http://localhost:3000/api/tree?count=${count}`)
    .then(({ data }) => {
      if (data.code === 0) {
        console.log(data, data.data.tree)
        const { tree } = data.data
        expandKeys.value = ['8-1', '10-1']
        treeRef.value?.setData(tree)
        checkedKeys.value = ['1-4', '1-5']
        isLoading.value = false
      }
    })
}

const onChange = (checkedKeys, checkedNodes) => {
  console.log('onChange', checkedKeys, checkedNodes)
}

const onClickLabel = (node) => {
  console.log('onClickLabel', node)
}

const onClickCheckbox = (node) => {
  console.log('onClickCheckbox', node)
}

const onReload = () => {
  window.location.reload()
}

const invokeRef = (name) => {
  if (treeRef.value) {
    treeRef.value[name]()
  }
}
</script>
<template>
  <div class="pf-tree-wrapper">
    <div class="btn-bar">
      <h3>点击按钮，展示tree</h3>
      <br />
      <br />
      <pf-button type="primary" @click="btnClick('500')">500条</pf-button>
      <pf-button type="primary" @click="btnClick('10000')">1w 条</pf-button>
      <pf-button type="primary" @click="btnClick('30000')">
        3w 条(含有大量 disabled)
      </pf-button>
      <pf-button type="primary" @click="btnClick('100000')">10w 条</pf-button>
      <br />
      <br />
      <pf-button @click="onReload">刷新</pf-button>
      <pf-button @click="invokeRef('showCheckedOnly')">只显示选中</pf-button>
      <pf-button @click="invokeRef('restore')">恢复</pf-button>
      <pf-button @click="invokeRef('clear')">清空</pf-button>
    </div>
    <div class="tree-wrap" v-show="isShowDialog">
      <pf-tree
        ref="treeRef"
        hasInput
        checkedAction="dblclick"
        :expandKeys="expandKeys"
        expandLevel="all"
        :isLoading="isLoading"
        :showCheckbox="true"
        :showLine="false"
        :draggable="true"
        :defaultCheckedKeys="checkedKeys"
        @onChange="onChange"
        @onClickLabel="onClickLabel"
        @onClickCheckbox="onClickCheckbox"
      >
        <template v-slot:pre-input>
          <div class="pre-input">
            <pf-select v-model="test" placeholder="请选择" :options="options" />
          </div>
        </template>
        <template v-slot="{ slotScope }">
          <span>
            <pf-icon icon="fa-file" />
            {{ slotScope.label }}
          </span>
        </template>
        <template v-slot:loading>
          <i>加载中...</i>
        </template>
      </pf-tree>
    </div>
  </div>
</template>
<style scoped>
.pf-tree-wrapper {
  text-align: center;
  .pre-input {
    max-width: 84px;
  }
  .pf-icon {
    vertical-align: -2px;
  }
  .btn-bar {
    padding: 10px;
  }
  .tree-wrap {
    margin: 0px auto;
    width: 400px;
    height: 500px;
    padding-left: 20px;
    .pre-select {
      cursor: pointer;
      padding: 5px 10px;
    }
  }
}
</style>

Tree 属性

属性名	说明	类型	默认值
hasInput	是否含有过滤输入框	boolean	false
placeholder	过滤输入框的 placeholder	string	请输入关键字查找
indent	缩进	string | number	15
expandLevel	展开程度	string | number	'all'
expandKeys	指定 id 展开	string[]	[]
isLoading	是否正在加载	boolean	false
checkedAction	选中节点时的动作类型	string	'none'
emptyText	内容为空展示的文本	string	'暂无数据'
showCheckbox	是否展示 checkbox	boolean	false
showCheckboxLeafOnly	是否仅叶子节点展示 checkbox	boolean	false
defaultCheckedKeys	默认选中	string[]	[]
checkStriclty	是否严格的遵循父子不互相关联的做法	boolean	false
showCheckbox	是否展示 checkbox	boolean	false
showLine	是否显示连线	boolean	false
draggable	是否可拖拽	boolean	false

Tree 方法

Name	Description	Type
onChange	选中状态变化触发	() => （{ checkedKeys, checkedNodes })
onClickLabel	点击 label 触发	() => void
onClickCheckbox	点击 checkbox 触发, 获取当前点击的节点	() => void

Tree 全局方法

Name	Description
default	label 的 slot
pre-input	input 输入框前的 slot
loading	自定义加载中 slot