feat:下拉树支持懒加载 (#3915)

Author: discreted66

examples/sites/demos/apis/tree-select.js

@@ -264,6 +264,44 @@ export default {
           },
           mode: ['pc'],
           pcDemo: 'map-field'
+        },
+        {
+          name: 'lazy',
+          type: 'boolean',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN': '是否懒加载子节点，配合 load 属性使用',
+            'en-US': 'Whether to lazily load child nodes and use them in conjunction with the load attribute'
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'lazy',
+          mfDemo: 'lazy'
+        },
+        {
+          name: 'load',
+          type: '(node, resolve) => void',
+          defaultValue: '',
+          desc: {
+            'zh-CN':
+              '加载子树数据的方法。点击节点后，组件开始调用load方法，只有在load函数内调用resolve(data)，才表示返回下级的数据成功。',
+            'en-US':
+              'Method of loading subtree data. After the node is clicked, the component starts to call the load method. Only when resolve(data) is called in the load function, the data at the lower level is successfully returned.'
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'lazy',
+          mfDemo: 'lazy'
+        },
+        {
+          name: 'after-load',
+          type: 'Function',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '节点懒加载完成后的回调函数',
+            'en-US': 'Callback function after node lazy loading is completed'
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'lazy',
+          mfDemo: 'lazy'
         }
       ]
     }
@@ -281,6 +319,9 @@ interface ITreeNode {
 
 interface ITreeOption {
   data: ITreeNode[] // 树数据，用法同 Tree
+  lazy?: boolean // 是否懒加载子节点
+  load?: (node: ITreeNodeVm, resolve: IResolveType) => void // 加载子树数据的方法
+  afterLoad?: (data: any) => void // 节点懒加载完成后的回调函数
 }
 `
     },

examples/sites/demos/mobile-first/app/tree-select/lazy.vue

@@ -0,0 +1,59 @@
+<template>
+  <tiny-tree-select v-model="value" :tree-op="treeOp" lazy :load="load" :after-load="afterLoad"></tiny-tree-select>
+</template>
+
+<script>
+import { TinyTreeSelect } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyTreeSelect
+  },
+  data() {
+    return {
+      value: '',
+      treeOp: {}
+    }
+  },
+  methods: {
+    // node 为点击的节点，resolve 为回调函数，用于异步返回下层节点的数据
+    load(node, resolve) {
+      console.log('即将加载节点下级数据：', node)
+
+      // 通过 level =0 来识别第一次加载
+      if (node.level === 0) {
+        resolve([
+          { value: '1', label: '一级 1' },
+          { value: '2', label: '一级 2' },
+          { value: '3', label: '一级 3' }
+        ])
+      }
+      // 通过 data 有值，识别是用户点击后的加载
+      else if (node.data) {
+        const parentId = node.data.value
+        const parentLabel = node.data.label
+
+        const children = Array.from({ length: 5 }, (v, k) => k + 1).map((num) => ({
+          value: `${parentId}-${num}`,
+          label: `${parentLabel}-${num}`,
+          disabled: Math.random() - 0.5 > 0, // 随机禁用节点
+          isLeaf: Math.random() - 0.5 > 0 // 随机设置叶子节点
+        }))
+
+        // 模拟异步返回
+        setTimeout(() => resolve(children), Math.random() * 2 * 1000)
+      }
+    },
+    afterLoad(data) {
+      console.log('afterLoad 属性触发：', data)
+    }
+  }
+}
+</script>
+
+<style scoped>
+[data-tag='tiny-base-select'],
+[data-tag='tiny-tree-select'] {
+  width: 280px;
+}
+</style>

examples/sites/demos/mobile-first/app/tree-select/webdoc/tree-select.js

@@ -68,6 +68,18 @@ export default {
       },
       codeFiles: ['disabled.vue']
     },
+    {
+      demoId: 'lazy',
+      name: {
+        'zh-CN': '懒加载',
+        'en-US': 'Lazy loading'
+      },
+      desc: {
+        'zh-CN':
+          '通过 <code>lazy</code> 属性，启用懒加载模式。<br>通过 <code>load</code> 函数属性，触发加载，初始会执行一次。<br>通过 <code>after-load</code> 函数属性，监听下级节点加载完毕的事件。'
+      },
+      codeFiles: ['lazy.vue']
+    },
     {
       demoId: 'map-field',
       name: {

examples/sites/demos/pc/app/select-wrapper/all-text.spec.ts

@@ -2,7 +2,7 @@ import { expect, test } from '@playwright/test'
 
 test('多选时自定义全部的文本', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
-  await page.goto('select#all-text')
+  await page.goto('select-wrapper#all-text')
   const wrap = page.locator('#all-text')
   const select = wrap.locator('.tiny-select').nth(0)
   const dropdown = page.locator('body > .tiny-select-dropdown')

examples/sites/demos/pc/app/select-wrapper/all-text.vue

@@ -13,7 +13,7 @@
 </template>
 
 <script>
-import { TinySelect, TinyOption } from '@opentiny/vue'
+import { TinySelectWrapper as TinySelect, TinyOption } from '@opentiny/vue'
 
 export default {
   components: {

examples/sites/demos/pc/app/select-wrapper/allow-create.spec.ts

@@ -3,7 +3,7 @@ import { test, expect } from '@playwright/test'
 test('点击选中', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.waitForTimeout(300)
-  await page.goto('select#allow-create')
+  await page.goto('select-wrapper#allow-create')
 
   const wrap = page.locator('#allow-create')
   const select = wrap.locator('.tiny-select').nth(0)
@@ -16,18 +16,18 @@ test('点击选中', async ({ page }) => {
   await input.dispatchEvent('keyup', { KeyboardEvent })
 
   await expect(input).toHaveValue('测试 allow-create')
-  await dropdown.getByRole('listitem').filter({ hasText: '测试 allow-create' }).click()
+  await dropdown.locator('.tiny-option').filter({ hasText: '测试 allow-create' }).click()
   await expect(input).toHaveValue('测试 allow-create')
 
   await input.click()
   await expect(input).toHaveValue('')
-  await expect(dropdown.getByRole('listitem').filter({ hasText: '测试 allow-create' })).toHaveClass(/selected/)
+  await expect(dropdown.locator('.tiny-option').filter({ hasText: '测试 allow-create' })).toHaveClass(/selected/)
 })
 
 test('enter 选中', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.waitForTimeout(300)
-  await page.goto('select#allow-create')
+  await page.goto('select-wrapper#allow-create')
 
   const wrap = page.locator('#allow-create')
   const select = wrap.locator('.tiny-select').nth(1)
@@ -46,5 +46,5 @@ test('enter 选中', async ({ page }) => {
   await input.click()
 
   await expect(input).toHaveValue('')
-  await expect(dropdown.getByRole('listitem').filter({ hasText: 'ab' })).toHaveClass(/selected/)
+  await expect(dropdown.locator('.tiny-option').filter({ hasText: 'ab' })).toHaveClass(/selected/)
 })

examples/sites/demos/pc/app/select-wrapper/allow-create.vue

@@ -51,7 +51,14 @@
 </template>
 
 <script>
-import { TinySelect, TinyOption, TinyInput, TinyButton, TinyDialogBox, TinyModal } from '@opentiny/vue'
+import {
+  TinySelectWrapper as TinySelect,
+  TinyOption,
+  TinyInput,
+  TinyButton,
+  TinyDialogBox,
+  TinyModal
+} from '@opentiny/vue'
 
 export default {
   components: {

examples/sites/demos/pc/app/select-wrapper/automatic-dropdown.spec.ts

@@ -2,7 +2,7 @@ import { test, expect } from '@playwright/test'
 
 test('不可搜索时，获取焦点不下拉', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
-  await page.goto('select#automatic-dropdown')
+  await page.goto('select-wrapper#automatic-dropdown')
   const wrap = page.locator('#automatic-dropdown')
   const input = wrap.locator('.tiny-input__inner').first()
   const dropdown = page.locator('.tiny-select-dropdown').first()
@@ -16,16 +16,16 @@ test('不可搜索时，获取焦点不下拉', async ({ page }) => {
 
 test('可搜索时，获取焦点自动下拉', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
-  await page.goto('select#automatic-dropdown')
+  await page.goto('select-wrapper#automatic-dropdown')
   const wrap = page.locator('#automatic-dropdown')
   const input = wrap.locator('.tiny-input__inner').nth(1)
   const dropdown = page.locator('.tiny-select-dropdown').nth(1)
 
   await wrap.getByRole('button').nth(1).click()
   // 聚焦下拉
-  await dropdown.getByRole('listitem').filter({ hasText: '上海' }).click()
+  await dropdown.locator('.tiny-option').filter({ hasText: '上海' }).click()
   await expect(input).toHaveValue('上海')
   // 验证选中
   await input.click()
-  await expect(page.getByRole('listitem').filter({ hasText: '上海' })).toHaveClass(/selected/)
+  await expect(dropdown.locator('.tiny-option').filter({ hasText: '上海' })).toHaveClass(/selected/)
 })

examples/sites/demos/pc/app/select-wrapper/automatic-dropdown.vue

@@ -17,7 +17,7 @@
 </template>
 
 <script>
-import { TinySelect, TinyOption, TinyButton } from '@opentiny/vue'
+import { TinySelectWrapper as TinySelect, TinyOption, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {

examples/sites/demos/pc/app/select-wrapper/basic-usage.spec.ts

@@ -2,18 +2,18 @@ import { test, expect } from '@playwright/test'
 
 test('基础用法标签式', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
-  await page.goto('select#basic-usage')
+  await page.goto('select-wrapper#basic-usage')
   const wrap = page.locator('#basic-usage')
   const select = wrap.locator('.tiny-select').nth(0)
   const input = select.locator('.tiny-input__inner')
-  const dropdown = page.locator('body > .tiny-select-dropdown')
+  const dropdown = page.locator('body > .tiny-select-dropdown').nth(0)
   const option = dropdown.locator('.tiny-option')
 
   await input.click()
   await option.filter({ hasText: '天津' }).click()
   await expect(input).toHaveValue('天津')
   await select.locator('.tiny-input__suffix svg').click()
-  await expect(page.getByRole('listitem').filter({ hasText: '天津' })).toHaveClass(/selected/)
+  await expect(dropdown.locator('.tiny-option').filter({ hasText: '天津' })).toHaveClass(/selected/)
   await option.filter({ hasText: '深圳' }).click()
   await expect(input).toHaveValue('深圳')
   await input.click()
@@ -25,7 +25,7 @@ test('基础用法标签式', async ({ page }) => {
 
 test('基础用法配置式', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
-  await page.goto('select#basic-usage')
+  await page.goto('select-wrapper#basic-usage')
   const wrap = page.locator('#basic-usage')
   const select = wrap.locator('.tiny-select').nth(1)
   const input = select.locator('.tiny-input__inner')
@@ -36,7 +36,7 @@ test('基础用法配置式', async ({ page }) => {
   await option.filter({ hasText: '天津' }).click()
   await expect(input).toHaveValue('天津')
   await select.locator('.tiny-input__suffix svg').click()
-  await expect(page.getByRole('listitem').filter({ hasText: '天津' })).toHaveClass(/selected/)
+  await expect(dropdown.locator('.tiny-option').filter({ hasText: '天津' })).toHaveClass(/selected/)
   await option.filter({ hasText: '深圳' }).click()
   await expect(input).toHaveValue('深圳')
   await input.click()