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;
}