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 |