✨(component): tree组件 加入半选状态,优化data改变是视图更新,优化checkedKeys支持下级节点,默认开启过渡动画,优化关闭连线后支持行内点击
This commit is contained in:
0o张不歪o0
parent
401bc9db63
commit
a2967fb2cb
@ -7,7 +7,7 @@ export default {
|
||||
<script setup lang="ts">
|
||||
import { LayIcon } from "@layui/icons-vue";
|
||||
import LayCheckbox from "../checkbox/index.vue";
|
||||
import { Ref, useSlots } from "vue";
|
||||
import { computed, Ref, useSlots } from "vue";
|
||||
import { Tree } from "./tree";
|
||||
import { Nullable } from "../../types";
|
||||
import LayTransition from "../transition/index.vue";
|
||||
@ -19,9 +19,9 @@ export interface TreeData {
|
||||
children: TreeData[];
|
||||
parentKey: Nullable<StringOrNumber>;
|
||||
isRoot: boolean;
|
||||
isChecked: Ref<boolean>;
|
||||
isDisabled: Ref<boolean>;
|
||||
isLeaf: Ref<boolean>;
|
||||
isChecked: boolean;
|
||||
isDisabled: boolean;
|
||||
isLeaf: boolean;
|
||||
hasNextSibling: boolean;
|
||||
parentNode: Nullable<TreeData>;
|
||||
}
|
||||
@ -65,7 +65,7 @@ const nodeIconType = (node: TreeData): string => {
|
||||
return "";
|
||||
}
|
||||
if (node.children.length !== 0) {
|
||||
return !node.isLeaf.value
|
||||
return !node.isLeaf
|
||||
? "layui-icon-addition"
|
||||
: "layui-icon-subtraction";
|
||||
}
|
||||
@ -81,7 +81,7 @@ function handleChange(checked: boolean, node: TreeData) {
|
||||
}
|
||||
|
||||
function handleIconClick(node: TreeData) {
|
||||
node.isLeaf.value = !node.isLeaf.value;
|
||||
node.isLeaf = !node.isLeaf;
|
||||
}
|
||||
|
||||
function handleTitleClick(node: TreeData) {
|
||||
@ -90,6 +90,39 @@ function handleTitleClick(node: TreeData) {
|
||||
}
|
||||
emit("node-click", node);
|
||||
}
|
||||
function handleRowClick(node:TreeData){
|
||||
if(!props.showLine){
|
||||
handleTitleClick(node);
|
||||
}
|
||||
}
|
||||
|
||||
//判断是否半选
|
||||
const isChildAllSelected=computed(()=>{
|
||||
function _isChildAllSelected(node:TreeData):boolean{
|
||||
if(!props.showCheckbox){
|
||||
return false;
|
||||
}
|
||||
let childSelectNum=0;
|
||||
let res=false;// true为半选 false为全选
|
||||
for (const item of node.children) {
|
||||
if(item.isChecked) childSelectNum++;
|
||||
}
|
||||
if(childSelectNum>0) node.isChecked=true;//此处的处理与 checkedKeys 有关联
|
||||
if(childSelectNum==node.children.length){//继续递归向下判断
|
||||
for (const item of node.children) {
|
||||
res=_isChildAllSelected(item)
|
||||
if(res) break;
|
||||
}
|
||||
}else{
|
||||
res=true;
|
||||
}
|
||||
return res;
|
||||
}
|
||||
return function(node:TreeData):boolean{
|
||||
let res=_isChildAllSelected(node)
|
||||
return res;
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@ -102,7 +135,7 @@ function handleTitleClick(node: TreeData) {
|
||||
'layui-tree-setHide': node.isRoot,
|
||||
}"
|
||||
>
|
||||
<div class="layui-tree-entry">
|
||||
<div class="layui-tree-entry" @click="handleRowClick(node)">
|
||||
<div class="layui-tree-main">
|
||||
<span
|
||||
:class="[
|
||||
@ -110,12 +143,12 @@ function handleTitleClick(node: TreeData) {
|
||||
{ 'layui-tree-iconClick': true },
|
||||
]"
|
||||
>
|
||||
<lay-icon :type="nodeIconType(node)" @click="handleIconClick(node)" />
|
||||
<lay-icon :type="nodeIconType(node)" @click.stop="handleIconClick(node)" />
|
||||
</span>
|
||||
<lay-checkbox
|
||||
v-if="showCheckbox"
|
||||
:modelValue="node.isChecked.value"
|
||||
:disabled="node.isDisabled.value"
|
||||
:modelValue="node.isChecked"
|
||||
:disabled="node.isDisabled"
|
||||
skin="primary"
|
||||
label=""
|
||||
@change="
|
||||
@ -123,13 +156,14 @@ function handleTitleClick(node: TreeData) {
|
||||
handleChange(checked, node);
|
||||
}
|
||||
"
|
||||
:isIndeterminate='isChildAllSelected(node)'
|
||||
/>
|
||||
<span
|
||||
:class="{
|
||||
'layui-tree-txt': true,
|
||||
'layui-disabled': node.isDisabled.value,
|
||||
'layui-disabled': node.isDisabled,
|
||||
}"
|
||||
@click="handleTitleClick(node)"
|
||||
@click.stop="handleTitleClick(node)"
|
||||
>
|
||||
<template v-if="slots.title">
|
||||
<slot name="title" :data="node"></slot>
|
||||
@ -142,7 +176,7 @@ function handleTitleClick(node: TreeData) {
|
||||
</div>
|
||||
<lay-transition :enable="collapseTransition">
|
||||
<div
|
||||
v-if="node.isLeaf.value"
|
||||
v-if="node.isLeaf"
|
||||
class="layui-tree-pack layui-tree-showLine"
|
||||
style="display: block"
|
||||
>
|
||||
|
||||
@ -6,7 +6,7 @@ export default {
|
||||
|
||||
<script lang="ts" setup>
|
||||
import TreeNode from "./TreeNode.vue";
|
||||
import { computed, useSlots } from "vue";
|
||||
import { computed, useSlots, watch,ref } from "vue";
|
||||
import { useTree } from "./useTree";
|
||||
import { TreeData } from "./tree";
|
||||
import { StringFn, StringOrNumber, KeysType, EditType } from "./tree.type";
|
||||
@ -43,9 +43,10 @@ interface TreeEmits {
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<TreeProps>(), {
|
||||
checkedKeys:()=>{ return [] },
|
||||
showCheckbox: false,
|
||||
edit: false,
|
||||
collapseTransition: false,
|
||||
collapseTransition: true,
|
||||
onlyIconControl: false,
|
||||
disabled: false,
|
||||
showLine: true,
|
||||
@ -70,10 +71,29 @@ const className = computed(() => {
|
||||
};
|
||||
});
|
||||
|
||||
const { tree, nodeList } = useTree(props, emit);
|
||||
let tree=ref();
|
||||
let nodeList=ref();
|
||||
const loadNodeList=()=>{
|
||||
let { tree:_tree, nodeList:_nodeList }=useTree(props, emit);
|
||||
tree.value=_tree
|
||||
nodeList.value=_nodeList.value
|
||||
}
|
||||
watch(
|
||||
() => props.data,
|
||||
() => {
|
||||
loadNodeList();
|
||||
},
|
||||
{ deep: true,immediate:true}
|
||||
)
|
||||
watch(
|
||||
() => props.checkedKeys,
|
||||
() => {
|
||||
loadNodeList()
|
||||
},
|
||||
)
|
||||
|
||||
function handleClick(node: TreeData) {
|
||||
const originNode = tree.getOriginData(node.id);
|
||||
const originNode = tree.value.getOriginData(node.id);
|
||||
emit("node-click", originNode);
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -11,9 +11,9 @@ export interface TreeData {
|
||||
children: TreeData[];
|
||||
parentKey: Nullable<StringOrNumber>;
|
||||
isRoot: boolean;
|
||||
isChecked: Ref<boolean>;
|
||||
isDisabled: Ref<boolean>;
|
||||
isLeaf: Ref<boolean>;
|
||||
isChecked: boolean;
|
||||
isDisabled: boolean;
|
||||
isLeaf: boolean;
|
||||
hasNextSibling: boolean;
|
||||
parentNode: Nullable<TreeData>;
|
||||
}
|
||||
@ -106,21 +106,23 @@ class Tree {
|
||||
children: nodeChildren ? nodeChildren : [],
|
||||
parentKey: parentKey,
|
||||
isRoot: parentKey === "",
|
||||
isDisabled: ref(false),
|
||||
isChecked: ref(false),
|
||||
isLeaf: ref(false),
|
||||
isDisabled:false,
|
||||
isChecked: false,
|
||||
isLeaf: false,
|
||||
hasNextSibling: hasNextSibling,
|
||||
parentNode: parentNode || null,
|
||||
});
|
||||
|
||||
node.isDisabled.value = nodeDisabled;
|
||||
node.isChecked.value = parentNode
|
||||
? parentNode.isChecked.value
|
||||
: checkedKeys.includes(nodeKey);
|
||||
node.isLeaf.value = parentNode
|
||||
? parentNode.isLeaf.value
|
||||
node.isDisabled = nodeDisabled;
|
||||
if(parentNode && parentNode.isChecked){
|
||||
node.isChecked=true;
|
||||
}else{
|
||||
node.isChecked=checkedKeys.includes(nodeKey);
|
||||
}
|
||||
node.isLeaf = parentNode
|
||||
? parentNode.isLeaf
|
||||
: expandKeys.includes(nodeKey);
|
||||
node.isLeaf.value = nodeIsLeaf;
|
||||
node.isLeaf = nodeIsLeaf;
|
||||
|
||||
if (!nodeMap.has(nodeKey)) {
|
||||
nodeMap.set(nodeKey, node);
|
||||
@ -134,7 +136,7 @@ class Tree {
|
||||
setChildrenChecked(checked: boolean, nodes: TreeData[]) {
|
||||
const len = nodes.length;
|
||||
for (let i = 0; i < len; i++) {
|
||||
nodes[i].isChecked.value = checked;
|
||||
nodes[i].isChecked = checked;
|
||||
nodes[i].children &&
|
||||
nodes[i].children.length > 0 &&
|
||||
this.setChildrenChecked(checked, nodes[i].children);
|
||||
@ -145,11 +147,11 @@ class Tree {
|
||||
if (!parent) {
|
||||
return;
|
||||
}
|
||||
parent.isChecked.value = checked;
|
||||
parent.isChecked = checked;
|
||||
const pChild = parent.children;
|
||||
const pChildChecked = pChild.some((c) => c.isChecked.value);
|
||||
const pChildChecked = pChild.some((c) => c.isChecked);
|
||||
if (pChildChecked) {
|
||||
parent.isChecked.value = true;
|
||||
parent.isChecked = true;
|
||||
}
|
||||
if (parent.parentNode) {
|
||||
this.setParentChecked(checked, parent.parentNode);
|
||||
@ -157,7 +159,7 @@ class Tree {
|
||||
}
|
||||
|
||||
setCheckedKeys(checked: boolean, node: TreeData) {
|
||||
node.isChecked.value = checked;
|
||||
node.isChecked = checked;
|
||||
// 处理上级
|
||||
if (node.parentNode) {
|
||||
this.setParentChecked(checked, node.parentNode);
|
||||
@ -180,10 +182,10 @@ class Tree {
|
||||
while (!next.done) {
|
||||
const [, node] = next.value;
|
||||
const id = Reflect.get(node, this.config.replaceFields.id);
|
||||
if (node.isChecked.value) {
|
||||
if (node.isChecked) {
|
||||
checkedKeys.push(id);
|
||||
}
|
||||
if (node.isLeaf.value) {
|
||||
if (node.isLeaf) {
|
||||
expandKeys.push(id);
|
||||
}
|
||||
next = iterator.next();
|
||||
|
||||
@ -185,7 +185,7 @@ export default {
|
||||
::: title 半选状态
|
||||
:::
|
||||
|
||||
::: demo 在实现全选效果时，你可能会用到 indeterminate 属性。
|
||||
::: demo 在实现全选效果时，你可能会用到 isIndeterminate 属性。
|
||||
|
||||
<template>
|
||||
<lay-checkbox name="like" skin="primary" label="1" :isIndeterminate="true" v-model="checked8">半选</lay-checkbox>
|
||||
|
||||
@ -184,7 +184,7 @@ const data = ref([{
|
||||
}]);
|
||||
|
||||
function handleClick(node) {
|
||||
clickNode.value = node
|
||||
console.log(node)
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -197,17 +197,185 @@ function handleClick(node) {
|
||||
|
||||
<template>
|
||||
<lay-tree
|
||||
:data="data"
|
||||
:data="data2"
|
||||
v-model:checkedKeys="checkedKeys"
|
||||
:showCheckbox="showCheckbox"
|
||||
collapse-transition
|
||||
>
|
||||
</lay-tree>
|
||||
<br/>
|
||||
<lay-button @click="updateView">更新视图</lay-button>
|
||||
<lay-button @click="updateCheckedKeys">更新checkedKeys</lay-button>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
|
||||
const checkedKeys = ref([30,31])
|
||||
const updateCheckedKeys=()=>{
|
||||
checkedKeys.value=[4]
|
||||
}
|
||||
const data2 = ref([{
|
||||
title: '一级1',
|
||||
id: 1,
|
||||
field: 'name1',
|
||||
checked: true,
|
||||
spread: true,
|
||||
children: [{
|
||||
title: '二级1-1 可允许跳转',
|
||||
id: 3,
|
||||
field: 'name11',
|
||||
href: 'https://www.layui.com/',
|
||||
children: [{
|
||||
title: '三级1-1-3',
|
||||
id: 23,
|
||||
field: '',
|
||||
children: [{
|
||||
title: '四级1-1-3-1',
|
||||
id: 24,
|
||||
field: '',
|
||||
children: [{
|
||||
title: '五级1-1-3-1-1',
|
||||
id: 30,
|
||||
field: ''
|
||||
},
|
||||
{
|
||||
title: '五级1-1-3-1-2',
|
||||
id: 31,
|
||||
field: ''
|
||||
}]
|
||||
}]
|
||||
},
|
||||
{
|
||||
title: '三级1-1-1',
|
||||
id: 7,
|
||||
field: '',
|
||||
children: [{
|
||||
title: '四级1-1-1-1 可允许跳转',
|
||||
id: 15,
|
||||
field: '',
|
||||
href: 'https://www.layui.com/doc/'
|
||||
}]
|
||||
},
|
||||
{
|
||||
title: '三级1-1-2',
|
||||
id: 8,
|
||||
field: '',
|
||||
children: [{
|
||||
title: '四级1-1-2-1',
|
||||
id: 32,
|
||||
field: ''
|
||||
}]
|
||||
}]
|
||||
},
|
||||
{
|
||||
title: '二级1-2',
|
||||
id: 4,
|
||||
spread: true,
|
||||
children: [{
|
||||
title: '三级1-2-1',
|
||||
id: 9,
|
||||
field: '',
|
||||
disabled: true
|
||||
},
|
||||
{
|
||||
title: '三级1-2-2',
|
||||
id: 10,
|
||||
field: ''
|
||||
}]
|
||||
},
|
||||
{
|
||||
title: '二级1-3',
|
||||
id: 20,
|
||||
field: '',
|
||||
children: [{
|
||||
title: '三级1-3-1',
|
||||
id: 21,
|
||||
field: ''
|
||||
},
|
||||
{
|
||||
title: '三级1-3-2',
|
||||
id: 22,
|
||||
field: ''
|
||||
}]
|
||||
}]
|
||||
},
|
||||
{
|
||||
title: '一级2',
|
||||
id: 2,
|
||||
field: '',
|
||||
spread: true,
|
||||
children: [{
|
||||
title: '二级2-1',
|
||||
id: 5,
|
||||
field: '',
|
||||
spread: true,
|
||||
children: [{
|
||||
title: '三级2-1-1',
|
||||
id: 11,
|
||||
field: ''
|
||||
},
|
||||
{
|
||||
title: '三级2-1-2',
|
||||
id: 12,
|
||||
field: ''
|
||||
}]
|
||||
},
|
||||
{
|
||||
title: '二级2-2',
|
||||
id: 6,
|
||||
field: '',
|
||||
children: [{
|
||||
title: '三级2-2-1',
|
||||
id: 13,
|
||||
field: ''
|
||||
},
|
||||
{
|
||||
title: '三级2-2-2',
|
||||
id: 14,
|
||||
field: '',
|
||||
disabled: true
|
||||
}]
|
||||
}]
|
||||
},
|
||||
{
|
||||
title: '一级3',
|
||||
id: 16,
|
||||
field: '',
|
||||
children: [{
|
||||
title: '二级3-1',
|
||||
id: 17,
|
||||
field: '',
|
||||
fixed: true,
|
||||
children: [{
|
||||
title: '三级3-1-1',
|
||||
id: 18,
|
||||
field: ''
|
||||
},
|
||||
{
|
||||
title: '三级3-1-2',
|
||||
id: 19,
|
||||
field: ''
|
||||
}]
|
||||
},
|
||||
{
|
||||
title: '二级3-2',
|
||||
id: 27,
|
||||
field: '',
|
||||
children: [{
|
||||
title: '三级3-2-1',
|
||||
id: 28,
|
||||
field: ''
|
||||
},
|
||||
{
|
||||
title: '三级3-2-2',
|
||||
id: 29,
|
||||
field: ''
|
||||
}]
|
||||
}]
|
||||
}]);
|
||||
const updateView=()=>{
|
||||
data2.value[0].title='更新视图'
|
||||
}
|
||||
const checkedKeys = ref([2,3])
|
||||
const showCheckbox = ref(true)
|
||||
</script>
|
||||
|
||||
@ -234,25 +402,6 @@ const showLine=ref(false)
|
||||
|
||||
:::
|
||||
|
||||
::: title 过渡动画
|
||||
:::
|
||||
|
||||
::: demo 使用 `collapse-transition` 属性开启展开过渡动画
|
||||
|
||||
<template>
|
||||
<lay-tree
|
||||
:data="data"
|
||||
collapse-transition
|
||||
>
|
||||
</lay-tree>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title 定义标题
|
||||
:::
|
||||
|
||||
|
||||
@ -11,6 +11,19 @@
|
||||
<template>
|
||||
<lay-timeline>
|
||||
<lay-timeline-item title="1.2.x">
|
||||
<ul>
|
||||
<a name="1-2-9"></a>
|
||||
<li>
|
||||
<h3>1.2.9 <span class="layui-badge-rim">2022-07-12</span></h3>
|
||||
<ul>
|
||||
<li>[优化] tree 组件 支持更改data数据后刷新视图。 by @SmallWai</li>
|
||||
<li>[优化] tree 组件 checkedKeys支持下级节点 by @SmallWai</li>
|
||||
<li>[优化] tree 组件 关闭连线后启用行内点击 by @SmallWai</li>
|
||||
<li>[优化] tree 组件 默认启用过渡动画 by @SmallWai</li>
|
||||
<li>[新增] tree 组件 加入半选状态 by @SmallWai</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<ul>
|
||||
<a name="1-2-8"></a>
|
||||
<li>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user