123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113 |
- import { computed, ref } from 'vue'
- export const useTree = (props, { emit }, tree, filterText) => {
- const config = computed(() => {
- return props.config ?? {}
- })
- // 头部按钮
- const appendTree = () => {
- emit('node-append', {})
- }
- const reload = () => {
- filterText.value = ''
- emit('tree-reload')
- }
- const defaultProps = computed(() => {
- return Object.assign({}, {
- children: 'children',
- label: 'label'
- }, config.value.defaultProps, config.value.optionProps)
- })
- const isTreeAppend = computed(() => {
- return config.value.isTreeAppend ?? false
- })
- // 节点唯一标识
- const nodeKey = computed(() => {
- return config.value.nodeKey ?? 'id'
- })
- // 是否手风琴模式
- const accordion = computed(() => {
- return config.value.accordion ?? false
- })
- // 懒加载函数
- const lazyLoad = computed(() => {
- return config.value.lazyLoad ?? null
- })
- // 是否进入展开,使用懒加载时默认不展开,不使用时默认展开
- const expandOnClickNode = computed(() => {
- return config.value.expandOnClickNode
- })
- // 且不是手风琴模式才可以默认展开
- const defaultExpandAll = computed(() => {
- return config.value.defaultExpandAll ?? !lazyLoad.value
- })
- // 显示checkbox
- const showCheckbox = computed(() => {
- return config.value.showCheckbox ?? false
- })
- // 树形组件搜索
- const filterNode = (value, data) => {
- if (!value) return true
- return data[defaultProps.value.label].indexOf(value) !== -1
- }
- // 定义渲染层级
- const level = computed(() => {
- return config.value.treeLevel ?? 0
- })
- // 定义树按钮渲染层级
- const buttonLevel = computed(() => {
- return config.value.buttonLevel
- })
- // 显示按钮类型列表
- const buttonList = computed(() => {
- return config.value.buttonList ?? []
- })
- // 点击树节点
- const nodeClick = (data, node, comp) => {
- // 清除高亮后手动开启,配置中不开启高亮则跳过
- if (config.value.highlightCurrent && !highlightCurrent.value) {
- highlightCurrent.value = true
- }
- emit('node-click', { data, node, comp })
- }
- // 节点变化
- const onCurrentChange = (data, node) => {
- emit('current-change', data, node)
- }
- // 是否高亮当前节点
- const highlightCurrent = ref(!!config.value.highlightCurrent)
- // 一些重置操作需要清除高亮,只能手动清除
- const clearHighlight = () => {
- highlightCurrent.value = false
- }
- // 默认展示高亮节点的key值
- const currentNodeKey = computed(() => {
- return config.value.currentNodeKey
- })
- return {
- config,
- appendTree,
- reload,
- defaultProps,
- isTreeAppend,
- nodeKey,
- accordion,
- lazyLoad,
- expandOnClickNode,
- defaultExpandAll,
- showCheckbox,
- filterNode,
- level,
- buttonLevel,
- buttonList,
- nodeClick,
- highlightCurrent,
- currentNodeKey,
- clearHighlight,
- onCurrentChange
- }
- }
|