地区选择器，对 ECascader 组件的封装。

基础示例

默认显示为国家-省-市区结构，支持清空、筛选、返回路径节点，通过设置 valueWithId 属性，以及设置 valueOnlyId 属性均为 true 时，返回数据项仅仅是一个 id 字符串。

<template>
  <EBlock class="e-cascader-showcase">
    <EBlock style="margin: 0 20px; width: 400px;">
      <ERegion
        v-model="regionValue"
        filter
        clearable
        value-with-id
        value-only-id
        placeholder="请选择地址" />
      <EBlock style="padding: 10px; flex: 1;">
        <p>{{ JSON.stringify(regionValue) }}</p>
      </EBlock>
    </EBlock>
  </EBlock>
</template>
<script>
export default {
  data(){
    return {
      regionValue:null
    }
  }
}
</script>

更多绑定值为 id 字符串的示例

通过设置 valueWithId 属性，以及设置 valueOnlyId 属性均为 true ，并且搭配 supportRegion 属性，绑定值是一个 id 字符串。

<template>
  <EBlock class="e-cascader-showcase">
    <EBlock style="margin: 0 20px; width: 400px;">
      <EBlock style="padding: 10px; flex: 1;">
        <p>support-region="country province city district"</p>
      </EBlock>
      <ERegion
        v-model="regionValue"
        support-region="country province city district"
        filter
        clearable
        value-with-id
        value-only-id
        placeholder="请选择地址" />
      <EBlock style="padding: 10px; flex: 1;">
        <p>{{ JSON.stringify(regionValue) }}</p>
      </EBlock>
    </EBlock>
    <EBlock style="margin: 0 20px; width: 400px;">
      <EBlock style="padding: 10px; flex: 1;">
        <p>support-region="province city district"</p>
      </EBlock>
      <ERegion
        v-model="regionValue0"
        support-region="province city district"
        filter
        clearable
        value-with-id
        value-only-id
        placeholder="请选择地址" />
      <EBlock style="padding: 10px; flex: 1;">
        <p>{{ JSON.stringify(regionValue0) }}</p>
      </EBlock>
    </EBlock>
    <EBlock style="margin: 0 20px; width: 400px;">
      <EBlock style="padding: 10px; flex: 1;">
        <p>support-region="province city"</p>
      </EBlock>
      <ERegion
        v-model="regionValue1"
        support-region="province city"
        filter
        clearable
        value-with-id
        value-only-id
        placeholder="请选择地址" />
      <EBlock style="padding: 10px; flex: 1;">
        <p>{{ JSON.stringify(regionValue1) }}</p>
      </EBlock>
    </EBlock>
    <EBlock style="margin: 0 20px; width: 400px;">
      <EBlock style="padding: 10px; flex: 1;">
        <p>support-region="city district"</p>
      </EBlock>
      <ERegion
        v-model="regionValue2"
        support-region="city district"
        filter
        clearable
        value-with-id
        value-only-id
        placeholder="请选择地址" />
      <EBlock style="padding: 10px; flex: 1;">
        <p>{{ JSON.stringify(regionValue2) }}</p>
      </EBlock>
    </EBlock>
    <EBlock style="margin: 0 20px; width: 400px;">
      <EBlock style="padding: 10px; flex: 1;">
        <p>support-region="country province"</p>
      </EBlock>
      <ERegion
        v-model="regionValue3"
        support-region="country province"
        filter
        clearable
        value-with-id
        value-only-id
        placeholder="请选择地址" />
      <EBlock style="padding: 10px; flex: 1;">
        <p>{{ JSON.stringify(regionValue3) }}</p>
      </EBlock>
    </EBlock>
    <EBlock style="margin: 0 20px; width: 400px;">
      <EBlock style="padding: 10px; flex: 1;">
        <p>support-region="province"</p>
      </EBlock>
      <ERegion
        v-model="regionValue4"
        support-region="province"
        filter
        clearable
        value-with-id
        value-only-id
        placeholder="请选择地址" />
      <EBlock style="padding: 10px; flex: 1;">
        <p>{{ JSON.stringify(regionValue4) }}</p>
      </EBlock>
    </EBlock>
    <EBlock style="margin: 0 20px; width: 400px;">
      <EBlock style="padding: 10px; flex: 1;">
        <p>support-region="city"</p>
      </EBlock>
      <ERegion
        v-model="regionValue5"
        support-region="city"
        filter
        clearable
        value-with-id
        value-only-id
        placeholder="请选择地址" />
      <EBlock style="padding: 10px; flex: 1;">
        <p>{{ JSON.stringify(regionValue5) }}</p>
      </EBlock>
    </EBlock>
    <EBlock style="margin: 0 20px; width: 400px;">
      <EBlock style="padding: 10px; flex: 1;">
        <p>support-region="country"</p>
      </EBlock>
      <ERegion
        v-model="regionValue6"
        support-region="country"
        filter
        clearable
        value-with-id
        value-only-id
        placeholder="请选择地址" />
      <EBlock style="padding: 10px; flex: 1;">
        <p>{{ JSON.stringify(regionValue6) }}</p>
      </EBlock>
    </EBlock>
  </EBlock>
</template>
<script>
export default {
  data(){
    return {
      // regionValue: {district:{id:"1446",name:"迎江区"},city:{id:"3",name:"安庆"},province:{id:"2",name:"安徽"},country:{id:"1",name:"中国"}},
      // regionValue:'1',
      // regionValue:'4',
      regionValue:'97',
      // regionValue:'1423',
      // regionValue0:'4',
      // regionValue0:'97',
      regionValue0:'1423',
      // regionValue0:'97',
      regionValue1:'4',
      regionValue2:'4',
      // regionValue2:'1423',
      regionValue3:'97',
      regionValue4:'97',
      regionValue5:'99',
      regionValue6:'1',
    }
  }
}
</script>

区域层级

在默认显示国家-省-市的基础上，组件也支持国家-省-市-区（县），通过设置 support-region 属性显示不同的层级，以满足不同的使用场景。如 support-region="province city"，组件显示省-市区。

<template>
  <EBlock class="e-cascader-showcase">
    <EBlock style="margin: 0 20px; width: 400px;">
      <EBlock style="padding: 10px; flex: 1;">
        <p>support-region="country province city district"</p>
      </EBlock>
      <ERegion
        v-model="regionValue"
        support-region="country province city district"
        filter
        clearable
        placeholder="请选择地址" />
      <EBlock style="padding: 10px; flex: 1;">
        <p>{{ JSON.stringify(regionValue) }}</p>
      </EBlock>
    </EBlock>
    <EBlock style="margin: 0 20px; width: 400px;">
      <EBlock style="padding: 10px; flex: 1;">
        <p>support-region="province city"</p>
      </EBlock>
      <ERegion
        v-model="regionValue1"
        support-region="province city"
        filter
        clearable
        placeholder="请选择地址" />
      <EBlock style="padding: 10px; flex: 1;">
        <p>{{ JSON.stringify(regionValue1) }}</p>
      </EBlock>
    </EBlock>
    <EBlock style="margin: 0 20px; width: 400px;">
      <EBlock style="padding: 10px; flex: 1;">
        <p>support-region="city district"</p>
      </EBlock>
      <ERegion
        v-model="regionValue2"
        support-region="city district"
        filter
        clearable
        placeholder="请选择地址" />
      <EBlock style="padding: 10px; flex: 1;">
        <p>{{ JSON.stringify(regionValue2) }}</p>
      </EBlock>
    </EBlock>
    <EBlock style="margin: 0 20px; width: 400px;">
      <EBlock style="padding: 10px; flex: 1;">
        <p>support-region="country province"</p>
      </EBlock>
      <ERegion
        v-model="regionValue3"
        support-region="country province"
        filter
        clearable
        placeholder="请选择地址" />
      <EBlock style="padding: 10px; flex: 1;">
        <p>{{ JSON.stringify(regionValue3) }}</p>
      </EBlock>
    </EBlock>
    <EBlock style="margin: 0 20px; width: 400px;">
      <EBlock style="padding: 10px; flex: 1;">
        <p>support-region="province"</p>
      </EBlock>
      <ERegion
        v-model="regionValue4"
        support-region="province"
        filter
        clearable
        placeholder="请选择地址" />
      <EBlock style="padding: 10px; flex: 1;">
        <p>{{ JSON.stringify(regionValue4) }}</p>
      </EBlock>
    </EBlock>
    <EBlock style="margin: 0 20px; width: 400px;">
      <EBlock style="padding: 10px; flex: 1;">
        <p>support-region="city"</p>
      </EBlock>
      <ERegion
        v-model="regionValue5"
        support-region="city"
        filter
        clearable
        placeholder="请选择地址" />
      <EBlock style="padding: 10px; flex: 1;">
        <p>{{ JSON.stringify(regionValue5) }}</p>
      </EBlock>
    </EBlock>
    <EBlock style="margin: 0 20px; width: 400px;">
      <EBlock style="padding: 10px; flex: 1;">
        <p>support-region="country"</p>
      </EBlock>
      <ERegion
        v-model="regionValue6"
        support-region="country"
        filter
        clearable
        placeholder="请选择地址" />
      <EBlock style="padding: 10px; flex: 1;">
        <p>{{ JSON.stringify(regionValue6) }}</p>
      </EBlock>
    </EBlock>
  </EBlock>
</template>
<script>
export default {
  data(){
    return {
      regionValue:null,
      regionValue1:null,
      regionValue2:null,
      regionValue3:null,
      regionValue4:null,
      regionValue5:null,
      regionValue6:null,
    }
  }
}
</script>

其它

组件默认返回的选项数据结构为 {"country":"中国","province":"广东","city":"深圳"} 这样的 key-value 结构，通过设置 value-with-id="true"，返回选项数据将带有 id。

<template>
  <EBlock class="e-cascader-showcase">
    <EBlock style="margin: 0 20px; width: 400px;">
      <ERegion
        v-model="regionValue1"
        filter
        clearable
        :value-with-id="true"
        support-region="country province city district"
        placeholder="请选择地址" />
      <EBlock style="padding: 10px; flex: 1;">
        <p>{{ JSON.stringify(regionValue1) }}</p>
      </EBlock>
    </EBlock>
  </EBlock>
</template>
<script>
export default {
  data(){
    return {
      regionValue1:null,
    }
  }
}
</script>

ERegion

Props

Name	Description	Type	Required	Default
value	绑定值	Object / String	false	-
supportRegion	支持的地区显示 如country province city对应国家-省-市区, province对应省份，district 对应区和县	String	false	country province city
clearable	是否可清空	—	false	-
filter	是否支持筛选	—	false	-
placeholder	占位文本	—	false	-
disabled	禁用	—	false	-
valueWithId	默认false时 value:{country:'', province:'', city:''}； true时 value:{country:{id,name}, province:{id,name}, city:{id,name}}	Boolean	false	-
valueOnlyId	和valueWithId搭配使用，为false时，value根据valueWithId来决定 true时，value为id字符串	Boolean	false	-
filterKeys	filter筛选时支持筛选的属性字段，不设置时默认筛选全部字段	Array	false	["name"]

Events

Event Name	Description	Parameters
input	-	-

MixIns

MixIn
EValidationMixin