Merge branch 'master' of https://gitee.com/layui-vue/layui-vue
This commit is contained in:
就眠仪式
commit
aa4262a46b
107
src/module/tree/TreeEntity.vue
Normal file
107
src/module/tree/TreeEntity.vue
Normal file
@ -0,0 +1,107 @@
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: 'LayTreeEntity',
|
||||
}
|
||||
</script>
|
||||
<script setup lang="ts">
|
||||
import { computed, unref, VNode, VNodeChild } from 'vue'
|
||||
import LayIcon from '../icon'
|
||||
|
||||
interface TreeData {
|
||||
/**
|
||||
* 节点唯一索引值，用于对指定节点进行各类操作
|
||||
*/
|
||||
id: string | number
|
||||
/**
|
||||
* 节点标题
|
||||
*/
|
||||
title: string | (() => string)
|
||||
/**
|
||||
* 节点字段名
|
||||
*/
|
||||
field: string | (() => string)
|
||||
/**
|
||||
* 子节点。支持设定选项同父节点
|
||||
*/
|
||||
children: TreeData[]
|
||||
/**
|
||||
* 点击节点弹出新窗口对应的 url。需开启 isJump 参数
|
||||
* 废弃，通过 on-click事件用户控制
|
||||
*/
|
||||
href: string | URL
|
||||
/**
|
||||
* 节点是否初始展开，默认 false
|
||||
* 废弃：设置 v-model:spreadKeys
|
||||
*/
|
||||
spread: boolean
|
||||
/**
|
||||
* 节点是否初始为选中状态（如果开启复选框的话），默认 false
|
||||
* 废弃：设置 v-model:checkedKeys
|
||||
*/
|
||||
checked: boolean
|
||||
/**
|
||||
* 节点是否为禁用状态。默认 false
|
||||
*/
|
||||
disabled: boolean
|
||||
}
|
||||
|
||||
interface TreeEntityProps {
|
||||
node: TreeData
|
||||
id: string | number
|
||||
}
|
||||
|
||||
const props = defineProps<TreeEntityProps>()
|
||||
</script>
|
||||
<template>
|
||||
<template v-if="node.children && node.children.length > 0">
|
||||
<div
|
||||
class="layui-tree-set"
|
||||
:class="{
|
||||
// 'layui-tree-setLineShort': (index + 1) === data.length,
|
||||
'layui-tree-setLineShort': false,
|
||||
'layui-tree-setHide': node._isRoot,
|
||||
}"
|
||||
>
|
||||
<!-- {{index}}, {{ data.length }}-->
|
||||
<div class="layui-tree-entry">
|
||||
<div class="layui-tree-main">
|
||||
<span
|
||||
class="layui-tree-iconClick layui-tree-icon"
|
||||
>
|
||||
<LayIcon
|
||||
type="layui-icon-subtraction"
|
||||
></LayIcon>
|
||||
</span>
|
||||
<span class="layui-tree-txt">{{ node.title }}---{{node._hasChild}}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="layui-tree-pack layui-tree-lineExtend layui-tree-showLine"
|
||||
style="display: block"
|
||||
>
|
||||
<LayTreeEntity
|
||||
v-for="(item, index) in node.children"
|
||||
:key="index"
|
||||
:node="item"
|
||||
:id="item.id"
|
||||
></LayTreeEntity>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<div class="layui-tree-set" :class="{'layui-tree-setLineShort': false}"><!-- :class="{'layui-tree-setLineShort': isLast}"-->
|
||||
<div class="layui-tree-entry">
|
||||
<div class="layui-tree-main">
|
||||
<span
|
||||
class="layui-tree-iconClick">
|
||||
<LayIcon
|
||||
type="layui-icon-file"
|
||||
></LayIcon>
|
||||
</span>
|
||||
<span class="layui-tree-txt">{{ node.title }}, {{node._hasChild}},{{node._parentExtend}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
<style scoped lang="less"></style>
|
||||
@ -1,5 +1,6 @@
|
||||
<script setup lang="ts">
|
||||
import { VNode, VNodeChild } from 'vue'
|
||||
import { computed, unref, VNode, VNodeChild } from 'vue'
|
||||
import TreeEntity from './TreeEntity.vue'
|
||||
|
||||
interface TreeData {
|
||||
/**
|
||||
@ -20,14 +21,17 @@ interface TreeData {
|
||||
children: TreeData[]
|
||||
/**
|
||||
* 点击节点弹出新窗口对应的 url。需开启 isJump 参数
|
||||
* 废弃，通过 on-click事件用户控制
|
||||
*/
|
||||
href: string | URL
|
||||
/**
|
||||
* 节点是否初始展开，默认 false
|
||||
* 废弃：设置 v-model:spreadKeys
|
||||
*/
|
||||
spread: boolean
|
||||
/**
|
||||
* 节点是否初始为选中状态（如果开启复选框的话），默认 false
|
||||
* 废弃：设置 v-model:checkedKeys
|
||||
*/
|
||||
checked: boolean
|
||||
/**
|
||||
@ -41,6 +45,18 @@ type EditAction = 'add' | 'update' | 'del'
|
||||
type EditType = boolean | EditAction[]
|
||||
|
||||
interface TreeProps {
|
||||
/**
|
||||
* 指定唯一的id
|
||||
*/
|
||||
id?: string
|
||||
/**
|
||||
* 选中的节点
|
||||
*/
|
||||
checkedKeys?: any[]
|
||||
/**
|
||||
* 展开的节点
|
||||
*/
|
||||
spreadKeys?: any[]
|
||||
/**
|
||||
* 数据源
|
||||
*/
|
||||
@ -66,6 +82,7 @@ interface TreeProps {
|
||||
onlyIconControl?: boolean
|
||||
/**
|
||||
* 是否允许点击节点时弹出新窗口跳转。默认 false，若开启，需在节点数据中设定 link 参数（值为 url 格式
|
||||
* 废弃：能过事件用户自行控制
|
||||
*/
|
||||
isJump?: boolean
|
||||
/**
|
||||
@ -121,9 +138,10 @@ interface TreeEmits {
|
||||
* @param treeNode
|
||||
*/
|
||||
(e: 'on-operate', treeNode: TreeNode): void
|
||||
(e: 'update:checkedKeys', keys: any[]): void
|
||||
(e: 'update:spreadKeys', keys: any[]): void
|
||||
}
|
||||
|
||||
|
||||
const props = withDefaults(defineProps<TreeProps>(), {
|
||||
showCheckbox: false,
|
||||
accordion: false,
|
||||
@ -133,7 +151,44 @@ const props = withDefaults(defineProps<TreeProps>(), {
|
||||
edit: true,
|
||||
})
|
||||
|
||||
console.log(props)
|
||||
// tree wrapper style
|
||||
const treeWrapperClass = computed(() => {
|
||||
const { showCheckbox, showLine } = unref(props)
|
||||
return {
|
||||
'layui-tree': true,
|
||||
'layui-form': showCheckbox,
|
||||
'layui-tree-line': showLine,
|
||||
}
|
||||
})
|
||||
|
||||
/**
|
||||
* 按 layui的思路，这里改变数据
|
||||
* @param data
|
||||
* @param isRootNode
|
||||
*/
|
||||
function transformTreeData (data: TreeData[], parentExtend = false, isRootNode = true) {
|
||||
data.forEach((item, index) => {
|
||||
item._parentExtend = !parentExtend ? (index + 1) !== data.length: parentExtend
|
||||
if(isRootNode) {
|
||||
item._isRoot = true
|
||||
}
|
||||
if (item.children) {
|
||||
item._hasChild = true
|
||||
transformTreeData(item.children, item._parentExtend, false)
|
||||
} else {
|
||||
item._hasChild = false
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const renderData = computed(() => {
|
||||
const { data } = unref(props)
|
||||
transformTreeData(data)
|
||||
console.log(data)
|
||||
return data
|
||||
})
|
||||
|
||||
console.log(renderData)
|
||||
|
||||
</script>
|
||||
<script lang="ts">
|
||||
@ -142,7 +197,15 @@ export default {
|
||||
}
|
||||
</script>
|
||||
<template>
|
||||
<div id="test1" class="demo-tree demo-tree-box">
|
||||
<div :class="treeWrapperClass">
|
||||
<TreeEntity
|
||||
v-for="(node) in renderData"
|
||||
:key="node.id"
|
||||
:id="node.id"
|
||||
:node="node"
|
||||
></TreeEntity>
|
||||
</div>
|
||||
<hr />
|
||||
<div class="layui-tree layui-tree-line" lay-filter="LAY-tree-2">
|
||||
<div
|
||||
data-id="1"
|
||||
@ -180,10 +243,7 @@ export default {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
data-id="10002"
|
||||
class="layui-tree-set layui-tree-setLineShort"
|
||||
>
|
||||
<div data-id="10002" class="layui-tree-set layui-tree-setLineShort">
|
||||
<div class="layui-tree-entry">
|
||||
<div class="layui-tree-main">
|
||||
<span class="layui-tree-iconClick"
|
||||
@ -251,16 +311,16 @@ export default {
|
||||
</div>
|
||||
<div
|
||||
data-id="3"
|
||||
class="layui-tree-set layui-tree-setHide layui-tree-setLineShort"
|
||||
class="layui-tree-set layui-tree-setHide layui-tree-setLineShort layui-tree-spread"
|
||||
>
|
||||
<div class="layui-tree-entry">
|
||||
<div class="layui-tree-main">
|
||||
<span class="layui-tree-iconClick layui-tree-icon"
|
||||
><i class="layui-icon layui-icon-addition"></i></span
|
||||
><i class="layui-icon layui-icon-subtraction"></i></span
|
||||
><span class="layui-tree-txt">陕西</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-tree-pack layui-tree-lineExtend">
|
||||
<div class="layui-tree-pack layui-tree-lineExtend" style="display: block">
|
||||
<div data-id="3000" class="layui-tree-set">
|
||||
<div class="layui-tree-entry">
|
||||
<div class="layui-tree-main">
|
||||
@ -282,6 +342,5 @@ export default {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<style scoped></style>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user