Vue3.0 简单商城—个人信息展示

这篇文章简单解释一些个人信息的展示，主要使用了el-menu这个组件。

一、个人信息展示组件

参考源代码如下：

<template>
 <el-container style="padding: 20px;">
    <el-aside width="200px">
      <el-menu
        default-active="1"
        class="el-menu-vertical-demo"
        @select="handleSelect">
        <el-menu-item index="1"><i class="el-icon-document"></i> 订单信息</el-menu-item>
        <el-menu-item index="2"><i class="el-icon-location"></i> 收获地址</el-menu-item>
        <el-menu-item index="3"><i class="el-icon-user"></i> 个人资料</el-menu-item>
      </el-menu>
    </el-aside>

    <el-main>
      <div v-if="activeIndex === '1'">
        <h2>订单信息</h2>
        <el-table :data="orderData">
          <el-table-column prop="orderNumber" label="订单号" />
          <el-table-column prop="date" label="日期" />
          <el-table-column prop="status" label="状态" />
        </el-table>
      </div>

      <div v-if="activeIndex === '2'">
        <h2>收货地址</h2>
        <el-input placeholder="请输入收货地址"></el-input>
        <el-button type="primary" style="margin-top: 10px;">保存</el-button>
      </div>

      <div v-if="activeIndex === '3'">
        <h2>个人资料</h2>
        <el-form :model="profile">
          <el-form-item label="姓名">
            <el-input v-model="profile.name"></el-input>
          </el-form-item>
          <el-form-item label="邮箱">
            <el-input v-model="profile.email"></el-input>
          </el-form-item>
          <el-form-item label="电话">
            <el-input v-model="profile.phone"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="saveProfile">保存</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-main>
  </el-container>

</template>

<script>


export default {
  data() {
    return {
       activeIndex: '1',
      orderData: [
        { orderNumber: '123456', date: '2023-09-01', status: '已发货' },
        { orderNumber: '123457', date: '2023-09-02', status: '待发货' },
      ],
      profile: {
        name: '',
        email: '',
        phone: '',
      }
    };
  },
  components: {
  
  },
  methods: {
     handleSelect(index) {
      this.activeIndex = index;
    },
    saveProfile() {
      // 保存个人资料的逻辑
      console.log('Profile saved:', this.profile);
    }
  },
};
</script>

<style  >
.el-menu-vertical-demo {
  min-height: 500px;
}
</style>

二、效果如下