100 lines
2.2 KiB
Vue
100 lines
2.2 KiB
Vue
<!--
|
|
* @Date: 2021-10-16 13:22:38
|
|
* @LastEditors: 落小梅
|
|
* @LastEditTime: 2021-10-16 13:53:14
|
|
* @FilePath: \layui-vue\src\module\tree\new-tree\index.vue
|
|
-->
|
|
<script lang="ts">
|
|
export default {
|
|
name: 'LayTree',
|
|
}
|
|
|
|
// import { TreeEmits, TreeProps as Tp } from './tree.type'
|
|
</script>
|
|
<script lang="ts" setup>
|
|
import TreeNode from './TreeNode.vue'
|
|
import { computed } from 'vue'
|
|
import { useTree } from '/@src/module/tree/useTree'
|
|
import { TreeData } from '/@src/module/tree/tree'
|
|
|
|
type StringFn = () => string
|
|
type StringOrNumber = string | number
|
|
type KeysType = (number | string)[]
|
|
type EditType = boolean | ('add' | 'update' | 'delete')
|
|
|
|
interface OriginalTreeData {
|
|
title: StringFn | string
|
|
id: StringOrNumber
|
|
field: StringFn | string
|
|
children?: OriginalTreeData[]
|
|
disabled?: boolean
|
|
}
|
|
|
|
interface TreeProps {
|
|
checkedKeys?: KeysType
|
|
data: OriginalTreeData
|
|
showCheckbox?: boolean
|
|
edit?: EditType
|
|
accordion?: boolean
|
|
onlyIconControl?: boolean
|
|
showLine?: boolean
|
|
disabled?: boolean
|
|
replaceFields?: {
|
|
id?: string
|
|
children?: string
|
|
title?: string
|
|
}
|
|
}
|
|
|
|
interface TreeEmits {
|
|
(e: 'update:checkedKeys', keys: KeysType): void
|
|
(e: 'update:expandKeys', keys: KeysType): void
|
|
(e: 'node-click', node: OriginalTreeData): void
|
|
}
|
|
|
|
const props = withDefaults(defineProps<TreeProps>(), {
|
|
showCheckbox: false,
|
|
edit: false,
|
|
accordion: false,
|
|
onlyIconControl: false,
|
|
disabled: false,
|
|
showLine: true,
|
|
replaceFields: () => {
|
|
return {
|
|
id: 'id',
|
|
children: 'children',
|
|
title: 'title',
|
|
}
|
|
},
|
|
})
|
|
|
|
const emit = defineEmits<TreeEmits>()
|
|
|
|
const className = computed(() => {
|
|
return {
|
|
'layui-tree': true,
|
|
'layui-form': props.showCheckbox,
|
|
'layui-tree-line': props.showLine,
|
|
}
|
|
})
|
|
|
|
const { tree, nodeList } = useTree(props, emit)
|
|
|
|
function handleClick(node: TreeData) {
|
|
const originNode = tree.getOriginData(node.id)
|
|
emit('node-click', originNode)
|
|
}
|
|
</script>
|
|
<template>
|
|
<div :class="className">
|
|
<tree-node
|
|
:tree="tree"
|
|
:node-list="nodeList"
|
|
:show-checkbox="showCheckbox"
|
|
:show-line="showLine"
|
|
:only-icon-control="onlyIconControl"
|
|
@node-click="handleClick"
|
|
></tree-node>
|
|
</div>
|
|
</template>
|