docs(base-select): add lazy tree demo

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

@@ -765,6 +765,16 @@ export default {
           mode: ['pc', 'mobile-first'],
           pcDemo: 'slot-reference',
           mfDemo: 'slot-reference'
+        },
+        {
+          name: 'panel',
+          desc: {
+            'zh-CN': '下拉面板插槽',
+            'en-US': 'Panel slot'
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'slot-panel',
+          mfDemo: 'slot-panel'
         }
       ]
     },

examples/sites/demos/pc/app/base-select/slot-panel-composition-api.vue

@@ -0,0 +1,208 @@
+<template>
+  <div>场景1：下拉树单选</div>
+  <tiny-base-select v-model="value">
+    <template #panel="{ props: { state }, methods: { updateModelValue } }">
+      <tiny-tree
+        :data="treeData"
+        :expand-on-click-node="false"
+        :icon-trigger-click-node="false"
+        :default-expand-all="true"
+        @node-click="
+          (data) => {
+            state.visible = false
+            updateModelValue(data.id)
+            nextTick(() => {
+              state.selectedLabel = data.label
+            })
+          }
+        "
+      ></tiny-tree>
+    </template>
+  </tiny-base-select>
+  <div>场景2：下拉树多选</div>
+  <tiny-base-select v-model="value2" multiple>
+    <template #panel="{ props: { state }, methods: { updateModelValue } }">
+      <tiny-tree
+        :data="treeData"
+        :expand-on-click-node="false"
+        :icon-trigger-click-node="false"
+        :default-expand-all="true"
+        :show-checkbox="true"
+        @check="
+          (data, { checkedKeys, checkedNodes }) => {
+            updateModelValue(checkedNodes.map((node) => node.id))
+            nextTick(() => {
+              state.selected = state.selected.map((item) => {
+                return {
+                  ...item,
+                  currentLabel: checkedNodes.find((node) => node.id === item.value).label
+                }
+              })
+            })
+          }
+        "
+      ></tiny-tree>
+    </template>
+  </tiny-base-select>
+  <div>场景3：下拉树可搜索</div>
+  <tiny-base-select v-model="value3" filterable clearable :filter-method="filterMethod">
+    <template #panel="{ props: { state }, methods: { updateModelValue } }">
+      <tiny-tree
+        ref="treeRef"
+        :data="treeData"
+        :expand-on-click-node="false"
+        :icon-trigger-click-node="false"
+        :default-expand-all="true"
+        :filter-node-method="filter"
+        @node-click="
+          (data) => {
+            state.visible = false
+            updateModelValue(data.id)
+            nextTick(() => {
+              state.selectedLabel = data.label
+            })
+          }
+        "
+      ></tiny-tree>
+    </template>
+  </tiny-base-select>
+  <div>场景4：下拉树懒加载（单选）</div>
+  <tiny-base-select v-model="value4">
+    <template #panel="{ props: { state }, methods: { updateModelValue } }">
+      <tiny-tree
+        lazy
+        :load="load"
+        :expand-on-click-node="false"
+        :icon-trigger-click-node="false"
+        @node-click="
+          (data) => {
+            state.visible = false
+            updateModelValue(data.id)
+            nextTick(() => {
+              state.selectedLabel = data.label
+            })
+          }
+        "
+      ></tiny-tree>
+    </template>
+  </tiny-base-select>
+  <div>场景5：下拉树懒加载（多选）</div>
+  <tiny-base-select v-model="value5" multiple>
+    <template #panel="{ props: { state }, methods: { updateModelValue } }">
+      <tiny-tree
+        lazy
+        :load="load"
+        :expand-on-click-node="false"
+        :icon-trigger-click-node="false"
+        :show-checkbox="true"
+        @check="
+          (data, { checkedKeys, checkedNodes }) => {
+            updateModelValue(checkedNodes.map((node) => node.id))
+            nextTick(() => {
+              state.selected = state.selected.map((item) => {
+                return {
+                  ...item,
+                  currentLabel: checkedNodes.find((node) => node.id === item.value).label
+                }
+              })
+            })
+          }
+        "
+      ></tiny-tree>
+    </template>
+  </tiny-base-select>
+</template>
+
+<script setup>
+import { ref, nextTick } from 'vue'
+import { BaseSelect as TinyBaseSelect, Tree as TinyTree } from '@opentiny/vue'
+
+const value = ref()
+const value2 = ref([])
+const value3 = ref()
+const value4 = ref()
+const value5 = ref([])
+
+const treeRef = ref()
+
+const treeData = ref([
+  {
+    id: 1,
+    label: '一级 1',
+    children: [
+      {
+        id: 4,
+        label: '二级 1-1',
+        children: [
+          {
+            id: 9,
+            label: '三级 1-1-1'
+          },
+          {
+            id: 10,
+            label: '三级 1-1-2'
+          }
+        ]
+      }
+    ]
+  },
+  {
+    id: 2,
+    label: '一级 2',
+    children: [
+      {
+        id: 5,
+        label: '二级 2-1'
+      },
+      {
+        id: 6,
+        label: '二级 2-2'
+      }
+    ]
+  }
+])
+
+const filterMethod = (value) => {
+  treeRef.value.filter(value)
+}
+
+const filter = (value, data) => {
+  if (!value) return true
+
+  return data.label.includes(value)
+}
+
+const load = (node, resolve) => {
+  if (node.level === 0) {
+    return resolve([
+      {
+        id: 3,
+        label: '一级 3'
+      }
+    ])
+  }
+  if (node.level > 1) return resolve([])
+
+  setTimeout(() => {
+    const data = [
+      {
+        id: 1,
+        label: '一级 1'
+      },
+      {
+        id: 2,
+        label: '一级 2',
+        isLeaf: true
+      }
+    ]
+
+    resolve(data)
+  }, 500)
+}
+</script>
+
+<style scoped>
+.tiny-base-select {
+  width: 280px;
+}
+</style>

examples/sites/demos/pc/app/base-select/slot-panel.vue

@@ -0,0 +1,213 @@
+<template>
+  <div>场景1：下拉树单选</div>
+  <tiny-base-select v-model="value">
+    <template #panel="{ props: { state }, methods: { updateModelValue } }">
+      <tiny-tree
+        :data="treeData"
+        :expand-on-click-node="false"
+        :icon-trigger-click-node="false"
+        :default-expand-all="true"
+        @node-click="
+          (data) => {
+            state.visible = false
+            updateModelValue(data.id)
+            $nextTick(() => {
+              state.selectedLabel = data.label
+            })
+          }
+        "
+      ></tiny-tree>
+    </template>
+  </tiny-base-select>
+  <div>场景2：下拉树多选</div>
+  <tiny-base-select v-model="value2" multiple>
+    <template #panel="{ props: { state }, methods: { updateModelValue } }">
+      <tiny-tree
+        :data="treeData"
+        :expand-on-click-node="false"
+        :icon-trigger-click-node="false"
+        :default-expand-all="true"
+        :show-checkbox="true"
+        @check="
+          (data, { checkedKeys, checkedNodes }) => {
+            updateModelValue(checkedNodes.map((node) => node.id))
+            $nextTick(() => {
+              state.selected = state.selected.map((item) => {
+                return {
+                  ...item,
+                  currentLabel: checkedNodes.find((node) => node.id === item.value).label
+                }
+              })
+            })
+          }
+        "
+      ></tiny-tree>
+    </template>
+  </tiny-base-select>
+  <div>场景3：下拉树可搜索</div>
+  <tiny-base-select v-model="value3" filterable clearable :filter-method="filterMethod">
+    <template #panel="{ props: { state }, methods: { updateModelValue } }">
+      <tiny-tree
+        ref="treeRef"
+        :data="treeData"
+        :expand-on-click-node="false"
+        :icon-trigger-click-node="false"
+        :default-expand-all="true"
+        :filter-node-method="filter"
+        @node-click="
+          (data) => {
+            state.visible = false
+            updateModelValue(data.id)
+            $nextTick(() => {
+              state.selectedLabel = data.label
+            })
+          }
+        "
+      ></tiny-tree>
+    </template>
+  </tiny-base-select>
+  <div>场景4：下拉树懒加载（单选）</div>
+  <tiny-base-select v-model="value4">
+    <template #panel="{ props: { state }, methods: { updateModelValue } }">
+      <tiny-tree
+        lazy
+        :load="load"
+        :expand-on-click-node="false"
+        :icon-trigger-click-node="false"
+        @node-click="
+          (data) => {
+            state.visible = false
+            updateModelValue(data.id)
+            $nextTick(() => {
+              state.selectedLabel = data.label
+            })
+          }
+        "
+      ></tiny-tree>
+    </template>
+  </tiny-base-select>
+  <div>场景5：下拉树懒加载（多选）</div>
+  <tiny-base-select v-model="value5" multiple>
+    <template #panel="{ props: { state }, methods: { updateModelValue } }">
+      <tiny-tree
+        lazy
+        :load="load"
+        :expand-on-click-node="false"
+        :icon-trigger-click-node="false"
+        :show-checkbox="true"
+        @check="
+          (data, { checkedKeys, checkedNodes }) => {
+            updateModelValue(checkedNodes.map((node) => node.id))
+            $nextTick(() => {
+              state.selected = state.selected.map((item) => {
+                return {
+                  ...item,
+                  currentLabel: checkedNodes.find((node) => node.id === item.value).label
+                }
+              })
+            })
+          }
+        "
+      ></tiny-tree>
+    </template>
+  </tiny-base-select>
+</template>
+
+<script>
+import { BaseSelect, Tree } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyBaseSelect: BaseSelect,
+    TinyTree: Tree
+  },
+  data() {
+    return {
+      value: '',
+      value2: [],
+      value3: '',
+      value4: '',
+      value5: [],
+      treeData: [
+        {
+          id: 1,
+          label: '一级 1',
+          children: [
+            {
+              id: 4,
+              label: '二级 1-1',
+              children: [
+                {
+                  id: 9,
+                  label: '三级 1-1-1'
+                },
+                {
+                  id: 10,
+                  label: '三级 1-1-2'
+                }
+              ]
+            }
+          ]
+        },
+        {
+          id: 2,
+          label: '一级 2',
+          children: [
+            {
+              id: 5,
+              label: '二级 2-1'
+            },
+            {
+              id: 6,
+              label: '二级 2-2'
+            }
+          ]
+        }
+      ]
+    }
+  },
+  methods: {
+    filterMethod(value) {
+      this.$refs.treeRef.filter(value)
+    },
+    filter(value, data) {
+      if (!value) return true
+
+      return data.label.includes(value)
+    },
+    load(node, resolve) {
+      if (node.level === 0) {
+        return resolve([
+          {
+            id: 3,
+            label: '一级 3'
+          }
+        ])
+      }
+      if (node.level > 1) return resolve([])
+
+      setTimeout(() => {
+        const data = [
+          {
+            id: 1,
+            label: '一级 1'
+          },
+          {
+            id: 2,
+            label: '一级 2',
+            isLeaf: true
+          }
+        ]
+
+        resolve(data)
+      }, 500)
+    }
+  }
+}
+</script>
+
+<style scoped>
+.tiny-base-select {
+  width: 280px;
+}
+</style>

examples/sites/demos/pc/app/base-select/webdoc/base-select.js

@@ -491,6 +491,18 @@ export default {
       },
       codeFiles: ['slot-reference.vue']
     },
+    {
+      demoId: 'slot-panel',
+      name: {
+        'zh-CN': '下拉面板插槽',
+        'en-US': 'Panel slot'
+      },
+      desc: {
+        'zh-CN': '<p>通过 <code>panel</code> 插槽自定义下拉面板的内容。</p>\n',
+        'en-US': '<p>Customize content of the panel through the <code>panel</code> slot.</p>'
+      },
+      codeFiles: ['slot-panel.vue']
+    },
     {
       demoId: 'slot-label',
       name: {

packages/vue/src/base-select/src/pc.vue

@@ -351,6 +351,15 @@
               <span>{{ topCreateText }}</span>
             </div>
           </div>
+          <slot
+            name="panel"
+            :props="{
+              state
+            }"
+            :methods="{
+              updateModelValue
+            }"
+          ></slot>
           <!-- tiny 新增 可搜索的输入框 -->
           <tiny-input
             v-if="searchable"
@@ -495,7 +504,13 @@
               </tiny-option>
             </slot>
           </tiny-scrollbar>
-          <template v-if="state.emptyText && (!allowCreate || loading || (allowCreate && state.emptyFlag))">
+          <template
+            v-if="
+              (options || slots.default) &&
+              state.emptyText &&
+              (!allowCreate || loading || (allowCreate && state.emptyFlag))
+            "
+          >
             <!-- tiny 新增 showEmptyImage功能 -->
             <div v-if="loadingText || slots.empty">
               <slot name="empty" v-if="slots.empty"></slot>