yg-yygl 0.0.1

package/src/views/demo-case/tree-select/index.vue

@@ -0,0 +1,525 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+
+const value1 = ref('');
+const value2 = ref('');
+const value3 = ref('');
+const value4 = ref('');
+const value5 = ref('');
+const value6 = ref('');
+const value7 = ref('');
+const value8 = ref('');
+const value9 = ref('');
+
+const data = [
+  {
+    value: '1',
+    label: 'Level one 1',
+    children: [
+      {
+        value: '1-1',
+        label: 'Level two 1-1',
+        children: [
+          {
+            value: '1-1-1',
+            label: 'Level three 1-1-1',
+          },
+        ],
+      },
+    ],
+  },
+  {
+    value: '2',
+    label: 'Level one 2',
+    children: [
+      {
+        value: '2-1',
+        label: 'Level two 2-1',
+        children: [
+          {
+            value: '2-1-1',
+            label: 'Level three 2-1-1',
+          },
+        ],
+      },
+      {
+        value: '2-2',
+        label: 'Level two 2-2',
+        children: [
+          {
+            value: '2-2-1',
+            label: 'Level three 2-2-1',
+          },
+        ],
+      },
+    ],
+  },
+  {
+    value: '3',
+    label: 'Level one 3',
+    children: [
+      {
+        value: '3-1',
+        label: 'Level two 3-1',
+        children: [
+          {
+            value: '3-1-1',
+            label: 'Level three 3-1-1',
+          },
+        ],
+      },
+      {
+        value: '3-2',
+        label: 'Level two 3-2',
+        children: [
+          {
+            value: '3-2-1',
+            label: 'Level three 3-2-1',
+          },
+        ],
+      },
+    ],
+  },
+];
+
+const data2 = [
+  {
+    id: 1,
+    label: 'Level one 1',
+    children: [
+      {
+        id: 4,
+        label: 'Level two 1-1',
+        children: [
+          {
+            id: 9,
+            label: 'Level three 1-1-1',
+          },
+          {
+            id: 10,
+            label: 'Level three 1-1-2',
+          },
+        ],
+      },
+    ],
+  },
+  {
+    id: 2,
+    label: 'Level one 2',
+    children: [
+      {
+        id: 5,
+        label: 'Level two 2-1',
+        children: [
+          {
+            id: 11,
+            label: 'Level three 2-1-1',
+          },
+        ],
+      },
+      {
+        id: 6,
+        label: 'Level two 2-2',
+        children: [
+          {
+            id: 12,
+            label: 'Level three 2-2-1',
+          },
+        ],
+      },
+    ],
+  },
+  {
+    id: 3,
+    label: 'Level one 3',
+    children: [
+      {
+        id: 7,
+        label: 'Level two 3-1',
+        children: [
+          {
+            id: 13,
+            label: 'Level three 3-1-1',
+          },
+        ],
+      },
+      {
+        id: 8,
+        label: 'Level two 3-2',
+        children: [
+          {
+            id: 14,
+            label: 'Level three 3-2-1',
+          },
+        ],
+      },
+    ],
+  },
+];
+
+const defaultKeys = ref([9]);
+
+const data3 = [
+  {
+    value: '1',
+    label: 'Level one 1',
+    children: [
+      {
+        value: '1-1',
+        label: 'Level two 1-1',
+        children: [
+          {
+            value: '1-1-1',
+            label: 'Level three 1-1-1',
+          },
+        ],
+      },
+    ],
+  },
+  {
+    value: '2',
+    label: 'Level one 2',
+    disabled: true,
+    children: [
+      {
+        value: '2-1',
+        label: 'Level two 2-1',
+        children: [
+          {
+            value: '2-1-1',
+            label: 'Level three 2-1-1',
+          },
+        ],
+      },
+      {
+        value: '2-2',
+        label: 'Level two 2-2',
+        children: [
+          {
+            value: '2-2-1',
+            label: 'Level three 2-2-1',
+          },
+        ],
+      },
+    ],
+  },
+  {
+    value: '3',
+    label: 'Level one 3',
+    children: [
+      {
+        value: '3-1',
+        label: 'Level two 3-1',
+        children: [
+          {
+            value: '3-1-1',
+            label: 'Level three 3-1-1',
+          },
+        ],
+      },
+      {
+        value: '3-2',
+        label: 'Level two 3-2',
+        children: [
+          {
+            value: '3-2-1',
+            label: 'Level three 3-2-1',
+          },
+        ],
+      },
+    ],
+  },
+];
+
+const props = {
+  value: 'id',
+  label: 'label',
+  children: 'children',
+};
+
+const data4 = [
+  {
+    id: 1,
+    label: 'Level one 1',
+    children: [
+      {
+        id: 3,
+        label: 'Level two 1-1',
+        children: [
+          {
+            id: 4,
+            label: 'Level three 1-1-1',
+          },
+          {
+            id: 5,
+            label: 'Level three 1-1-2',
+          },
+        ],
+      },
+      {
+        id: 2,
+        label: 'Level two 1-2',
+        children: [
+          {
+            id: 6,
+            label: 'Level three 1-2-1',
+          },
+        ],
+      },
+    ],
+  },
+];
+
+const data5 = ref([
+  {
+    value: '1',
+    label: 'Level one 1',
+    children: [
+      {
+        value: '1-1',
+        label: 'Level two 1-1',
+        children: [
+          {
+            value: '1-1-1',
+            label: 'Level three 1-1-1',
+          },
+        ],
+      },
+    ],
+  },
+  {
+    value: '2',
+    label: 'Level one 2',
+    children: [
+      {
+        value: '2-1',
+        label: 'Level two 2-1',
+        children: [
+          {
+            value: '2-1-1',
+            label: 'Level three 2-1-1',
+          },
+        ],
+      },
+      {
+        value: '2-2',
+        label: 'Level two 2-2',
+        children: [
+          {
+            value: '2-2-1',
+            label: 'Level three 2-2-1',
+          },
+        ],
+      },
+    ],
+  },
+  {
+    value: '3',
+    label: 'Level one 3',
+    children: [
+      {
+        value: '3-1',
+        label: 'Level two 3-1',
+        children: [
+          {
+            value: '3-1-1',
+            label: 'Level three 3-1-1',
+          },
+        ],
+      },
+      {
+        value: '3-2',
+        label: 'Level two 3-2',
+        children: [
+          {
+            value: '3-2-1',
+            label: 'Level three 3-2-1',
+          },
+        ],
+      },
+    ],
+  },
+]);
+
+const filterNode = (value: string, data: any) => {
+  if (!value) return true;
+  return data.label.includes(value);
+};
+
+const filterText = ref('');
+</script>
+
+<template>
+  <div class="p-6 bg-background w-full h-full overflow-auto rounded-md">
+    <!-- 标题区域 -->
+    <div class="mb-6">
+      <h2 class="m-0 mb-2 text-2xl font-semibold text-[hsl(var(--foreground))]">
+        TreeSelect 树形选择
+      </h2>
+      <p class="m-0 text-sm text-[hsl(var(--foreground-secondary))]">
+        树形选择控件，用于展示树形结构的数据
+      </p>
+    </div>
+
+    <!-- 区域1：基础用法 -->
+    <div class="bg-white rounded-[var(--radius)] p-6 mb-4">
+      <h3 class="m-0 mb-4 text-base font-medium text-[hsl(var(--foreground))] border-l-[3px] border-l-primary pl-3">
+        基础用法
+      </h3>
+      <p class="mb-4 text-sm text-[hsl(var(--foreground-secondary))]">基础的树形选择用法。</p>
+      <div class="max-w-xs">
+        <ElTreeSelect
+          v-model="value1"
+          :data="data"
+          placeholder="请选择"
+        />
+      </div>
+    </div>
+
+    <!-- 区域2：多选 -->
+    <div class="bg-white rounded-[var(--radius)] p-6 mb-4">
+      <h3 class="m-0 mb-4 text-base font-medium text-[hsl(var(--foreground))] border-l-[3px] border-l-primary pl-3">
+        多选
+      </h3>
+      <p class="mb-4 text-sm text-[hsl(var(--foreground-secondary))]">可以使用 multiple 属性来开启多选模式。</p>
+      <div class="max-w-xs">
+        <ElTreeSelect
+          v-model="value2"
+          :data="data"
+          multiple
+          placeholder="请选择"
+        />
+      </div>
+    </div>
+
+    <!-- 区域3：可清空 -->
+    <div class="bg-white rounded-[var(--radius)] p-6 mb-4">
+      <h3 class="m-0 mb-4 text-base font-medium text-[hsl(var(--foreground))] border-l-[3px] border-l-primary pl-3">
+        可清空
+      </h3>
+      <p class="mb-4 text-sm text-[hsl(var(--foreground-secondary))]">可以使用 clearable 属性来设置是否可清空。</p>
+      <div class="max-w-xs">
+        <ElTreeSelect
+          v-model="value3"
+          :data="data"
+          clearable
+          placeholder="请选择"
+        />
+      </div>
+    </div>
+
+    <!-- 区域4：可搜索 -->
+    <div class="bg-white rounded-[var(--radius)] p-6 mb-4">
+      <h3 class="m-0 mb-4 text-base font-medium text-[hsl(var(--foreground))] border-l-[3px] border-l-primary pl-3">
+        可搜索
+      </h3>
+      <p class="mb-4 text-sm text-[hsl(var(--foreground-secondary))]">可以使用 filterable 属性来开启搜索模式。</p>
+      <div class="max-w-xs">
+        <ElTreeSelect
+          v-model="value4"
+          :data="data"
+          filterable
+          placeholder="请选择"
+        />
+      </div>
+    </div>
+
+    <!-- 区域5：懒加载 -->
+    <div class="bg-white rounded-[var(--radius)] p-6 mb-4">
+      <h3 class="m-0 mb-4 text-base font-medium text-[hsl(var(--foreground))] border-l-[3px] border-l-primary pl-3">
+        懒加载
+      </h3>
+      <p class="mb-4 text-sm text-[hsl(var(--foreground-secondary))]">可以使用 lazy 属性来开启懒加载模式。</p>
+      <div class="max-w-xs">
+        <ElTreeSelect
+          v-model="value5"
+          :data="data2"
+          :props="props"
+          placeholder="请选择"
+        />
+      </div>
+    </div>
+
+    <!-- 区域6：默认展开和默认选中 -->
+    <div class="bg-white rounded-[var(--radius)] p-6 mb-4">
+      <h3 class="m-0 mb-4 text-base font-medium text-[hsl(var(--foreground))] border-l-[3px] border-l-primary pl-3">
+        默认展开和默认选中
+      </h3>
+      <p class="mb-4 text-sm text-[hsl(var(--foreground-secondary))]">可以使用 default-expand-all 和 default-checked-keys 属性来设置默认展开和默认选中。</p>
+      <div class="max-w-xs">
+        <ElTreeSelect
+          v-model="value6"
+          :data="data4"
+          :props="props"
+          :default-expand-all="true"
+          :default-checked-keys="defaultKeys"
+          placeholder="请选择"
+        />
+      </div>
+    </div>
+
+    <!-- 区域7：禁用选项 -->
+    <div class="bg-white rounded-[var(--radius)] p-6 mb-4">
+      <h3 class="m-0 mb-4 text-base font-medium text-[hsl(var(--foreground))] border-l-[3px] border-l-primary pl-3">
+        禁用选项
+      </h3>
+      <p class="mb-4 text-sm text-[hsl(var(--foreground-secondary))]">可以使用 disabled 属性来禁用某个选项。</p>
+      <div class="max-w-xs">
+        <ElTreeSelect
+          v-model="value7"
+          :data="data3"
+          placeholder="请选择"
+        />
+      </div>
+    </div>
+
+    <!-- 区域8：树节点过滤 -->
+    <div class="bg-white rounded-[var(--radius)] p-6 mb-4">
+      <h3 class="m-0 mb-4 text-base font-medium text-[hsl(var(--foreground))] border-l-[3px] border-l-primary pl-3">
+        树节点过滤
+      </h3>
+      <p class="mb-4 text-sm text-[hsl(var(--foreground-secondary))]">可以使用 filter-method 属性来自定义过滤方法。</p>
+      <div class="max-w-xs">
+        <ElTreeSelect
+          v-model="value8"
+          :data="data5"
+          :filter-method="filterNode"
+          filterable
+          placeholder="请选择"
+        />
+      </div>
+    </div>
+
+    <!-- 区域9：自定义节点内容 -->
+    <div class="bg-white rounded-[var(--radius)] p-6 mb-4">
+      <h3 class="m-0 mb-4 text-base font-medium text-[hsl(var(--foreground))] border-l-[3px] border-l-primary pl-3">
+        自定义节点内容
+      </h3>
+      <p class="mb-4 text-sm text-[hsl(var(--foreground-secondary))]">可以使用 render-content 属性来自定义节点内容。</p>
+      <div class="max-w-xs">
+        <ElTreeSelect
+          v-model="value9"
+          :data="data"
+          placeholder="请选择"
+        />
+      </div>
+    </div>
+
+    <!-- 区域10：多选可搜索 -->
+    <div class="bg-white rounded-[var(--radius)] p-6 mb-4">
+      <h3 class="m-0 mb-4 text-base font-medium text-[hsl(var(--foreground))] border-l-[3px] border-l-primary pl-3">
+        多选可搜索
+      </h3>
+      <p class="mb-4 text-sm text-[hsl(var(--foreground-secondary))]">可以同时开启多选和搜索功能。</p>
+      <div class="max-w-xs">
+        <ElTreeSelect
+          v-model="value1"
+          :data="data"
+          multiple
+          filterable
+          placeholder="请选择"
+        />
+      </div>
+    </div>
+  </div>
+</template>