🐛(component): 修复 tree 组件 title 插槽不生效的问题

2022-10-04 01:04:04 +08:00
parent 8d19e433a7
commit 43d223653e
13 changed files with 108 additions and 350 deletions
--- a/package/document-component/src/document/zh-CN/components/tree.md
+++ b/package/document-component/src/document/zh-CN/components/tree.md
@@ -26,22 +26,18 @@ import { ref } from 'vue';
 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,
@@ -50,29 +46,24 @@ const data = ref([{
 				{
 					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: ''
 			}]
 		}]
 	},
@@ -83,65 +74,53 @@ const data = ref([{
 		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
 		}]
 	}]
@@ -149,42 +128,35 @@ const data = ref([{
 {
 	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: ''
 		}]
 	}]
 }]);

 function handleClick(node) {
-  console.log(node)
+  console.log("Click Node:" + JSON.stringify(node));
 }
 </script>

@@ -193,45 +165,52 @@ function handleClick(node) {
 ::: title 选择节点
 :::

-::: demo 使用 `showCheckbox` 属性开启复选框
+::: demo 使用 `showCheckbox` 属性开启复选框, `checkedKeys` 属性设置选中项。

 <template>
  <lay-tree
-    :data="data3"
-	v-model:checkedKeys="checkedKeys3"
-	:showCheckbox="showCheckbox"
-    collapse-transition
+    :data="data2"
+	:showCheckbox="showCheckbox2"
+	v-model:checkedKeys="checkedKeys2"
  >
  </lay-tree>
-  <br/>
-  <lay-button @click="updateView">更新视图</lay-button>
-  <lay-button @click="updateCheckedKeys">更新checkedKeys</lay-button>
+  <br>
+  <a-space>
+    <lay-button @click="updateView2">更新数据</lay-button>
+  	<lay-button @click="updateCheckedKeys2">更新选择</lay-button>
+  	{{ checkedKeys2 }}
+  </a-space>
 </template>

 <script setup>
 import { ref } from 'vue';
-const updateCheckedKeys=()=>{
-  checkedKeys.value=[4]
+
+const checkedKeys2 = ref([]);
+const showCheckbox2 = ref(true);
+
+const updateCheckedKeys2=()=>{
+  checkedKeys2.value=[4]
 }
-const data3 = ref([{
+
+const updateView2=()=>{
+  data3.value[0].title='更新视图'
+}
+
+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,
@@ -240,29 +219,24 @@ const data3 = ref([{
 				{
 					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: ''
 			}]
 		}]
 	},
@@ -273,66 +247,53 @@ const data3 = ref([{
 		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: '',
-			disabled: true
 		}]
 	},
 	{
 		title: '二级2-2',
 		id: 6,
-		field: '',
 		children: [{
 			title: '三级2-2-1',
 			id: 13,
-			field: ''
 		},
 		{
 			title: '三级2-2-2',
 			id: 14,
-			field: '',
 			disabled: true
 		}]
 	}]
@@ -340,44 +301,32 @@ const data3 = ref([{
 {
 	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 checkedKeys3 = ref([12, 14])
-const showCheckbox = ref(true)
 </script>

 :::
@@ -385,15 +334,14 @@ const showCheckbox = ref(true)
 ::: title 禁用级联
 :::

-::: demo 使用 `showCheckbox` 属性开启复选框
+::: demo 通过 `checkStrictly` 属性禁用父子关联选择, 让每个复选框都是独立的。

 <template>
  <lay-tree
-	v-model:checkedKeys="checkedKeys"
-	:showCheckbox="showCheckbox"
+	v-model:checkedKeys="checkedKeys3"
    :checkStrictly="true"
-	:collapse-transition="true"
-	:data="data2"
+	:showCheckbox="true"
+	:data="data3"
  >
  </lay-tree>
 </template>
@@ -401,25 +349,21 @@ const showCheckbox = ref(true)
 <script setup>
 import { ref } from 'vue';

-const data2 = ref([{
+const data3 = 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,
@@ -428,29 +372,24 @@ const data2 = ref([{
 				{
 					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: ''
 			}]
 		}]
 	},
@@ -461,65 +400,53 @@ const data2 = ref([{
 		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
 		}]
 	}]
@@ -527,42 +454,34 @@ const data2 = ref([{
 {
 	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)
+const checkedKeys3 = ref([2,3])
 </script>

 :::
@@ -594,11 +513,8 @@ const showLine=ref(false)
 ::: demo 使用 `title` 插槽自定义节点标题

 <template>
-  <lay-tree
-    :data="data"
-	collapse-transition
-  >	
-	<template v-slot:title="{ data }">
+  <lay-tree :data="data">	
+	<template #title="{ data }">
 		{{ data.id }}
 	</template>
  </lay-tree>
--- a/package/document-component/src/document/zh-CN/components/treeSelect.md
+++ b/package/document-component/src/document/zh-CN/components/treeSelect.md
@@ -13,7 +13,7 @@
 ::: demo 使用 `lay-tree` 标签, 创建树形组件, @node-click 监听节点点击。

 <template>
-  <lay-tree-select v-model="value" :data="data"></lay-tree-select> {{ value }}
+  <lay-tree-select v-model="value" :data="data"></lay-tree-select>
 </template>

 <script setup>
@@ -188,183 +188,6 @@ 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 禁用选择
 :::

@@ -584,8 +407,6 @@ const data = ref([{

 :::

- 
-
 ::: contributor transition
 :::

--- a/package/document-component/src/document/zh-CN/guide/changelog.md
+++ b/package/document-component/src/document/zh-CN/guide/changelog.md
@@ -16,11 +16,13 @@
      <li> 
        <h3>1.6.0 <span class="layui-badge-rim">2022-10-08</span></h3> 
        <ul>
-          <li>[新增] tree-select 下拉选择树组件, 提供树结构数据选择。</li>
+          <li>[新增] tree 组件 selectedKey 属性, 支持单选节点高亮。</li>
          <li>[新增] tree 组件 checkStrictly 属性, 开启复选框时解除父子联动关系, 默认为 false。</li>
+          <li>[修复] tree 组件 title 自定义标题插槽, 不生效的问题。</li>
          <li>[修复] tree 组件 node 配置 disabled 启用时, @node-click 事件仍触发的问题。</li>
          <li>[修复] checkbox 组件 label 属性与 default 插槽不设置, layui-checkbox-label 元素仍存在的问题。</li>
          <li>[修复] tree 组件 show-checkbox 为 true 时, 复选框与标题间距过宽的问题。</li>
+          <li>[修复] tree 组件 node 配置 disabled 启用时, 仍会因为父子关联选择。</li>
          <li>[修复] table 组件 indentSize 属性, 在加载远程数据时不生效的问题。</li>
          <li>[调整] date-picker 组件 laydate-range-hover 前景色与背景色。</li>
        </ul> 
--- a/package/document-component/src/view/index.vue
+++ b/package/document-component/src/view/index.vue
@@ -83,22 +83,22 @@
        <lay-col :md="8" :sm="12" :xs="12">
          <div class="box">
            <div class="icon">☀️</div>
-            <h2 class="title">Setup script</h2>
-            <p class="details">use grammar sugar.</p>
+            <h2 class="title">Dark theme</h2>
+            <p class="details">provide theme variables.</p>
          </div>
        </lay-col>
        <lay-col :md="8" :sm="12" :xs="12">
          <div class="box">
            <div class="icon">🚀</div>
-            <h2 class="title">Classic design</h2>
-            <p class="details">layui css.</p>
+            <h2 class="title">Piu allegro</h2>
+            <p class="details">provide vscode plugin.</p>
          </div>
        </lay-col>
        <lay-col :md="8" :sm="12" :xs="12">
          <div class="box">
            <div class="icon">☁️</div>
-            <h2 class="title">Small volume</h2>
-            <p class="details">only 14.9 MB.</p>
+            <h2 class="title">Complete ecology</h2>
+            <p class="details">admin and form design.</p>
          </div>
        </lay-col>
        <lay-col :md="8" :sm="12" :xs="12">