el-table和分页插件修改样式以及解决表头和内容歪掉的问题,最左边有表格固定加边框线,去掉最下边的边框线

1、可以通过el-table的属性修改样式

 <el-pagination
          background
          :page-sizes="[10, 20, 30, 40,50,60,70,80,90,100]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @current-change="selectZwrmc"
          @size-change="handleSizeChange"
          :current-page.sync="currentPage"
          id="el-pagin"
          small
        />

<el-table
        :data="items"
        ref="Table"
        highlight-current-row
        @selection-change="selectItem"
        :max-height="maxHeight"
        :header-cell-style="{'text-align':'center'}"
        :row-style="rowStyle"
        id="sqTable"
      >

header-cell-style修改表头样式，可以直接写样式如:header-cell-style="{'text-align':'center'}"，可以绑定方法，返回样式；

row-style修改行样式，和上面修改表头样式一样，我这里绑定的方法是rowStyle，默认传入当前行和行的索引

  rowStyle({ row, rowIndex }) {
      return {
        height: "25px",
        padding: "0px 0px 0px 0px",
      };
    },

2、可以通过style修改样式,需要注意的是表头的下边框线要用0.5px才能显示如border-bottom: 0.5px solid #c0c4cc;我试过1px是不可以的。>>>穿透挺好用的。

有时候内容和表头会歪掉，

.el-table >>> th.gutter {
  display: table-cell !important;
}

用上面样式可以调好。

也可以把表格设成行内元素，即style="display:inline;"也可以解决歪掉问题，也可以去掉最下边的边框线
有时候表格最右侧会有.gutter的格子

.el-table >>> th.gutter {
  display: none !important;
}

可以去除表格最右侧会有.gutter的格子

有时候表格最下方有一条边框线超出了cell的范围

加下面样式可以去掉最下边的边框线

.el-table__row > td {
  border: none;
}

.el-table::before {
  height: 0px;
}

样式都是需要灵活运用的，以实现自己的业务需求。

下面用到id选择器都是我自己加的，类选择器是elementUI自带的

<style scoped >
.el-table >>> th {
  background-color: #e4e7ed;
  border-top: 1px solid #c0c4cc;
  border-right: 1px solid #c0c4cc;
  border-bottom: 0.5px solid #c0c4cc;
}
.el-table >>> td {
  border-right: 1px solid #c0c4cc;
  border-bottom: 0.5px solid #c0c4cc;
}
#sqTable >>> td {
  padding: 0px;
  font-size: 12px;
}
#sqTable >>> th {
  padding: 0px;
  height: 30px;
}
#el-pagin >>> * {
  font-size: 12px;
}
.el-table >>> th.gutter {
  display: table-cell !important;
}
#sqTable >>> thead .el-table-column--selection {
  border-left: 1px solid #c0c4cc;
}
#sqTable >>> tbody .el-table-column--selection {
  border-left: 1px solid #c0c4cc;
}
#sqTable >>> tbody td {
  border-right: 1px solid #c0c4cc;
  border-bottom: 1px solid #c0c4cc;
}
</style>

如果第一列不是选择框，可以用以下样式修改样式

.el-table >>> tbody td:nth-of-type(1) {
  border-left: 1px solid #c0c4cc;
}
.el-table >>> th:nth-of-type(1) {
  border-left: 1px solid #c0c4cc;
}

 

3、最左边有表格固定加边框线

加了fixed属性之后

可以通过header-cell-style来设置，注意边框线要大一点，比如1.5px,要不然会被隐藏掉

  <el-table
        :data="items"
        ref="Table"
        id="zqqlmxbzd"
        :max-height="maxHeight"
        @selection-change="selectItem"
        :header-cell-style="tableCellStyle"
      >

 tableCellStyle({ row, column, rowIndex, columnIndex }) {
      if (rowIndex == 0 && columnIndex == 0) {
        return {
          "border-bottom": "1.5px solid #c0c4cc",
          "text-align": "center",
        };
      } else {
        return {
          "text-align": "center",
        };
      }
    },

或者css中加样式

.el-table >>> th:nth-of-type(1) {
  border-left: 1px solid #c0c4cc;
  border-bottom: 1.5px solid #c0c4cc;
}