ant-design-vue/components/cascader/demo/index.vue

<script>
import Basic from './basic'
import ChangeOnSelect from './change-on-select'
import CustomRender from './custom-render'
import CustomTrigger from './custom-trigger'
import DefaultValue from './default-value'
import DisabledOption from './disabled-option'
import Hover from './hover'
import Lazy from './lazy'
import Search from './search'
import Size from './size'
import FieldsName from './fields-name'
import Suffix from './suffix'

import CN from '../index.zh-CN.md'
import US from '../index.en-US.md'
const md = {
  cn: `# Cascader 级联选择
          级联选择框。
## 何时使用
- 需要从一组相关联的数据集合进行选择，例如省市区，公司层级，事物分类等。
- 从一个较大的数据集合中进行选择时，用多级分类进行分隔，方便选择。
- 比起 Select 组件，可以在同一个浮层中完成选择，有较好的体验。
          ## 代码演示`,
  us: `# Cascader
          Cascade selection box.
## When To Use
- When you need to select from a set of associated data set. Such as province/city/district, company level, things classification.
- When selecting from a large data set, with multi-stage classification separated for easy selection.
- Chooses cascade items in one float layer for better user experience.
## Examples
          `,
}
export default {
  category: 'Components',
  type: 'Data Entry',
  zhType: '数据录入',
  title: 'Cascader',
  subtitle: '级联选择',
  render () {
    return (
      <div id='components-cascader-demo'>
        <md cn={md.cn} us={md.us}/>
        <Basic />
        <ChangeOnSelect/>
        <CustomRender/>
        <CustomTrigger/>
        <DefaultValue/>
        <DisabledOption/>
        <Hover/>
        <Lazy/>
        <Search/>
        <Size/>
        <FieldsName />
        <Suffix />
        <api>
          <CN slot='cn' />
          <US/>
        </api>
      </div>
    )
  },
}
</script>
<style>
#components-cascader-demo .ant-cascader-picker {
  width: 300px;
}
</style>