@opentiny/vue-docs 2.2.7 → 2.2.9

package/demos/pc/app/select/basic-usage.spec.ts

@@ -1,20 +1,45 @@
 import { test, expect } from '@playwright/test'
 
-test('基础用法', async ({ page }) => {
+test('基础用法标签式', async ({ page }) => {
   await page.goto('select#basic-usage')
   const wrap = page.locator('#basic-usage')
-  const input = wrap.locator('.tiny-input__inner')
-  const dropdown = page.locator('.tiny-select-dropdown')
+  const select = wrap.locator('.tiny-select').nth(0)
+  const input = select.locator('.tiny-input__inner')
+  const dropdown = page.locator('body > .tiny-select-dropdown')
+  const option = dropdown.locator('.tiny-option')
 
   await input.click()
-  await dropdown.getByRole('listitem').filter({ hasText: '蚵仔煎' }).click()
+  await option.filter({ hasText: '蚵仔煎' }).click()
   await expect(input).toHaveValue('蚵仔煎')
-  await wrap.locator('.tiny-input__suffix svg').click()
+  await select.locator('.tiny-input__suffix svg').click()
   await expect(page.getByRole('listitem').filter({ hasText: '蚵仔煎' })).toHaveClass(/selected/)
-  await dropdown.getByRole('listitem').filter({ hasText: '北京烤鸭' }).click()
+  await option.filter({ hasText: '北京烤鸭' }).click()
   await expect(input).toHaveValue('北京烤鸭')
   await input.click()
-  await expect(dropdown.getByRole('listitem').filter({ hasText: '北京烤鸭' })).toHaveClass(/selected/)
-  await wrap.click()
-  await expect(page.locator('div').filter({ hasText: '黄金糕双皮奶蚵仔煎龙须面北京烤鸭' }).first()).toBeHidden()
+  await expect(option.filter({ hasText: '北京烤鸭' })).toHaveClass(/selected/)
+  await expect(option.locator('.tiny-option__icon')).toHaveCount(5)
+  await option.nth(0).click()
+  await expect(dropdown).toBeHidden()
+})
+
+test('基础用法配置式', async ({ page }) => {
+  await page.goto('select#basic-usage')
+  const wrap = page.locator('#basic-usage')
+  const select = wrap.locator('.tiny-select').nth(1)
+  const input = select.locator('.tiny-input__inner')
+  const dropdown = page.locator('body > .tiny-select-dropdown')
+  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 option.filter({ hasText: '北京烤鸭' }).click()
+  await expect(input).toHaveValue('北京烤鸭')
+  await input.click()
+  await expect(option.filter({ hasText: '北京烤鸭' })).toHaveClass(/selected/)
+  await expect(option.locator('.tiny-option__icon')).toHaveCount(5)
+  await option.nth(0).click()
+  await expect(dropdown).toBeHidden()
 })

package/demos/pc/app/select/basic-usage.vue

@@ -1,14 +1,19 @@
 <template>
   <div>
     <p>选中的值为： {{ value }}</p>
+    <p>场景1：标签式</p>
     <tiny-select v-model="value">
-      <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
+      <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" :icon="item.icon">
+      </tiny-option>
     </tiny-select>
+    <p>场景1：配置式</p>
+    <tiny-select v-model="value" :options="options"> </tiny-select>
   </div>
 </template>
 
 <script>
 import { Select, Option } from '@opentiny/vue'
+import { iconFile } from '@opentiny/vue-icon'
 
 export default {
   components: {
@@ -18,11 +23,11 @@ export default {
   data() {
     return {
       options: [
-        { value: '选项1', label: '黄金糕' },
-        { value: '选项2', label: '双皮奶' },
-        { value: '选项3', label: '蚵仔煎' },
-        { value: '选项4', label: '龙须面' },
-        { value: '选项5', label: '北京烤鸭' }
+        { value: '选项1', label: '黄金糕', icon: iconFile() },
+        { value: '选项2', label: '双皮奶', icon: iconFile() },
+        { value: '选项3', label: '蚵仔煎', icon: iconFile() },
+        { value: '选项4', label: '龙须面', icon: iconFile() },
+        { value: '选项5', label: '北京烤鸭', icon: iconFile() }
       ],
       value: ''
     }

package/demos/pc/app/select/clear-no-match-value-composition-api.vue

@@ -8,7 +8,7 @@
     </tiny-select>
 
     <p>
-      场景2：多选，multiVal 找不到匹配值，multiVal为：<span class="multi-val">{{ multiVal }}</span>
+      场景2：多选，multiVal 找不到匹配值，multiVal 为：<span class="multi-val">{{ multiVal }}</span>
     </p>
     <tiny-select v-model="multiVal" :clear-no-match-value="true" multiple>
       <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>

package/demos/pc/app/select/clear-no-match-value.vue

@@ -8,7 +8,7 @@
     </tiny-select>
 
     <p>
-      场景2：多选，multiVal 找不到匹配值，multiVal为：<span class="multi-val">{{ multiVal }}</span>
+      场景2：多选，multiVal 找不到匹配值，multiVal 为：<span class="multi-val">{{ multiVal }}</span>
     </p>
     <tiny-select v-model="multiVal" :clear-no-match-value="true" multiple>
       <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>

package/demos/pc/app/select/events-composition-api.vue

@@ -46,37 +46,43 @@ const value2 = ref([])
 const change = () => {
   Modal.message({
     message: '触发 change 事件',
-    duration: 500
+    duration: 500,
+    status: 'info'
   })
 }
 
 const clear = () => {
   Modal.message({
-    message: '触发 clear 事件'
+    message: '触发 clear 事件',
+    status: 'info'
   })
 }
 
 const focus = () => {
   Modal.message({
-    message: '触发 focus 事件'
+    message: '触发 focus 事件',
+    status: 'info'
   })
 }
 
 const blur = () => {
   Modal.message({
-    message: '触发 blur 事件'
+    message: '触发 blur 事件',
+    status: 'info'
   })
 }
 
 const removeTag = () => {
   Modal.message({
-    message: '触发 remove-tag 事件'
+    message: '触发 remove-tag 事件',
+    status: 'info'
   })
 }
 
 const visibleChange = () => {
   Modal.message({
-    message: '触发 visible-change 事件'
+    message: '触发 visible-change 事件',
+    status: 'info'
   })
 }
 </script>

package/demos/pc/app/select/events.vue

@@ -54,12 +54,14 @@ export default {
     change() {
       Modal.message({
         message: '触发 change 事件',
-        duration: 500
+        duration: 500,
+        status: 'info'
       })
     },
     clear() {
       Modal.message({
-        message: '触发 clear 事件'
+        message: '触发 clear 事件',
+        status: 'info'
       })
     },
     focus() {
@@ -69,17 +71,20 @@ export default {
     },
     blur() {
       Modal.message({
-        message: '触发 blur 事件'
+        message: '触发 blur 事件',
+        status: 'info'
       })
     },
     removeTag() {
       Modal.message({
-        message: '触发 remove-tag 事件'
+        message: '触发 remove-tag 事件',
+        status: 'info'
       })
     },
     visibleChange() {
       Modal.message({
-        message: '触发 visible-change 事件'
+        message: '触发 visible-change 事件',
+        status: 'info'
       })
     }
   }

package/demos/pc/app/select/is-drop-inherit-width-composition-api.vue

@@ -18,8 +18,7 @@ import { Select as TinySelect, Option as TinyOption } from '@opentiny/vue'
 const options = ref([
   {
     value: '选项1',
-    label:
-      '黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕'
+    label: '黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕'
   },
   { value: '选项2', label: '双皮奶' },
   { value: '选项3', label: '蚵仔煎' },

package/demos/pc/app/select/is-drop-inherit-width.vue

@@ -24,8 +24,7 @@ export default {
       options: [
         {
           value: '选项1',
-          label:
-            '黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕'
+          label: '黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕'
         },
         { value: '选项2', label: '双皮奶' },
         { value: '选项3', label: '蚵仔煎' },

package/demos/pc/app/select/no-data-text-composition-api.vue

@@ -5,7 +5,7 @@
       <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
     </tiny-select>
     <p>场景2：自定义空数据文本</p>
-    <tiny-select v-model="value" no-data-text="None">
+    <tiny-select v-model="value" no-data-text="暂无数据">
       <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
     </tiny-select>
     <p>场景3：显示空数据图片</p>

package/demos/pc/app/select/no-data-text.spec.ts

@@ -21,7 +21,7 @@ test('自定义空数据文本', async ({ page }) => {
   const dropdown = page.locator('body > .tiny-select-dropdown')
 
   await input.click()
-  await expect(dropdown.locator('.tiny-select-dropdown__empty')).toHaveText('None')
+  await expect(dropdown.locator('.tiny-select-dropdown__empty')).toHaveText('暂无数据')
 })
 
 test('显示空数据图片', async ({ page }) => {

package/demos/pc/app/select/no-data-text.vue

@@ -5,7 +5,7 @@
       <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
     </tiny-select>
     <p>场景2：自定义空数据文本</p>
-    <tiny-select v-model="value" no-data-text="None">
+    <tiny-select v-model="value" no-data-text="暂无数据">
       <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
     </tiny-select>
     <p>场景3：显示空数据图片</p>

package/demos/pc/app/select/optimization-composition-api.vue

@@ -17,7 +17,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Form as TinyForm, FormItem as TinyFormItem, Select as TinySelect, Modal } from '@opentiny/vue'
+import { Select as TinySelect, Modal } from '@opentiny/vue'
 
 const buildOptions = () =>
   Array.from({ length: 100000 }).map((item, i) => JSON.parse(`{"value":"选项${i}","label":"黄金糕${i}"}`))
@@ -27,7 +27,10 @@ const value2 = ref([])
 const options = ref(buildOptions())
 
 const onChange = (value) => {
-  Modal.message(JSON.stringify(value))
+  Modal.message({
+    message: JSON.stringify(value),
+    status: 'info'
+  })
 }
 </script>
 

package/demos/pc/app/select/optimization.vue

@@ -34,7 +34,10 @@ export default {
   },
   methods: {
     onChange(value) {
-      Modal.message(JSON.stringify(value))
+      Modal.message({
+        message: JSON.stringify(value),
+        status: 'info'
+      })
     }
   }
 }

package/demos/pc/app/select/option-group-composition-api.vue

@@ -1,14 +1,28 @@
 <template>
-  <tiny-select v-model="value" multiple filterable :searchable="true">
-    <tiny-option-group v-for="group in options3" :key="group.label" :label="group.label" :disabled="!!group.disabled">
-      <tiny-option
-        v-for="item in group.options"
-        :key="item.value"
-        :label="item.label"
-        :value="item.value"
-      ></tiny-option>
-    </tiny-option-group>
-  </tiny-select>
+  <div>
+    <p>场景1：分组 + 多选 + 面板可搜索</p>
+    <tiny-select v-model="value" multiple filterable :searchable="true">
+      <tiny-option-group v-for="group in options3" :key="group.label" :label="group.label" :disabled="!!group.disabled">
+        <tiny-option
+          v-for="item in group.options"
+          :key="item.value"
+          :label="item.label"
+          :value="item.value"
+        ></tiny-option>
+      </tiny-option-group>
+    </tiny-select>
+    <p>场景2：分组</p>
+    <tiny-select v-model="value" filterable>
+      <tiny-option-group v-for="group in options3" :key="group.label" :label="group.label" :disabled="!!group.disabled">
+        <tiny-option
+          v-for="item in group.options"
+          :key="item.value"
+          :label="item.label"
+          :value="item.value"
+        ></tiny-option>
+      </tiny-option-group>
+    </tiny-select>
+  </div>
 </template>
 
 <script setup>
@@ -30,7 +44,11 @@ const options3 = ref([
       { value: 'Chengdu', label: '成都' },
       { value: 'Shenzhen', label: '深圳' },
       { value: 'Guangzhou', label: '广州' },
-      { value: 'Dalian', label: '大连' }
+      { value: 'Dalian', label: '大连' },
+      { value: 'Chongqing', label: '重庆' },
+      { value: 'Xianggang', label: '香港' },
+      { value: 'Aomen', label: '澳门' },
+      { value: 'Wulumuqi', label: '乌鲁木齐' }
     ]
   }
 ])
@@ -41,4 +59,8 @@ const value = ref('')
 .tiny-select {
   width: 280px;
 }
+p {
+  font-size: 14px;
+  line-height: 1.5;
+}
 </style>

package/demos/pc/app/select/option-group.spec.ts

@@ -4,7 +4,7 @@ test('option-group', async ({ page }) => {
   await page.goto('select#option-group')
 
   const wrap = page.locator('#option-group')
-  const select = wrap.locator('.tiny-select')
+  const select = wrap.locator('.tiny-select').nth(0)
   const dropdown = page.locator('body > .tiny-select-dropdown')
   const option = dropdown.locator('.tiny-option')
   const title = dropdown.locator('.tiny-option-group__title')
@@ -16,6 +16,6 @@ test('option-group', async ({ page }) => {
   await expect(option.filter({ hasText: '上海' })).toHaveClass(/is-disabled/)
   await expect(option.filter({ hasText: '北京' })).toHaveClass(/is-disabled/)
   await expect(group.nth(0).locator('.tiny-option')).toHaveCount(2)
-  await expect(group.nth(1).locator('.tiny-option')).toHaveCount(4)
+  await expect(group.nth(1).locator('.tiny-option')).toHaveCount(8)
   await expect((await group.all()).length).toEqual(2)
 })

package/demos/pc/app/select/option-group.vue

@@ -1,14 +1,28 @@
 <template>
-  <tiny-select v-model="value" multiple filterable :searchable="true">
-    <tiny-option-group v-for="group in options3" :key="group.label" :label="group.label" :disabled="!!group.disabled">
-      <tiny-option
-        v-for="item in group.options"
-        :key="item.value"
-        :label="item.label"
-        :value="item.value"
-      ></tiny-option>
-    </tiny-option-group>
-  </tiny-select>
+  <div>
+    <p>场景1：分组 + 多选 + 面板可搜索</p>
+    <tiny-select v-model="value" multiple filterable :searchable="true">
+      <tiny-option-group v-for="group in options3" :key="group.label" :label="group.label" :disabled="!!group.disabled">
+        <tiny-option
+          v-for="item in group.options"
+          :key="item.value"
+          :label="item.label"
+          :value="item.value"
+        ></tiny-option>
+      </tiny-option-group>
+    </tiny-select>
+    <p>场景2：分组</p>
+    <tiny-select v-model="value" filterable>
+      <tiny-option-group v-for="group in options3" :key="group.label" :label="group.label" :disabled="!!group.disabled">
+        <tiny-option
+          v-for="item in group.options"
+          :key="item.value"
+          :label="item.label"
+          :value="item.value"
+        ></tiny-option>
+      </tiny-option-group>
+    </tiny-select>
+  </div>
 </template>
 
 <script>
@@ -37,11 +51,14 @@ export default {
             { value: 'Chengdu', label: '成都' },
             { value: 'Shenzhen', label: '深圳' },
             { value: 'Guangzhou', label: '广州' },
-            { value: 'Dalian', label: '大连' }
+            { value: 'Dalian', label: '大连' },
+            { value: 'Chongqing', label: '重庆' },
+            { value: 'Xianggang', label: '香港' },
+            { value: 'Aomen', label: '澳门' },
+            { value: 'Wulumuqi', label: '乌鲁木齐' }
           ]
         }
-      ],
-      value: ''
+      ]
     }
   }
 }
@@ -51,4 +68,8 @@ export default {
 .tiny-select {
   width: 280px;
 }
+p {
+  font-size: 14px;
+  line-height: 1.5;
+}
 </style>

package/demos/pc/app/select/slot-default-composition-api.vue

@@ -1,24 +1,53 @@
 <template>
-  <tiny-select v-model="value" popper-class="slot-default">
-    <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
-      <span class="left">{{ item.label }}</span>
-      <span class="right">{{ item.value }}</span>
-    </tiny-option>
-  </tiny-select>
+  <div>
+    <p>场景1：带标签和提示信息</p>
+    <tiny-select v-model="value1" popper-class="slot-default">
+      <template v-for="item in options1" :key="item.value">
+        <tiny-tooltip :content="item.tip" placement="right" effect="light">
+          <tiny-option :label="item.label" :value="item.value">
+            <span class="left">{{ item.label }}</span>
+            <tiny-tag v-if="item.tag" type="danger" effect="light" size="small">{{ item.tag }}</tiny-tag>
+          </tiny-option>
+        </tiny-tooltip>
+      </template>
+    </tiny-select>
+
+    <p>场景2：选项双行</p>
+    <tiny-select v-model="value2" popper-class="double-row">
+      <tiny-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value">
+        <div>
+          <p>
+            {{ item.label }}
+          </p>
+          <p>{{ item.desc }}</p>
+        </div>
+      </tiny-option>
+    </tiny-select>
+  </div>
 </template>
 
 <script setup>
 import { ref } from 'vue'
-import { Select as TinySelect, Option as TinyOption } from '@opentiny/vue'
+import { Select as TinySelect, Option as TinyOption, Tag as TinyTag, Tooltip as TinyTooltip } from '@opentiny/vue'
 
-const options = ref([
-  { value: '选项1', label: '黄金糕' },
+const options1 = ref([
+  { value: '选项1', label: '黄金糕', tag: 'New', tip: '自定义提示' },
   { value: '选项2', label: '双皮奶' },
   { value: '选项3', label: '蚵仔煎' },
   { value: '选项4', label: '龙须面' },
   { value: '选项5', label: '北京烤鸭' }
 ])
-const value = ref('')
+
+const options2 = ref([
+  { value: '选项1', label: '子网1 （192.168.0.1/24）', desc: '可用 IP 数 250' },
+  { value: '选项2', label: '子网2 （192.168.0.1/24）', desc: '可用 IP 数 250' },
+  { value: '选项3', label: '子网3 （192.168.0.1/24）', desc: '可用 IP 数 250' },
+  { value: '选项4', label: '子网4 （192.168.0.1/24）', desc: '可用 IP 数 250' },
+  { value: '选项5', label: '子网5 （192.168.0.1/24）', desc: '可用 IP 数 250' }
+])
+
+const value1 = ref('选项1')
+const value2 = ref('选项1')
 </script>
 
 <style lang="less" scoped>
@@ -29,9 +58,16 @@ const value = ref('')
   .left {
     margin-right: 8px;
   }
-  .right {
-    color: #8492a6;
-    font-size: 12px;
+}
+</style>
+
+<style lang="less">
+.double-row {
+  &.tiny-select-dropdown .tiny-select-dropdown__wrap {
+    max-height: 224px;
+    .tiny-option {
+      height: 54px;
+    }
   }
 }
 </style>

package/demos/pc/app/select/slot-default.spec.ts

@@ -4,11 +4,14 @@ test('选项插槽', async ({ page }) => {
   await page.goto('select#slot-default')
 
   const wrap = page.locator('#slot-default')
-  const select = wrap.locator('.tiny-select')
+  const select = wrap.locator('.tiny-select').nth(0)
   const input = select.locator('.tiny-input__inner')
   const dropdown = page.locator('body > .tiny-select-dropdown')
   const option = dropdown.locator('.tiny-option')
 
   await input.click()
-  await expect(option.filter({ hasText: '选项1' })).toBeVisible()
+  await expect(option.filter({ hasText: '黄金糕' })).toBeVisible()
+  await expect(option.filter({ hasText: '黄金糕' }).locator('.tiny-tag')).toHaveText('New')
+  await option.filter({ hasText: '黄金糕' }).hover()
+  await expect(page.locator('body > .tiny-tooltip').filter({ hasText: '自定义提示' })).toBeVisible()
 })

package/demos/pc/app/select/slot-default.vue

@@ -1,30 +1,59 @@
 <template>
-  <tiny-select v-model="value" popper-class="slot-default">
-    <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
-      <span class="left">{{ item.label }}</span>
-      <span class="right">{{ item.value }}</span>
-    </tiny-option>
-  </tiny-select>
+  <div>
+    <p>场景1：带标签和提示信息</p>
+    <tiny-select v-model="value1" popper-class="slot-default">
+      <template v-for="item in options1" :key="item.value">
+        <tiny-tooltip :content="item.tip" placement="right" effect="light">
+          <tiny-option :label="item.label" :value="item.value">
+            <span class="left">{{ item.label }}</span>
+            <tiny-tag v-if="item.tag" type="danger" effect="light" size="small">{{ item.tag }}</tiny-tag>
+          </tiny-option>
+        </tiny-tooltip>
+      </template>
+    </tiny-select>
+
+    <p>场景2：选项双行</p>
+    <tiny-select v-model="value2" popper-class="double-row">
+      <tiny-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value">
+        <div>
+          <p>
+            {{ item.label }}
+          </p>
+          <p>{{ item.desc }}</p>
+        </div>
+      </tiny-option>
+    </tiny-select>
+  </div>
 </template>
 
 <script>
-import { Select, Option } from '@opentiny/vue'
+import { Select, Option, Tag, Tooltip } from '@opentiny/vue'
 
 export default {
   components: {
     TinySelect: Select,
-    TinyOption: Option
+    TinyOption: Option,
+    TinyTag: Tag,
+    TinyTooltip: Tooltip
   },
   data() {
     return {
-      options: [
-        { value: '选项1', label: '黄金糕' },
+      options1: [
+        { value: '选项1', label: '黄金糕', tag: 'New', tip: '自定义提示' },
         { value: '选项2', label: '双皮奶' },
         { value: '选项3', label: '蚵仔煎' },
         { value: '选项4', label: '龙须面' },
         { value: '选项5', label: '北京烤鸭' }
       ],
-      value: ''
+      options2: [
+        { value: '选项1', label: '子网1 （192.168.0.1/24）', desc: '可用 IP 数 250' },
+        { value: '选项2', label: '子网2 （192.168.0.1/24）', desc: '可用 IP 数 250' },
+        { value: '选项3', label: '子网3 （192.168.0.1/24）', desc: '可用 IP 数 250' },
+        { value: '选项4', label: '子网4 （192.168.0.1/24）', desc: '可用 IP 数 250' },
+        { value: '选项5', label: '子网5 （192.168.0.1/24）', desc: '可用 IP 数 250' }
+      ],
+      value1: '选项1',
+      value2: '选项1'
     }
   }
 }
@@ -38,9 +67,16 @@ export default {
   .left {
     margin-right: 8px;
   }
-  .right {
-    color: #8492a6;
-    font-size: 12px;
+}
+</style>
+
+<style lang="less">
+.double-row {
+  &.tiny-select-dropdown .tiny-select-dropdown__wrap {
+    max-height: 224px;
+    .tiny-option {
+      height: 54px;
+    }
   }
 }
 </style>