theluyuan/layui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

[暂存]: 暂存工作区

Browse Source
This commit is contained in:
落小梅 2021-10-09 22:19:17 +08:00
parent b3538eba74
commit 729e1d2e18
3 changed files with 281 additions and 115 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

107
src/module/tree/TreeEntity.vue Normal file
View 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>

287
src/module/tree/index.vue
View File

@ -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,141 +197,145 @@ export default {
}
</script>
<template>
<div id="test1" class="demo-tree demo-tree-box">
<div class="layui-tree layui-tree-line" lay-filter="LAY-tree-2">
<div
data-id="1"
class="layui-tree-set layui-tree-setHide 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-subtraction"></i></span
><span class="layui-tree-txt">江西</span>
</div>
<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"
class="layui-tree-set layui-tree-setHide 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-subtraction"></i></span
><span class="layui-tree-txt">江西</span>
</div>
<div
class="layui-tree-pack layui-tree-lineExtend layui-tree-showLine"
style="display: block"
>
<div data-id="1000" class="layui-tree-set 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-subtraction"></i></span
><span class="layui-tree-txt">南昌</span>
</div>
</div>
<div
class="layui-tree-pack layui-tree-lineExtend layui-tree-showLine"
style="display: block"
>
<div data-id="1000" class="layui-tree-set 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-subtraction"></i></span
><span class="layui-tree-txt">南昌</span>
</div>
<div
class="layui-tree-pack layui-tree-lineExtend layui-tree-showLine"
style="display: block"
>
<div data-id="10001" class="layui-tree-set">
<div class="layui-tree-entry">
<div class="layui-tree-main">
<span class="layui-tree-iconClick"
><i class="layui-icon layui-icon-file"></i></span
><span class="layui-tree-txt">青山湖区</span>
</div>
</div>
<div
class="layui-tree-pack layui-tree-lineExtend layui-tree-showLine"
style="display: block"
>
<div data-id="10001" class="layui-tree-set">
<div class="layui-tree-entry">
<div class="layui-tree-main">
<span class="layui-tree-iconClick"
><i class="layui-icon layui-icon-file"></i></span
><span class="layui-tree-txt">青山湖区</span>
</div>
</div>
<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"
><i class="layui-icon layui-icon-file"></i></span
><span class="layui-tree-txt">高新区</span>
</div>
</div>
<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"
><i class="layui-icon layui-icon-file"></i></span
><span class="layui-tree-txt">高新区</span>
</div>
</div>
</div>
</div>
<div data-id="1001" class="layui-tree-set">
<div class="layui-tree-entry">
<div class="layui-tree-main">
<span class="layui-tree-iconClick"
><i class="layui-icon layui-icon-file"></i></span
><span class="layui-tree-txt">九江</span>
</div>
</div>
<div data-id="1001" class="layui-tree-set">
<div class="layui-tree-entry">
<div class="layui-tree-main">
<span class="layui-tree-iconClick"
><i class="layui-icon layui-icon-file"></i></span
><span class="layui-tree-txt">九江</span>
</div>
</div>
<div data-id="1002" class="layui-tree-set">
<div class="layui-tree-entry">
<div class="layui-tree-main">
<span class="layui-tree-iconClick"
><i class="layui-icon layui-icon-file"></i></span
><span class="layui-tree-txt">赣州</span>
</div>
</div>
<div data-id="1002" class="layui-tree-set">
<div class="layui-tree-entry">
<div class="layui-tree-main">
<span class="layui-tree-iconClick"
><i class="layui-icon layui-icon-file"></i></span
><span class="layui-tree-txt">赣州</span>
</div>
</div>
</div>
</div>
<div
data-id="2"
class="layui-tree-set layui-tree-setHide 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-subtraction"></i></span
><span class="layui-tree-txt">广西</span>
</div>
</div>
<div
data-id="2"
class="layui-tree-set layui-tree-setHide 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-subtraction"></i></span
><span class="layui-tree-txt">广西</span>
</div>
<div
class="layui-tree-pack layui-tree-lineExtend layui-tree-showLine"
style="display: block"
>
<div data-id="2000" class="layui-tree-set">
<div class="layui-tree-entry">
<div class="layui-tree-main">
<span class="layui-tree-iconClick"
><i class="layui-icon layui-icon-file"></i></span
><span class="layui-tree-txt">南宁</span>
</div>
</div>
<div
class="layui-tree-pack layui-tree-lineExtend layui-tree-showLine"
style="display: block"
>
<div data-id="2000" class="layui-tree-set">
<div class="layui-tree-entry">
<div class="layui-tree-main">
<span class="layui-tree-iconClick"
><i class="layui-icon layui-icon-file"></i></span
><span class="layui-tree-txt">南宁</span>
</div>
</div>
<div data-id="2001" class="layui-tree-set">
<div class="layui-tree-entry">
<div class="layui-tree-main">
<span class="layui-tree-iconClick"
><i class="layui-icon layui-icon-file"></i></span
><span class="layui-tree-txt">桂林</span>
</div>
</div>
<div data-id="2001" class="layui-tree-set">
<div class="layui-tree-entry">
<div class="layui-tree-main">
<span class="layui-tree-iconClick"
><i class="layui-icon layui-icon-file"></i></span
><span class="layui-tree-txt">桂林</span>
</div>
</div>
</div>
</div>
<div
data-id="3"
class="layui-tree-set layui-tree-setHide layui-tree-setLineShort"
>
<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
><span class="layui-tree-txt">陕西</span>
</div>
</div>
<div
data-id="3"
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-subtraction"></i></span
><span class="layui-tree-txt">陕西</span>
</div>
<div class="layui-tree-pack layui-tree-lineExtend">
<div data-id="3000" class="layui-tree-set">
<div class="layui-tree-entry">
<div class="layui-tree-main">
<span class="layui-tree-iconClick"
><i class="layui-icon layui-icon-file"></i></span
><span class="layui-tree-txt">西安</span>
</div>
</div>
<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">
<span class="layui-tree-iconClick"
><i class="layui-icon layui-icon-file"></i></span
><span class="layui-tree-txt">西安</span>
</div>
</div>
<div data-id="3001" class="layui-tree-set layui-tree-setLineShort">
<div class="layui-tree-entry">
<div class="layui-tree-main">
<span class="layui-tree-iconClick"
><i class="layui-icon layui-icon-file"></i></span
><span class="layui-tree-txt">延安</span>
</div>
</div>
<div data-id="3001" class="layui-tree-set layui-tree-setLineShort">
<div class="layui-tree-entry">
<div class="layui-tree-main">
<span class="layui-tree-iconClick"
><i class="layui-icon layui-icon-file"></i></span
><span class="layui-tree-txt">延安</span>
</div>
</div>
</div>