element-ui table表格border显示问题

时间:2024-04-01 13:27:16
  1. 这是部分参数,其余可参考element-ui官方文档
    element-ui table表格border显示问题
    2产品要求
    element-ui table表格border显示问题
    3只复制官方文档代码
<el-table
  :data="dataList"
  align="center"
  stripe>
  <el-table-column
    align="center"
    prop="duty">
  </el-table-column>
  <el-table-column
    align="center"
    prop="guard">
  </el-table-column>
  </el-table>

data里数据:

dataList: [
  {
    duty: '责任',
    guard: '预防',
    accident: '意外',
    base: '基础',
    import: '重大'
  },
  {
    duty: '赔付金额',
    guard: '3000',
    accident: '1000',
    base: '2000',
    import: '4000'
  }]

效果就是
element-ui table表格border显示问题
注:会发现多了一行表头,另外俩行不居中,这时可以用show-header的布尔值来控制,设置为false后就下下面的效果(没改边框问题),fit参数控制列宽是否自撑开,我设为了false
4 默认纵向边框border是false,于是我没加border,结果就是
element-ui table表格border显示问题
5此时就需要f12调试来改样式了,需注意的是element-ui写右下border的时候用了伪类,不要在当前组件的scoped下改样式,会不起作用,在全局样式或公共样式表中改(为了不影响其他组件,可以在加一级base)就可以达到产品要求

.el-table--border td{
   border-right: none;
   }
 .el-table::before{
  height:0;
}
 .base .el-table__body{
  border-top: 1px solid #CCCCCC;
}