<template>
  <van-address-list
    v-model="chosenAddressId"
    :list="addressList"
    @edit="onEdit"
    @select="onSelect"
    @delete="onDelete"
  />
</template>

<script>
import { AddressList } from 'vant';

export default {
  components: {
    [AddressList.name]: AddressList,
  },
  data() {
    return {
      chosenAddressId: '', // 当前选中的地址 ID
      addressList: [
        {
          id: '1',
          name: '张三',
          tel: '13800138000',
          address: '广东省 深圳市 南山区 南山大道 1 号',
        },
        // 可以有多个地址对象
      ],
    };
  },
  methods: {
    onEdit(address) {
      // 处理编辑地址的逻辑
      console.log('编辑地址:', address);
    },
    onSelect(address) {
      // 处理选中地址的逻辑
      console.log('选中地址:', address);
    },
    onDelete(address) {
      // 处理删除地址的逻辑
      console.log('删除地址:', address);
    },
  },
};
</script>