element表格样式优化

1、表格的两种形式

2、根据官方文档写自己的表格

<div>
      <el-card>
        <div class="title">1.基本数据展示</div>
        <el-table v-loading="loading" :data="basicData" header-cell-class-name="basic_header" :header-cell-style="{ background:'#59A7D4', color: 'black', fontWeight: 'normal' }">
          <el-table-column prop="month" align="center" label="月份" />
          <el-table-column prop="total_releases" align="center" label="总发布数" />
          <el-table-column align="center" label="紧急版本">
            <el-table-column prop="total" align="center" label="发布总数" width="200" />
            <el-table-column prop="urgent_needs" align="center" label="紧急需求" width="200" />
            <el-table-column prop="defect" align="center" label="缺陷" width="200" />
          </el-table-column>
          <el-table-column prop="second_release" align="center" label="二次发布" />
          <el-table-column prop="count" align="center" label="自助发版次数" />
        </el-table>
      </el-card>
      <el-card style="margin-top: 10px;">
        <div class="title">2.自动化接入程度</div>
        <el-table v-loading="loading" :data="automationData" :header-cell-style="{ background:'#59A7D4', color: 'black', fontWeight: 'normal' }">
          <el-table-column prop="month" align="center" label="月份" />
          <el-table-column prop="total_releases" align="center" label="总发布单元数" />
          <el-table-column prop="standard_container" align="center" label="标准容器接入数" />
          <el-table-column prop="standard_virtual" align="center" label="标准虚机接入数" />
          <el-table-column prop="database" align="center" label="数据库接入数" />
          <el-table-column prop="service_publishing" align="center" label="自助发版接入数" />
        </el-table>
      </el-card>
      <el-card style="margin-top: 10px;">
        <div class="title">3. 12月版本质量指标</div>
        <el-table v-loading="loading" :data="quotaData" :header-cell-style="{ background:'#59A7D4', color: 'black', fontWeight: 'normal' }">
          <el-table-column align="center" label="二次发布top5">
            <el-table-column prop="second_num" align="center" label="序号" />
            <el-table-column prop="second_sub" align="center" label="子系统名" />
            <el-table-column prop="second_count" align="center" label="次数" />
            <el-table-column prop="second_department" align="center" label="所属部门" />
          </el-table-column>
          <el-table-column align="center" label="发布频率top5">
            <el-table-column prop="frequency_num" align="center" label="序号" />
            <el-table-column prop="frequency_sub" align="center" label="子系统名" />
            <el-table-column prop="frequency_count" align="center" label="次数" />
            <el-table-column prop="frequency_department" align="center" label="所属部门" />
          </el-table-column>
        </el-table>
      </el-card>
    </div>

// 数据
private basicData: any = [
    { month: '12', total_releases: '1000', total: '200(20%)', urgent_needs: '80(8%)', defect: '120(12%)', second_release: '130(13%)', count: '287(16%)' },
    { month: '12', total_releases: '1000', total: '200(20%)', urgent_needs: '80(8%)', defect: '120(12%)', second_release: '130(13%)', count: '287(16%)' },
    { month: '12', total_releases: '1000', total: '200(20%)', urgent_needs: '80(8%)', defect: '120(12%)', second_release: '130(13%)', count: '287(16%)' }
  ];
  private automationData: any = [
    { month: '12', total_releases: '1500', standard_container: '350', standard_virtual: '208', database: '199', service_publishing: '199' },
    { month: '12', total_releases: '1500', standard_container: '350', standard_virtual: '208', database: '199', service_publishing: '199' },
    { month: '12', total_releases: '1500', standard_container: '350', standard_virtual: '208', database: '199', service_publishing: '199' }
  ];
  private quotaData: any = [
    { second_num: '1', second_sub: 'AAAA', second_count: '4', second_department: 'AAAA', frequency_num: '1', frequency_sub: 'AAAA', frequency_count: '6', frequency_department: 'AAAA' },
    { second_num: '2', second_sub: 'AAAA', second_count: '2', second_department: 'AAAA', frequency_num: '2', frequency_sub: '', frequency_count: '', frequency_department: '' },
    { second_num: '3', second_sub: '', second_count: '', second_department: '', frequency_num: '3', frequency_sub: '', frequency_count: '', frequency_department: '' },
    { second_num: '4', second_sub: '', second_count: '', second_department: '', frequency_num: '4', frequency_sub: '', frequency_count: '', frequency_department: '' },
    { second_num: '5', second_sub: '', second_count: '', second_department: '', frequency_num: '5', frequency_sub: '', frequency_count: '', frequency_department: '' }
  ]

3、样式优化（重点）

.title {
  border: 1px solid black;
  height: 40px;
  line-height: 40px;
  text-align: center;
  border-bottom: 0;
  font-size: 14px;
  background: #E2EFDA;
}
/deep/ .el-table {
  font-size: 14px!important;
  border: 1px solid black!important;
}
/deep/  .el-table td {
  border-bottom: 1px solid black!important;
}
/deep/ .el-table--border th {
  border-right: 1px solid black!important;
  border-bottom: 1px solid black!important;
}
/deep/ .el-table--border td {
  border-right: 1px solid black!important;
}
/deep/ .el-table th.is-leaf {
  border-right: 1px solid black!important;
  border-bottom: 1px solid black!important;
}
/deep/ .el-table__row td {
  border-right: 1px solid black!important;
}
/deep/ .el-table__row td:nth-last-child(1) {
  border-right: 0!important;
}
.el-table--border::after, .el-table--group::after {
  width: 0;
}
/deep/ .el-table__header {
  border-collapse: collapse!important;
}
/deep/ .el-table__body, .el-table__footer, .el-table__header {
  border-collapse: collapse!important;
}

4、效果