Cascader 级联选择

该组件目前处于实验性状态，需要进行更加严密的测试，API 也可能发生比较大的变动

三、二、一 🚀

import { DuCascader } from 'dangoui'

示例

单独使用

<template>
  <PreviewBlock title="单组作为弹出组件">
    <DuButton @click="handleOpen">打开级联选择</DuButton>
    <div>{{ value.join('/') }}</div>
    <DuCascader :options="options" v-model:value="value" v-model:open="open" />
  </PreviewBlock>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { DuCascader, DuButton } from 'dangoui'

const value = ref<string[]>([])
const open = ref(false)

function handleOpen() {
  open.value = true
}

const options = [
  {
    label: '上海',
    value: '上海',
    children: [
      {
        label: '上海',
        value: '上海',
        children: [
          {
            label: '黄浦区',
            value: '黄浦区'
          },
          {
            label: '徐汇区',
            value: '徐汇区'
          },
          {
            label: '长宁区',
            value: '长宁区'
          },
          {
            label: '普陀区',
            value: '普陀区'
          },
          {
            label: '静安区',
            value: '静安区'
          },
          {
            label: '虹口区',
            value: '虹口区'
          },
          {
            label: '杨浦区',
            value: '杨浦区'
          },
        ]
      }
    ]
  },
  {
    label: '浙江',
    value: '浙江',
    children: [
      {
        label: '温州',
        value: '温州',
        children: [
          {
            label: '鹿城区',
            value: '鹿城区'
          },
          {
            label: '龙湾区',
            value: '龙湾区'
          },
          {
            label: '瓯海区',
            value: '瓯海区'
          },
          {
            label: '洞头区',
            value: '洞头区'
          },
          {
            label: '永嘉县',
            value: '永嘉县'
          },
          {
            label: '苍南县',
            value: '苍南县'
          },
          {
            label: '平阳县',
            value: '平阳县'
          },
          {
            label: '泰顺县',
            value: '泰顺县'
          },
          {
            label: '文成县',
            value: '文成县'
          },
          {
            label: '瑞安市',
            value: '瑞安市'
          },
          {
            label: '乐清市',
            value: '乐清市'
          },
          {
            label: '龙港市',
            value: '龙港市'
          },
        ]
      }
    ]
  },
]
</script>

配合 Form 使用

在 FormItem 下，Cascader 默认会显示一个带箭头的表单域，你也可以利用 slot 覆盖这个默认行为

<template>
  <DuCard class="important-mt-4px" title="创建商品" guide-text="">
    <DuForm label-size="80px">
      <DuFormItem label="商品名称" required>
        <DuCascader :options="options" v-model:value="value" />
      </DuFormItem>
    </DuForm>
  </DuCard>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { DuCascader, DuButton, DuForm, DuFormItem, DuCard } from 'dangoui'

const value = ref<string[]>([])
const open = ref(false)

function handleOpen() {
  open.value = true
}

const options = [
  {
    label: '上海',
    value: '上海',
    children: [
      {
        label: '上海',
        value: '上海',
        children: [
          {
            label: '黄浦区',
            value: '黄浦区'
          },
          {
            label: '徐汇区',
            value: '徐汇区'
          },
          {
            label: '长宁区',
            value: '长宁区'
          },
          {
            label: '普陀区',
            value: '普陀区'
          },
          {
            label: '静安区',
            value: '静安区'
          },
          {
            label: '虹口区',
            value: '虹口区'
          },
          {
            label: '杨浦区',
            value: '杨浦区'
          },
        ]
      }
    ]
  },
  {
    label: '浙江',
    value: '浙江',
    children: [
      {
        label: '温州',
        value: '温州',
        children: [
          {
            label: '鹿城区',
            value: '鹿城区'
          },
          {
            label: '龙湾区',
            value: '龙湾区'
          },
          {
            label: '瓯海区',
            value: '瓯海区'
          },
          {
            label: '洞头区',
            value: '洞头区'
          },
          {
            label: '永嘉县',
            value: '永嘉县'
          },
          {
            label: '苍南县',
            value: '苍南县'
          },
          {
            label: '平阳县',
            value: '平阳县'
          },
          {
            label: '泰顺县',
            value: '泰顺县'
          },
          {
            label: '文成县',
            value: '文成县'
          },
          {
            label: '瑞安市',
            value: '瑞安市'
          },
          {
            label: '乐清市',
            value: '乐清市'
          },
          {
            label: '龙港市',
            value: '龙港市'
          },
        ]
      }
    ]
  },
]
</script>

API

属性

属性名	类型	默认值
open	`boolean`	-
value	`string[]`	`[]`
title	`string`	`"\u8BF7\u9009\u62E9"`
options	`CascaderOption[]`	-

插槽

名称
default

事件

名称	类型
update:open	`(event: "update:open", open: boolean): void`
confirm	`(event: "confirm", value: CascaderOption[]): void`
update:value	`(event: "update:value", value: string[]): void`

TODO

支持异步加载