🐛(component): 修复 tree 组件 title 插槽不生效的问题
This commit is contained in:
就眠儀式
parent
8d19e433a7
commit
43d223653e
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@layui/layui-vue",
|
||||
"version": "1.5.1",
|
||||
"version": "1.6.0-alpha.2",
|
||||
"author": "就眠儀式",
|
||||
"license": "MIT",
|
||||
"description": "a component library for Vue 3 base on layui-vue",
|
||||
|
||||
@ -172,7 +172,9 @@ const renderRowClassName = (data: any, index: number) => {
|
||||
return props.rowClassName(data, index);
|
||||
};
|
||||
|
||||
const childrenIndentSize = computed(() => props.currentIndentSize + props.indentSize);
|
||||
const childrenIndentSize = computed(
|
||||
() => props.currentIndentSize + props.indentSize
|
||||
);
|
||||
|
||||
const renderFixedStyle = (column: any, columnIndex: number) => {
|
||||
if (column.fixed) {
|
||||
|
||||
@ -504,11 +504,13 @@ props.columns.map((value: any) => {
|
||||
|
||||
const currentIndentSize = ref(0);
|
||||
const childrenExpandSpace = computed(() => {
|
||||
return props.dataSource.find((value: any) => {
|
||||
if (value[props.childrenColumnName]) {
|
||||
return true;
|
||||
}
|
||||
}) != undefined;
|
||||
return (
|
||||
props.dataSource.find((value: any) => {
|
||||
if (value[props.childrenColumnName]) {
|
||||
return true;
|
||||
}
|
||||
}) != undefined
|
||||
);
|
||||
});
|
||||
|
||||
/**
|
||||
|
||||
@ -31,6 +31,7 @@ export interface TreeNodeProps {
|
||||
nodeList: TreeData[];
|
||||
showCheckbox: boolean;
|
||||
showLine: boolean;
|
||||
selectedKey: any;
|
||||
checkStrictly: boolean;
|
||||
collapseTransition: boolean;
|
||||
onlyIconControl: boolean;
|
||||
@ -122,7 +123,7 @@ const isChildAllSelected = computed(() => {
|
||||
return res;
|
||||
}
|
||||
|
||||
return function (node: TreeData): boolean {
|
||||
return (node: TreeData): boolean => {
|
||||
if (props.checkStrictly) {
|
||||
return false;
|
||||
} else {
|
||||
@ -157,7 +158,7 @@ const isChildAllSelected = computed(() => {
|
||||
/>
|
||||
</span>
|
||||
<lay-checkbox
|
||||
value="miss"
|
||||
value=""
|
||||
skin="primary"
|
||||
:modelValue="node.isChecked"
|
||||
:disabled="node.isDisabled"
|
||||
@ -169,15 +170,11 @@ const isChildAllSelected = computed(() => {
|
||||
:class="{
|
||||
'layui-tree-txt': true,
|
||||
'layui-disabled': node.isDisabled,
|
||||
'layui-this': selectedKey === node.id
|
||||
}"
|
||||
@click.stop="handleTitleClick(node)"
|
||||
>
|
||||
<template v-if="slots.title">
|
||||
<slot name="title" :data="node"></slot>
|
||||
</template>
|
||||
<template v-else>
|
||||
{{ node.title }}
|
||||
</template>
|
||||
<slot name="title" :data="node">{{ node.title }}</slot>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
@ -192,13 +189,14 @@ const isChildAllSelected = computed(() => {
|
||||
:node-list="node.children"
|
||||
:show-checkbox="showCheckbox"
|
||||
:show-line="showLine"
|
||||
:selected-key="selectedKey"
|
||||
:collapse-transition="collapseTransition"
|
||||
:checkStrictly="checkStrictly"
|
||||
:only-icon-control="onlyIconControl"
|
||||
@node-click="recursiveNodeClick"
|
||||
>
|
||||
<template v-if="slots.title">
|
||||
<slot name="title" :data="node"></slot>
|
||||
<template v-if="$slots.title" v-slot:title="{ data }">
|
||||
<slot name="title" :data="data"></slot>
|
||||
</template>
|
||||
</tree-node>
|
||||
</div>
|
||||
|
||||
@ -13,6 +13,10 @@
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.layui-tree-txt.layui-this {
|
||||
color: var(--global-checked-color)!important;
|
||||
}
|
||||
|
||||
.layui-tree-pack {
|
||||
display: none;
|
||||
padding-left: 20px;
|
||||
|
||||
@ -22,6 +22,7 @@ export interface OriginalTreeData {
|
||||
|
||||
export interface TreeProps {
|
||||
checkedKeys?: KeysType;
|
||||
selectedKey?: any;
|
||||
data: OriginalTreeData;
|
||||
showCheckbox?: boolean;
|
||||
checkStrictly?: boolean;
|
||||
@ -54,6 +55,7 @@ const props = withDefaults(defineProps<TreeProps>(), {
|
||||
onlyIconControl: false,
|
||||
disabled: false,
|
||||
showLine: true,
|
||||
selectedKey: "",
|
||||
replaceFields: () => {
|
||||
return {
|
||||
id: "id",
|
||||
@ -136,14 +138,15 @@ function handleClick(node: TreeData) {
|
||||
:node-list="nodeList"
|
||||
:show-checkbox="showCheckbox"
|
||||
:show-line="showLine"
|
||||
:selectedKey="selectedKey"
|
||||
:check-strictly="checkStrictly"
|
||||
:collapse-transition="collapseTransition"
|
||||
:only-icon-control="onlyIconControl"
|
||||
@node-click="handleClick"
|
||||
>
|
||||
<template v-if="slots.title">
|
||||
<slot name="title" :data="data"></slot>
|
||||
</template>
|
||||
<template v-if="$slots.title" v-slot:title="{ data }">
|
||||
<slot name="title" :data="data"></slot>
|
||||
</template>
|
||||
</tree-node>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -133,33 +133,36 @@ class Tree {
|
||||
return node;
|
||||
}
|
||||
|
||||
treeForeach (tree: any, func: Function) {
|
||||
treeForeach(tree: any, func: Function) {
|
||||
tree.forEach((data: any) => {
|
||||
data.children && this.treeForeach(data.children, func) // 遍历子树
|
||||
func(data)
|
||||
})
|
||||
data.children && this.treeForeach(data.children, func); // 遍历子树
|
||||
func(data);
|
||||
});
|
||||
}
|
||||
|
||||
setChildrenChecked(checked: boolean, nodes: TreeData[]) {
|
||||
var ableCount = 0;
|
||||
var checkCount = 0;
|
||||
const len = nodes.length;
|
||||
this.treeForeach(nodes ,(node: any) => {
|
||||
if(!node.isDisabled) {
|
||||
this.treeForeach(nodes, (node: any) => {
|
||||
if (!node.isDisabled) {
|
||||
ableCount = ableCount + 1;
|
||||
if(node.isChecked) {
|
||||
if (node.isChecked) {
|
||||
checkCount = checkCount + 1;
|
||||
}
|
||||
}
|
||||
})
|
||||
checkCount < ableCount ? checked = true : checked = false;
|
||||
});
|
||||
checkCount < ableCount ? (checked = true) : (checked = false);
|
||||
for (let i = 0; i < len; i++) {
|
||||
if(!nodes[i].isDisabled || (nodes[i].isDisabled && nodes[i].children.length > 0)) {
|
||||
if (
|
||||
!nodes[i].isDisabled ||
|
||||
(nodes[i].isDisabled && nodes[i].children.length > 0)
|
||||
) {
|
||||
nodes[i].isChecked = checked;
|
||||
}
|
||||
nodes[i].children &&
|
||||
nodes[i].children.length > 0 &&
|
||||
this.setChildrenChecked(checked, nodes[i].children);
|
||||
nodes[i].children.length > 0 &&
|
||||
this.setChildrenChecked(checked, nodes[i].children);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -33,15 +33,6 @@ export const useTree: UseTree = (props: TreeProps, emit: TreeEmits) => {
|
||||
return nodes;
|
||||
});
|
||||
|
||||
watch(
|
||||
() => nodeList,
|
||||
(list) => {
|
||||
const { checkedKeys, expandKeys } = tree.getKeys();
|
||||
emit("update:checkedKeys", checkedKeys);
|
||||
},
|
||||
{ deep: true }
|
||||
);
|
||||
|
||||
return {
|
||||
tree,
|
||||
nodeList,
|
||||
|
||||
@ -19,6 +19,7 @@ export interface LayTreeSelect {
|
||||
collapseTagsTooltip?: boolean;
|
||||
minCollapsedNum?: number;
|
||||
size?: string;
|
||||
checkStrictly?: boolean;
|
||||
}
|
||||
|
||||
export interface TreeSelectEmits {
|
||||
@ -34,13 +35,14 @@ const props = withDefaults(defineProps<LayTreeSelect>(), {
|
||||
allowClear: false,
|
||||
collapseTagsTooltip: true,
|
||||
minCollapsedNum: 3,
|
||||
checkStrictly: true,
|
||||
size: "md",
|
||||
});
|
||||
|
||||
const singleValue = ref();
|
||||
const multipleValue = ref(["1"]);
|
||||
const dropdownRef = ref();
|
||||
const openState = ref(false);
|
||||
const dropdownRef = ref();
|
||||
const emits = defineEmits<TreeSelectEmits>();
|
||||
|
||||
const selectedValue = computed({
|
||||
@ -53,6 +55,16 @@ const selectedValue = computed({
|
||||
},
|
||||
});
|
||||
|
||||
const checkedKeys = computed({
|
||||
get() {
|
||||
return props.multiple ? props.modelValue : [];
|
||||
},
|
||||
set(value) {
|
||||
emits("update:modelValue", value);
|
||||
emits("change", value);
|
||||
}
|
||||
})
|
||||
|
||||
watch(
|
||||
[selectedValue],
|
||||
() => {
|
||||
@ -60,12 +72,14 @@ watch(
|
||||
multipleValue.value = selectedValue.value.map((value: any) => {
|
||||
const node: any = getNode(props.data, value);
|
||||
node.label = node.title;
|
||||
node.closable = !node.disabled;
|
||||
return node;
|
||||
});
|
||||
} else {
|
||||
singleValue.value = props.data.find((item: any) => {
|
||||
return item.value === selectedValue.value;
|
||||
})?.label;
|
||||
const node: any = getNode(props.data, selectedValue.value);
|
||||
if(node) {
|
||||
singleValue.value = node.title;
|
||||
}
|
||||
}
|
||||
},
|
||||
{ immediate: true, deep: true }
|
||||
@ -87,14 +101,14 @@ const handleClick = (node: any) => {
|
||||
@hide="openState = false"
|
||||
>
|
||||
<lay-tag-input
|
||||
v-if="multiple"
|
||||
v-model="multipleValue"
|
||||
:size="size"
|
||||
:allow-clear="allowClear"
|
||||
:placeholder="placeholder"
|
||||
:collapseTagsTooltip="collapseTagsTooltip"
|
||||
:minCollapsedNum="minCollapsedNum"
|
||||
:disabledInput="true"
|
||||
v-model="multipleValue"
|
||||
v-if="multiple"
|
||||
>
|
||||
<template #suffix>
|
||||
<lay-icon
|
||||
@ -124,7 +138,9 @@ const handleClick = (node: any) => {
|
||||
:data="data"
|
||||
:onlyIconControl="true"
|
||||
:show-checkbox="multiple"
|
||||
v-model:checkedKeys="selectedValue"
|
||||
:check-strictly="checkStrictly"
|
||||
v-model:selectedKey="selectedValue"
|
||||
v-model:checkedKeys="checkedKeys"
|
||||
@node-click="handleClick"
|
||||
></lay-tree>
|
||||
</div>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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
|
||||
:::
|
||||
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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">
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user