Appearance
Cascader 地址
js
//导入
import comAddress from '@/components/comAddress/comAddress.vue'
// 省市区
<com-address v-model="address" :type="1"></com-address>
// 省市
<com-address v-model="address" :type="2"></com-address>
// 省市区全部
<com-address v-model="address" :type="3"></com-address>
// 省市全部
<com-address v-model="address" :type="4"></com-address>
//定义obj,注意要用ref
const address = ref({
province: '河北省', city: '唐山市', area: '古冶区'
})props
type 默认为2
| 值 | 说明 | 类型 |
|---|---|---|
| 1 | 省市区 | number |
| 2 | 省市 | number |
| 3 | 省市区全部 | number |
| 4 | 省市全部 | number |
v-model带出属性列表
| 属性 | 说明 | 类型 |
|---|---|---|
| province | 省 | string |
| provinceCode | 省编码 | string |
| city | 市 | string |
| cityCode | 市编码 | string |
| area | 区 | string |
| areaCode | 区编码 | string |
多选地址
js
//省市区全部多选
<multipleAddress v-model="address"></multipleAddress>
//省市区多选
<multipleAddress v-model="address" :need-all="false"></multipleAddress>
// 省市全部多选
<multipleAddress v-model="address" :type="2"></multipleAddress>
// 省市多选
<multipleAddress v-model="address" :type="2" :need-all="false"></multipleAddress>
// 省市区全部单选
<multipleAddress v-model="address" :multiple="false"></multipleAddress>
// 省市区单选
<multipleAddress v-model="address" :multiple="false" :need-all="false"></multipleAddress>
// 省市全部单选
<multipleAddress v-model="address" :multiple="false" :type="2"></multipleAddress>
// 省市单选
<multipleAddress v-model="address" :multiple="false" :type="2" :need-all="false"></multipleAddress>props
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| type | 1省市区 2省市 | number | 1 |
| multiple | 是否多选 | boolean | true |
| needAll | 是否全部 | boolean | true |
config省市区 查询支持三个下拉框
js
// 无全部,带出的值是省市区的名称
import useAddressConfig from '@/hooks/useAddressConfig'
const columns = [
...useAddressConfig('province','city','district'),
]
// 无全部,带出的值是省市区的编码
import useAddressConfig from '@/hooks/useAddressConfig'
const columns = [
...useAddressConfig('province','city','district', 'label', 'code'),
]| 参数 | 说明 | 类型 |
|---|---|---|
| province | v-model绑定字段名 | string |
| city | v-model绑定字段名 | string |
| district | v-model绑定字段名 | string |
| label | 下拉框展示的字段名称, 默认label | string |
| value | 下拉框获取值的字段名称, 默认value | string |