小程序初始提交
This commit is contained in:
391
cool-unix/pages/demo/data/tree.uvue
Normal file
391
cool-unix/pages/demo/data/tree.uvue
Normal file
@@ -0,0 +1,391 @@
|
||||
<template>
|
||||
<cl-page>
|
||||
<view class="p-3">
|
||||
<demo-item :label="t('树形结构')">
|
||||
<cl-tree
|
||||
v-model="checkedKeys"
|
||||
ref="treeRef"
|
||||
:list="list"
|
||||
:icon="isCustomIcon ? 'add-circle-line' : 'arrow-right-s-fill'"
|
||||
:expand-icon="isCustomIcon ? 'indeterminate-circle-line' : 'arrow-down-s-fill'"
|
||||
:checkable="true"
|
||||
:multiple="true"
|
||||
:check-strictly="checkStrictly"
|
||||
></cl-tree>
|
||||
|
||||
<cl-list border :pt="{ className: 'mt-5' }">
|
||||
<cl-list-item :label="t('父子关联')">
|
||||
<cl-switch v-model="checkStrictly"></cl-switch>
|
||||
</cl-list-item>
|
||||
|
||||
<cl-list-item :label="t('换个图标')">
|
||||
<cl-switch v-model="isCustomIcon"></cl-switch>
|
||||
</cl-list-item>
|
||||
</cl-list>
|
||||
</demo-item>
|
||||
|
||||
<demo-item :label="t('选中值')">
|
||||
<cl-text>{{ checkedKeys.join("、") }}</cl-text>
|
||||
</demo-item>
|
||||
|
||||
<demo-item :label="t('选中操作')">
|
||||
<view class="mb-2">
|
||||
<cl-button @tap="setChecked">{{ t("选中部分节点") }}</cl-button>
|
||||
</view>
|
||||
|
||||
<view class="mb-2">
|
||||
<cl-button @tap="getChecked">{{ t("获取选中节点") }}</cl-button>
|
||||
</view>
|
||||
|
||||
<view class="mb-2">
|
||||
<cl-button @tap="getHalfChecked">{{ t("获取半选节点") }}</cl-button>
|
||||
|
||||
<cl-text
|
||||
v-if="halfCheckedKeys.length > 0"
|
||||
:pt="{
|
||||
className: 'text-sm p-2'
|
||||
}"
|
||||
>{{ halfCheckedKeys.join("、") }}</cl-text
|
||||
>
|
||||
</view>
|
||||
|
||||
<view class="mb-2">
|
||||
<cl-button @tap="clearChecked">{{ t("清空选中") }}</cl-button>
|
||||
</view>
|
||||
</demo-item>
|
||||
|
||||
<demo-item :label="t('展开操作')">
|
||||
<view class="mb-2">
|
||||
<cl-button @tap="expand">{{ t("展开部分节点") }}</cl-button>
|
||||
</view>
|
||||
|
||||
<view class="mb-2">
|
||||
<cl-button @tap="getExpanded">{{ t("获取展开节点") }}</cl-button>
|
||||
|
||||
<cl-text
|
||||
v-if="expandedKeys.length > 0"
|
||||
:pt="{
|
||||
className: 'text-sm p-2'
|
||||
}"
|
||||
>{{ expandedKeys.join("、") }}</cl-text
|
||||
>
|
||||
</view>
|
||||
|
||||
<view class="mb-2">
|
||||
<cl-button @tap="expandAll">{{ t("展开所有") }}</cl-button>
|
||||
</view>
|
||||
|
||||
<view class="mb-2">
|
||||
<cl-button @tap="collapseAll">{{ t("收起所有") }}</cl-button>
|
||||
</view>
|
||||
</demo-item>
|
||||
</view>
|
||||
</cl-page>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import DemoItem from "../components/item.uvue";
|
||||
import { t } from "@/locale";
|
||||
import { ref } from "vue";
|
||||
import { useTree, useUi, type ClTreeItem } from "@/uni_modules/cool-ui";
|
||||
|
||||
const ui = useUi();
|
||||
|
||||
const list = ref<ClTreeItem[]>([]);
|
||||
|
||||
function refresh() {
|
||||
ui.showLoading();
|
||||
|
||||
setTimeout(() => {
|
||||
list.value = useTree([
|
||||
{
|
||||
id: "1",
|
||||
label: "华为",
|
||||
children: [
|
||||
{
|
||||
id: "1-1",
|
||||
label: "手机",
|
||||
children: [
|
||||
{
|
||||
id: "1-1-1",
|
||||
label: "Mate系列",
|
||||
children: [
|
||||
{
|
||||
id: "1-1-1-1",
|
||||
label: "Mate 50"
|
||||
},
|
||||
{
|
||||
id: "1-1-1-2",
|
||||
disabled: true,
|
||||
label: "Mate 40"
|
||||
},
|
||||
{
|
||||
id: "1-1-1-3",
|
||||
label: "Mate 30"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id: "1-1-2",
|
||||
label: "P系列",
|
||||
children: [
|
||||
{
|
||||
id: "1-1-2-1",
|
||||
disabled: true,
|
||||
label: "P60"
|
||||
},
|
||||
{
|
||||
id: "1-1-2-2",
|
||||
label: "P50"
|
||||
},
|
||||
{
|
||||
id: "1-1-2-3",
|
||||
label: "P40"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id: "1-2",
|
||||
label: "笔记本",
|
||||
children: [
|
||||
{
|
||||
id: "1-2-1",
|
||||
label: "MateBook X",
|
||||
children: [
|
||||
{
|
||||
id: "1-2-1-1",
|
||||
label: "MateBook X Pro"
|
||||
},
|
||||
{
|
||||
id: "1-2-1-2",
|
||||
label: "MateBook X 2022"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id: "1-2-2",
|
||||
label: "MateBook D",
|
||||
children: [
|
||||
{
|
||||
id: "1-2-2-1",
|
||||
label: "MateBook D 14"
|
||||
},
|
||||
{
|
||||
id: "1-2-2-2",
|
||||
label: "MateBook D 15"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id: "1-2-3",
|
||||
label: "MateBook 13"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
label: "小米",
|
||||
isExpand: true,
|
||||
children: [
|
||||
{
|
||||
id: "2-1",
|
||||
label: "手机",
|
||||
children: [
|
||||
{
|
||||
id: "2-1-1",
|
||||
label: "小米数字系列"
|
||||
},
|
||||
{
|
||||
id: "2-1-2",
|
||||
label: "Redmi系列"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id: "2-2",
|
||||
label: "家电",
|
||||
children: [
|
||||
{
|
||||
id: "2-2-1",
|
||||
label: "电视"
|
||||
},
|
||||
{
|
||||
id: "2-2-2",
|
||||
label: "空调"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
label: "苹果",
|
||||
children: [
|
||||
{
|
||||
id: "3-1",
|
||||
label: "手机",
|
||||
children: [
|
||||
{
|
||||
id: "3-1-1",
|
||||
label: "iPhone 14"
|
||||
},
|
||||
{
|
||||
id: "3-1-2",
|
||||
label: "iPhone 13"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id: "3-2",
|
||||
label: "平板",
|
||||
children: [
|
||||
{
|
||||
id: "3-2-1",
|
||||
label: "iPad Pro"
|
||||
},
|
||||
{
|
||||
id: "3-2-2",
|
||||
label: "iPad Air"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
label: "OPPO",
|
||||
children: [
|
||||
{
|
||||
id: "4-1",
|
||||
label: "手机",
|
||||
children: [
|
||||
{
|
||||
id: "4-1-1",
|
||||
label: "Find系列"
|
||||
},
|
||||
{
|
||||
id: "4-1-2",
|
||||
label: "Reno系列"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id: "4-2",
|
||||
label: "配件",
|
||||
children: [
|
||||
{
|
||||
id: "4-2-1",
|
||||
label: "耳机"
|
||||
},
|
||||
{
|
||||
id: "4-2-2",
|
||||
label: "手环"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
label: "vivo",
|
||||
children: [
|
||||
{
|
||||
id: "5-1",
|
||||
label: "手机",
|
||||
children: [
|
||||
{
|
||||
id: "5-1-1",
|
||||
label: "X系列"
|
||||
},
|
||||
{
|
||||
id: "5-1-2",
|
||||
label: "S系列"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id: "5-2",
|
||||
label: "智能设备",
|
||||
children: [
|
||||
{
|
||||
id: "5-2-1",
|
||||
label: "手表"
|
||||
},
|
||||
{
|
||||
id: "5-2-2",
|
||||
label: "耳机"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]);
|
||||
|
||||
ui.hideLoading();
|
||||
}, 500);
|
||||
}
|
||||
|
||||
// 是否严格的遵循父子不互相关联
|
||||
const checkStrictly = ref(false);
|
||||
|
||||
// 是否自定义图标
|
||||
const isCustomIcon = ref(false);
|
||||
|
||||
// 树形组件引用
|
||||
const treeRef = ref<ClTreeComponentPublicInstance | null>(null);
|
||||
|
||||
// 选中节点的keys
|
||||
const checkedKeys = ref<(string | number)[]>(["1-1-1-1", "2-1-1", "2-1-2"]);
|
||||
const checkedKeys2 = ref<string | null>("1-1-1");
|
||||
|
||||
// 半选节点的keys
|
||||
const halfCheckedKeys = ref<(string | number)[]>([]);
|
||||
|
||||
// 展开节点的keys
|
||||
const expandedKeys = ref<(string | number)[]>([]);
|
||||
|
||||
// 演示方法
|
||||
function setChecked() {
|
||||
treeRef.value!.setCheckedKeys(["1-1", "2"]);
|
||||
}
|
||||
|
||||
function getChecked() {
|
||||
checkedKeys.value = treeRef.value!.getCheckedKeys();
|
||||
}
|
||||
|
||||
function clearChecked() {
|
||||
treeRef.value!.clearChecked();
|
||||
checkedKeys.value = [];
|
||||
halfCheckedKeys.value = [];
|
||||
}
|
||||
|
||||
function getHalfChecked() {
|
||||
halfCheckedKeys.value = treeRef.value!.getHalfCheckedKeys();
|
||||
}
|
||||
|
||||
function expand() {
|
||||
treeRef.value!.setExpandedKeys(["4", "5"]);
|
||||
}
|
||||
|
||||
function getExpanded() {
|
||||
expandedKeys.value = treeRef.value!.getExpandedKeys();
|
||||
}
|
||||
|
||||
function expandAll() {
|
||||
treeRef.value!.expandAll();
|
||||
expandedKeys.value = treeRef.value!.getExpandedKeys();
|
||||
}
|
||||
|
||||
function collapseAll() {
|
||||
treeRef.value!.collapseAll();
|
||||
expandedKeys.value = [];
|
||||
}
|
||||
|
||||
onReady(() => {
|
||||
refresh();
|
||||
});
|
||||
</script>
|
||||
Reference in New Issue
Block a user