当前位置：首页 > 前端教程

elementui简历

2026-03-06 00:50:42前端教程

ElementUI 简历模板设计

ElementUI 是一套基于 Vue.js 的桌面端组件库，适合用来构建现代化的简历页面。以下是使用 ElementUI 设计简历的方法和关键组件示例。

布局结构

使用 el-container 作为整体容器，搭配 el-header、el-aside 和 el-main 划分区域。左侧边栏可放置个人信息和技能，主区域展示工作经历和教育背景。

<el-container>
  <el-aside width="300px">
    <!-- 个人信息和技能 -->
  </el-aside>
  <el-main>
    <!-- 工作经历和教育背景 -->
  </el-main>
</el-container>

个人信息模块

利用 el-card 和 el-row/el-col 布局个人信息，结合 el-avatar 显示头像：

<el-card>
  <el-avatar :size="100" :src="avatarUrl"></el-avatar>
  <h3>{{ name }}</h3>
  <el-divider></el-divider>
  <el-row>
    <el-col :span="8">电话：{{ phone }}</el-col>
    <el-col :span="16">邮箱：{{ email }}</el-col>
  </el-row>
</el-card>

技能展示

使用 el-progress 组件可视化技能水平：

<el-card>
  <h4>技术技能</h4>
  <div v-for="skill in skills" :key="skill.name">
    <span>{{ skill.name }}</span>
    <el-progress :percentage="skill.level"></el-progress>
  </div>
</el-card>

时间线展示经历

通过 el-timeline 展示工作或教育经历：

<el-timeline>
  <el-timeline-item 
    v-for="exp in experiences"
    :key="exp.date"
    :timestamp="exp.date"
    placement="top">
    <el-card>
      <h4>{{ exp.title }}</h4>
      <p>{{ exp.description }}</p>
    </el-card>
  </el-timeline-item>
</el-timeline>

主题定制

通过修改 SCSS 变量定制简历主题色：

/* 覆盖 ElementUI 主题变量 */
$--color-primary: #42b983;
@import "~element-ui/packages/theme-chalk/src/index";

响应式适配

使用 el-col 的响应式属性确保移动端兼容：

<el-row :gutter="20">
  <el-col :xs="24" :sm="8" :md="6">
    <!-- 左侧边栏内容 -->
  </el-col>
  <el-col :xs="24" :sm="16" :md="18">
    <!-- 主内容区 -->
  </el-col>
</el-row>

数据绑定

将简历数据与 Vue 实例绑定实现动态渲染：

export default {
  data() {
    return {
      name: '张三',
      skills: [
        { name: 'Vue.js', level: 90 },
        { name: 'ElementUI', level: 85 }
      ],
      experiences: [
        {
          date: '2020-2022',
          title: '前端开发工程师',
          description: '负责公司后台管理系统开发'
        }
      ]
    }
  }
}