yoe-scm-web/src/views/customer/info/components/AddressTab.vue

<template>
  <div class="tab-content">
    <div class="info-section">
      <div class="section-title-row">
        <div class="section-title-left">
          <span class="section-title-text">地址信息列表</span>
        </div>
        <el-button v-if="!isViewMode" icon="Plus" type="primary" @click="emit('add')">添加地址</el-button>
      </div>
      <el-table :data="addressList" border style="width: 100%">
        <!-- <el-table-column prop="supplierNo" label="供应商编号" align="center" /> -->
        <el-table-column prop="addressNo" label="地址编号" align="center" />
        <el-table-column prop="shipperName" label="姓名" align="center" />
        <el-table-column prop="shipperPhone" label="手机号码" align="center" />
        <!-- <el-table-column prop="shippingProvincial" label="省份" align="center" />
        <el-table-column prop="shippingCity" label="市" align="center" />
        <el-table-column prop="shippingCounty" label="区县" align="center" /> -->
        <el-table-column label="详细地址" align="center">
          <template #default="scope">
            <span>{{ scope.row.shippingAddress || '-' }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="shippingPostCode" label="邮政编码" align="center" />
        <el-table-column prop="isSelf" label="默认地址" align="center">
          <template #default="scope">
            <el-switch v-model="scope.row.isSelf" active-value="0" inactive-value="1" @change="emit('change-deafult', scope.row)"></el-switch>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="150">
          <template #default="scope">
            <el-button v-if="!isViewMode" link type="primary" @click="emit('edit', scope.row)">编辑</el-button>
            <el-button v-if="!isViewMode" link type="danger" @click="emit('delete', scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script setup lang="ts">
defineProps<{
  addressList: any[];
  isViewMode: boolean;
}>();

const emit = defineEmits<{
  (e: 'add'): void;
  (e: 'edit', row: any): void;
  (e: 'delete', row: any): void;
  (e: 'change-deafult', row: any): void;
}>();
</script>