iview

iView-Area

中国行政区级联选择组件

Select形式

基本使用

请选择省
请选择市
请选择县区
请选择乡镇街
<al-selector v-model="resArr" />
[]
                    

设置显示级别

请选择省
请选择省
请选择市
请选择省
请选择市
请选择县区
请选择省
请选择市
请选择县区
请选择乡镇街

<al-selector v-model="resArr" level="0" />
<al-selector v-model="resArr" :level="0" />
<al-selector v-model="resArr" level="1" />
<al-selector v-model="resArr" level="2" />
<al-selector v-model="resArr" level="3" />

[]
                    

三种返回值类型

datatype="all"
请选择省
请选择市
请选择县区
datatype="name"
请选择省
请选择市
请选择县区
datatype="code"
请选择省
请选择市
请选择县区

<al-selector v-model="resArr" level="2" />
<al-selector data-type="all" v-model="resArr" level="2" />
<al-selector data-type="name" v-model="resArr" level="2" />
<al-selector data-type="code" v-model="resArr" level="2" />

[]
                    

三种尺寸

请选择省
请选择省
请选择省

<al-selector size="large" v-model="resArr" level="0" />
<al-selector size="default" v-model="resArr" level="0" />
<al-selector v-model="resArr" level="0" />
<al-selector size="small" v-model="resArr" level="0" />

[]
                    

可搜索

<al-selector searchable v-model="resArr" level="2" />

[]
                    

禁用

请选择省
请选择市
请选择县区
请选择省
请选择市
请选择县区
请选择省
请选择市
请选择县区

<al-selector level="2" v-model="sDisabled" disabled />
<al-selector level="2" v-model="sDisabled" :disbled="[1, 2]" />
<al-selector level="2" v-model="sDisabled" :disbled="1" />

[]
                    

默认数据

河北省
张家口市
怀来县

<al-selector level="2" v-model="sDefault" />
sDefault: ['河北省', '张家口市', '怀来县']
<al-selector level="2" v-model="sDefault" />
sDefault: ['130000', '130700', '130730']

[
  {
    "code": "130000",
    "name": "河北省"
  },
  {
    "code": "130700",
    "name": "张家口市"
  },
  {
    "code": "130730",
    "name": "怀来县"
  },
  {
    "code": "130730100000",
    "name": "沙城镇"
  }
]
                    

设置占位符文字

自己设置占位符
自己设置占位符
自己设置占位符
请选择县区

<al-selector placeholder="自己设置占位符" level="2" v-model="sDefault" :disabled="1" />
<al-selector placeholder="['省', '市', '县']" level="2" v-model="sDefault" :disabled="1" />
<al-selector placeholder="['省', '市']" level="2" v-model="sDefault" :disabled="1" />

[]
                    

设置搜索无匹配数据时提示文字

<al-selector not-found-text="自己设置无匹配提示" level="2" v-model="sNotFound" />
<al-selector :not-found-text="['无此省', '无此市', '无此县']" level="2" v-model="sNotFound" />
<al-selector :not-found-text="['无此省', '无此市']" level="2" v-model="sNotFound" />

[]
                    

自动默认选择

请选择省
请选择市
请选择县区
请选择乡镇街
<al-selector auto v-model="resArr" />
[]
                    

Cascader形式

基本使用

<al-cascader v-model="resArr" />
[]
                    

设置显示级别

<al-cascader v-model="resArr" level="0" />
<al-cascader v-model="resArr" :level="0" />
<al-cascader v-model="resArr" level="1" />
<al-cascader v-model="resArr" level="2" />
<al-cascader v-model="resArr" level="3" />

[]
                    

三种返回值类型

datatype="all"
datatype="name"
datatype="code"

<al-cascader v-model="resArr" level="2" />
<al-cascader data-type="all" v-model="resArr" level="2" />
<al-cascader data-type="name" v-model="resArr" level="2" />
<al-cascader data-type="code" v-model="resArr" level="2" />

[]
                    

三种尺寸

<al-cascader size="large" v-model="resArr" level="1" />
<al-cascader size="default" v-model="resArr" level="1" />
<al-cascader v-model="resArr" level="1" />
<al-cascader size="small" v-model="resArr" level="1" />

[]
                    

禁用

<al-cascader disabled v-model="resArr" level="0" />

[]
                    

默认数据

<al-cascader level="2" v-model="cDefault" />
cDefault: ['河北省', '张家口市', '怀来县']
<al-cascader level="2" v-model="cDefault" />
cDefault: ['130000', '130700', '130730', '130730100000']

[
  {
    "code": "130000",
    "name": "河北省"
  },
  {
    "code": "130700",
    "name": "张家口市"
  },
  {
    "code": "130730",
    "name": "怀来县"
  },
  {
    "code": "130730100000",
    "name": "沙城镇"
  }
]
                    

占位符

<al-cascader placeholder="自设占位符" v-model="resArr" level="0" />

[]
                    

自定义所选数据显示格式

<al-cascader :render-format="label => label.join(' => ')" v-model="resArr" level="3" />

这里不显示结果数据