Skip to content
On this page

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带出属性列表

属性说明类型
provincestring
provinceCode省编码string
citystring
cityCode市编码string
areastring
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

属性说明类型默认值
type1省市区 2省市number1
multiple是否多选booleantrue
needAll是否全部booleantrue

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'),
]
参数说明类型
provincev-model绑定字段名string
cityv-model绑定字段名string
districtv-model绑定字段名string
label下拉框展示的字段名称, 默认labelstring
value下拉框获取值的字段名称, 默认valuestring

Released under the MIT License.