AddressList 地址列表

引入

  1. import { AddressList } from 'vant';
  2. Vue.use(AddressList);

代码演示

基础用法

  1. <van-address-list
  2. v-model="chosenAddressId"
  3. :list="list"
  4. :disabled-list="disabledList"
  5. disabled-text="以下地址超出配送范围"
  6. @add="onAdd"
  7. @edit="onEdit"
  8. />
  1. export default {
  2. data() {
  3. return {
  4. chosenAddressId: '1',
  5. list: [
  6. {
  7. id: '1',
  8. name: '张三',
  9. tel: '13000000000',
  10. address: '浙江省杭州市西湖区文三路 138 号东方通信大厦 7 楼 501 室'
  11. },
  12. {
  13. id: '2',
  14. name: '李四',
  15. tel: '1310000000',
  16. address: '浙江省杭州市拱墅区莫干山路 50 号'
  17. }
  18. ],
  19. disabledList: [
  20. {
  21. id: '3',
  22. name: '王五',
  23. tel: '1320000000',
  24. address: '浙江省杭州市滨江区江南大道 15 号'
  25. }
  26. ]
  27. }
  28. },
  29. methods: {
  30. onAdd() {
  31. Toast('新增地址');
  32. },
  33. onEdit(item, index) {
  34. Toast('编辑地址:' + index);
  35. }
  36. }
  37. }

API

Props

参数说明类型默认值版本
v-model当前选中地址的 idString--
list地址列表Array[]-
add-button-text底部按钮文字String新增地址-
disabled-list不可配送地址列表Array[]1.3.0
disabled-text不可配送提示文案String-1.3.0
switchable是否允许切换地址Booleantrue1.3.8

Events

事件名说明回调参数版本
add点击新增按钮时触发--
edit点击编辑按钮时触发item: 地址对象,index: 索引-
select切换选中的地址时触发item: 地址对象,index: 索引-
edit-disabled编辑不可配送的地址时触发item: 地址对象,index: 索引1.3.0
select-disabled选中不可配送的地址时触发item: 地址对象,index: 索引1.3.0

地址列表字段说明

key说明类型
id每条地址的唯一标识String | Number
name收货人姓名String
tel收货人手机号String | Number
address收货地址String

Slots

名称说明
default在列表下方插入内容
top在顶部插入内容

AddressList 地址列表 - 图1