✨(component): 新增 treeSelect 组件
This commit is contained in:
就眠儀式
parent
5b1426ee1b
commit
15372347a3
@ -1,9 +1,73 @@
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: "treeSelect",
|
||||
name: "LayTreeSelect",
|
||||
};
|
||||
</script>
|
||||
|
||||
<script lang="ts" setup></script>
|
||||
<script lang="ts" setup>
|
||||
import { computed, ref } from "vue";
|
||||
|
||||
<template></template>
|
||||
export interface LayTreeSelect {
|
||||
data: any,
|
||||
modelValue: string;
|
||||
disabled: boolean;
|
||||
}
|
||||
|
||||
export interface TreeSelectEmits {
|
||||
(e: "update:modelValue", value: string): void;
|
||||
(e: "change", value: string): void;
|
||||
(e: "search", value: string): void;
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<LayTreeSelect>(), {
|
||||
disabled: false
|
||||
});
|
||||
|
||||
const singleValue = ref();
|
||||
const dropdownRef = ref();
|
||||
const openState = ref(false);
|
||||
const emits = defineEmits<TreeSelectEmits>();
|
||||
const selectedValue = computed({
|
||||
get() {
|
||||
return props.modelValue;
|
||||
},
|
||||
set(value) {
|
||||
emits("update:modelValue", value);
|
||||
emits("change", value);
|
||||
}
|
||||
})
|
||||
|
||||
const handleClick = (node: any) => {
|
||||
dropdownRef.value.hide();
|
||||
selectedValue.value = node.id;
|
||||
singleValue.value = node.title;
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="layui-tree-select">
|
||||
<lay-dropdown
|
||||
ref="dropdownRef"
|
||||
:disabled="disabled"
|
||||
:update-at-scroll="true"
|
||||
@show="openState = true"
|
||||
@hide="openState = false">
|
||||
<lay-input v-model="singleValue"></lay-input>
|
||||
<template #content>
|
||||
<div class="layui-tree-select-content">
|
||||
<lay-tree :data="data" :onlyIconControl="true" @node-click="handleClick"></lay-tree>
|
||||
</div>
|
||||
</template>
|
||||
</lay-dropdown>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.layui-tree-select {
|
||||
width: 220px;
|
||||
}
|
||||
|
||||
.layui-tree-select-content {
|
||||
padding: 10px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -61,6 +61,7 @@ import LayDropdownSubMenu from "./component/dropdownSubMenu/index";
|
||||
import LayTab from "./component/tab/index";
|
||||
import LayTabItem from "./component/tabItem/index";
|
||||
import LayTree from "./component/tree/index";
|
||||
import LayTreeSelect from "./component/treeSelect/index";
|
||||
import LayTable from "./component/table/index";
|
||||
import LayPage from "./component/page/index";
|
||||
import LayTransfer from "./component/transfer/index";
|
||||
@ -180,6 +181,7 @@ const components: Record<string, Plugin> = {
|
||||
LaySpace,
|
||||
LayTag,
|
||||
LayTagInput,
|
||||
LayTreeSelect
|
||||
};
|
||||
|
||||
const install = (app: App, options?: InstallOptions): void => {
|
||||
@ -276,6 +278,7 @@ export {
|
||||
LaySpace,
|
||||
LayTag,
|
||||
LayTagInput,
|
||||
LayTreeSelect,
|
||||
install,
|
||||
};
|
||||
|
||||
|
||||
@ -0,0 +1,239 @@
|
||||
::: anchor
|
||||
:::
|
||||
|
||||
::: title 基本介绍
|
||||
:::
|
||||
|
||||
::: describe 树形组件一般用于展示具有层级关系的数据
|
||||
:::
|
||||
|
||||
::: title 基础使用
|
||||
:::
|
||||
|
||||
::: demo 使用 `lay-tree` 标签, 创建树形组件, @node-click 监听节点点击。
|
||||
|
||||
<template>
|
||||
<lay-tree-select v-model="value" :data="data"></lay-tree-select> {{ value }}
|
||||
</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: ''
|
||||
}]
|
||||
}]
|
||||
}]);
|
||||
|
||||
function handleClick(node) {
|
||||
console.log(node)
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title Tree 属性
|
||||
:::
|
||||
|
||||
::: table
|
||||
|
||||
| Name | Description | Accepted Values |
|
||||
| -------------------------------- | ---------------------------------------- | --------------- |
|
||||
| data | 树型组件数据,类型 TreeData \| TreeData[] | null |
|
||||
| showCheckbox | 是否显示复选框 | false |
|
||||
| onlyIconControl | 是否仅允许节点左侧图标控制展开收缩 | false |
|
||||
| showLine | 是否开启连接线 | true |
|
||||
| checkedKeys(v-model:checkedKeys) | 开启 showCheckbox 后, 选中的节点 | [] |
|
||||
| collapse-transition | 是否开启展示收起动画 | false |
|
||||
|
||||
:::
|
||||
|
||||
::: title Tree 数据
|
||||
:::
|
||||
|
||||
::: table
|
||||
|
||||
| Name | Description | Accepted Values |
|
||||
|---------------------|-------------| --------------- |
|
||||
| id | 唯一值 | - |
|
||||
| title | 节点名称 | - |
|
||||
| children | 子节点 | [] |
|
||||
| disabled | 该节点是否禁用 | false |
|
||||
| spread | 该节点是否展开 | false |
|
||||
|
||||
:::
|
||||
|
||||
::: title Tree 事件
|
||||
:::
|
||||
|
||||
::: table
|
||||
|
||||
| Name | Description | Accepted Params |
|
||||
| ---------- | --------------- | --------------- |
|
||||
| node-click | 节点 click 事件 | -- |
|
||||
|
||||
:::
|
||||
|
||||
|
||||
|
||||
::: contributor transition
|
||||
:::
|
||||
|
||||
::: previousNext transition
|
||||
:::
|
||||
@ -236,6 +236,11 @@ const zhCN = [
|
||||
component: () => import("../document/zh-CN/components/tree.md"),
|
||||
meta: { title: "树形组件" },
|
||||
},
|
||||
{
|
||||
path: "/zh-CN/components/treeSelect",
|
||||
component: () => import("../document/zh-CN/components/treeSelect.md"),
|
||||
meta: { title: "下拉树组件" },
|
||||
},
|
||||
{
|
||||
path: "/zh-CN/components/page",
|
||||
component: () => import("../document/zh-CN/components/page.md"),
|
||||
|
||||
@ -185,6 +185,12 @@ const menus = [
|
||||
subTitle: "select",
|
||||
path: "/zh-CN/components/select",
|
||||
},
|
||||
{
|
||||
id: 39,
|
||||
title: "下拉树",
|
||||
subTitle: "select",
|
||||
path: "/zh-CN/components/treeSelect",
|
||||
},
|
||||
{
|
||||
id: 39,
|
||||
title: "标签输入框",
|
||||
|
||||
Loading…
Reference in New Issue
Block a user