用elementUI的descriptions描述列表 合并单元格 实现个人简历效果

element-ui的2.15.14版本出了个Descriptions 描述列表 可以用来展示数据项详情 分为带边框和不带边框

<el-descriptions title="用户信息">
    <el-descriptions-item label="用户名">kooriookami</el-descriptions-item>
    <el-descriptions-item label="手机号">18100000000</el-descriptions-item>
    <el-descriptions-item label="居住地">苏州市</el-descriptions-item>
    <el-descriptions-item label="备注">
      <el-tag size="small">学校</el-tag>
    </el-descriptions-item>
    <el-descriptions-item label="联系地址">江苏省苏州市吴中区吴中大道 1188 号</el-descriptions-item>
</el-descriptions>

<el-descriptions class="margin-top" title="带边框列表" :column="3" :size="size" border>
    <template slot="extra">
      <el-button type="primary" size="small">操作</el-button>
    </template>
    <el-descriptions-item>
      <template slot="label">
        <i class="el-icon-user"></i>
        用户名
      </template>
      kooriookami
    </el-descriptions-item>
    <el-descriptions-item>
      <template slot="label">
        <i class="el-icon-mobile-phone"></i>
        手机号
      </template>
      18100000000
    </el-descriptions-item>
    <el-descriptions-item>
      <template slot="label">
        <i class="el-icon-location-outline"></i>
        居住地
      </template>
      苏州市
    </el-descriptions-item>
    <el-descriptions-item>
      <template slot="label">
        <i class="el-icon-tickets"></i>
        备注
      </template>
      <el-tag size="small">学校</el-tag>
    </el-descriptions-item>
    <el-descriptions-item>
      <template slot="label">
        <i class="el-icon-office-building"></i>
        联系地址
      </template>
      江苏省苏州市吴中区吴中大道 1188 号
    </el-descriptions-item>
  </el-descriptions>

上图是官网案例 如需详细属性介绍可去官网查看

其中column属性是指 一行 Descriptions Item 的数量 默认是3个 如果超出会被挤到下一行

:column="3"

descriptions合并单元格效果 可以实现类似word简历的效果 主要改的是css样式

<div class="resume-detail">
      <el-card>
        <div class="resume-title">
          <h3>个人简历</h3>
        </div>
        <div>
          <el-descriptions :column="3" border class="resume-label-width">
            <template slot="extra">
              <span>2024年8月8日</span>
            </template>

            <el-descriptions-item label="姓名" :span="1">monkey7</el-descriptions-item>
            <el-descriptions-item label="性别" :span="1">女</el-descriptions-item>
            <el-descriptions-item label="年龄" :span="1">18</el-descriptions-item>

            <el-descriptions-item label="民族" :span="1">汉</el-descriptions-item>
            <el-descriptions-item label="电话" :span="1">13288888888</el-descriptions-item>
            <el-descriptions-item label="专业" :span="1">计算机软件</el-descriptions-item>
          </el-descriptions>

          <el-descriptions :column="3" border class="resume-label-width">
            <el-descriptions-item label="职称" :span="1.5">前端工程师</el-descriptions-item>
            <el-descriptions-item label="从业年限" :span="1.5">7</el-descriptions-item>
          </el-descriptions>

          <el-descriptions :column="3" border class="resume-label-width">
            <el-descriptions-item label="电子邮箱" :span="1.5">13288888888@163.com</el-descriptions-item>
            <el-descriptions-item label="居住地址" :span="1.5">阳光路62号</el-descriptions-item>
          </el-descriptions>

          <el-descriptions :column="3" border class="resume-label-width">
            <el-descriptions-item label="专业技能">擅长word、excel、ppt、wind等软件的安装与卸载，精通photoshop和illustrator等单词的拼写，熟悉Windows、Linux、Mac、Android、IOS、等系统的开关机。</el-descriptions-item>
          </el-descriptions>
        </div>
      </el-card>
    </div>

<style lang="scss" scoped>
  .resume-detail {
    width: 1000px;
    margin: 10px auto 30px;
  }

  .resume-detail .resume-title h3 {
    font-size: 25px;
    text-align: center;
    margin-top: 20px;
  }

  .resume-detail /deep/ .el-descriptions__body .el-descriptions__table {
    width: 960px;
  }

  .resume-label-width /deep/ .el-descriptions--medium.is-bordered .el-descriptions-item__cell {
    width: 159px;
  }

  .resume-label-width /deep/.el-descriptions-item__label.is-bordered-label {
    color: #606266;
  }

  .resume-detail /deep/ .el-descriptions {
    margin-top: -1px;
  }

  .resume-detail /deep/ .el-divider--horizontal {
    height: 2px;
    margin: 5px 0;
    background-color: #aaacaf;
  }

</style>