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

✨(component): 处理 tree 组件 n 多问题

Browse Source
This commit is contained in:
就眠儀式
2022-10-02 22:25:02 +08:00
parent 15372347a3
commit 49fcb42d9e
14 changed files with 737 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

185
package/document-component/src/document/zh-CN/components/tree.md
View File

@@ -381,6 +381,191 @@ const showCheckbox = ref(true)
:::
::: title 禁用级联
:::
::: demo 使用 `showCheckbox` 属性开启复选框
<template>
<lay-tree
v-model:checkedKeys="checkedKeys"
:showCheckbox="showCheckbox"
:checkStrictly="true"
:collapse-transition="true"
:data="data2"
>
</lay-tree>
</template>
<script setup>
import { ref } from 'vue';
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 checkedKeys = ref([2,3])
const showCheckbox = ref(true)
</script>
:::
::: title 关闭连线
:::

354
package/document-component/src/document/zh-CN/components/treeSelect.md
View File

@@ -188,6 +188,360 @@ function handleClick(node) {
:::
::: title 启用多选
:::
::: demo 使用 `lay-tree` 标签, 创建树形组件, @node-click 监听节点点击。
<template>
<lay-tree-select v-model="value1" :multiple="true" :data="data1" ></lay-tree-select> {{ value1 }}
</template>
<script setup>
import { ref } from 'vue';
const value1 = ref([]);
const data1 = 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: ''
}]
}]
}]);
</script>
:::
::: title 禁用选择
:::
::: demo 使用 `lay-tree` 标签, 创建树形组件, @node-click 监听节点点击。
<template>
<lay-tree-select v-model="value" :data="data" :disabled="true"></lay-tree-select>
</template>
<script setup>
import { ref } from 'vue';
const value = ref();
const data = 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: ''
}]
}]
}]);
</script>
:::
::: title Tree 属性
:::

15
package/document-component/src/document/zh-CN/guide/changelog.md
View File

@@ -10,6 +10,21 @@
::: demo
<template>
<lay-timeline>
<lay-timeline-item title="1.6.x">
<ul>
<a name="1-6-0"></a>
<li>
<h3>1.6.0 <span class="layui-badge-rim">2022-10-08</span></h3>
<ul>
<li>[新增] tree-select 下拉选择树组件, 提供树结构数据选择。</li>
<li>[新增] tree 组件 checkStrictly 属性, 开启复选框时解除父子联动关系, 默认为 false。</li>
<li>[修复] tree 组件 node 配置 disabled 启用时, @node-click 事件仍触发的问题。</li>
<li>[修复] checkbox 组件 label 属性与 default 插槽不设置, layui-checkbox-label 元素仍存在的问题。</li>
<li>[修复] tree 组件 show-checkbox 为 true 时, 复选框与标题间距过宽的问题。</li>
</ul>
</li>
</ul>
</lay-timeline-item>
<lay-timeline-item title="1.5.x">
<ul>
<a name="1-5-1"></a>

3
package/document-component/src/router/zh-CN.ts
View File

@@ -238,7 +238,8 @@ const zhCN = [
},
{
path: "/zh-CN/components/treeSelect",
component: () => import("../document/zh-CN/components/treeSelect.md"),
component: () =>
import("../document/zh-CN/components/treeSelect.md"),
meta: { title: "下拉树组件" },
},
{