Elementui ändert den el-table-Kopfzeilenstil und die Vorsichtsmaßnahmen zum Ändern des el-table-Tabellenrandes

Darstellungen

 

ursprüngliche Absicht

Die von Element UI offiziell verpackte El-Table-Komponente ist sehr einfach zu verwenden, aber es ist unvermeidlich, dass der Standardstil möglicherweise nicht den Anforderungen des tatsächlichen Entwicklungsprozesses entspricht. Verwenden Sie daher die fünf Mädchen selbst.

in die Grube

Eine besteht darin, auf die Header -Cell-Style- und Cell-Style-Attribute von el-table im offiziellen Dokument zu  verweisen , um sie zu ändern, wie zum Beispiel:

<el-table header-cell-style="border-color: #868686; color: #606266"></el-table>

Sie können auch die Attribute header-cell-class-name und cell-class-name verwenden, wie zum Beispiel:

<el-table cell-class-name="cell-class-name"></el-table>

Stil:

.cell-class-name {
  border-color: #868686;
}

Frage

Obwohl die Verwendung der Attribute „Header-Cell-Style“ und „Cell-Style“ den Effekt normal anzeigen kann, wird eine Ausnahme ausgelöst. Wie auch immer, ich verstehe es nicht. Außerdem kann der Überschreibungsstil für die Einstellung „Header-Cell-Class-Name“ nicht angenommen werden Wirkung, und der Zellklassenname tut dies.

该类型检查失败

Lösung

Legen Sie die El-Table-Attribute fest: cell-style="tableCellStyle" und :header-cell-style="tableHeaderCellStyle" und ändern Sie den Stil über den JS-Code.
hinzufügen:

<el-table
  :data="tableData"
  :v-loading="tableLoading"
  row-key="id"
  height="100%"
  highlight-current-row
  show-summary
  border
  fit
  style="width: 100%; border:1px solid #EBEEF5; border-color: #868686"
  :cell-style="tableCellStyle"
  :header-cell-style="tableHeaderCellStyle"
>
  <el-table-column fixed type="index" width="50"></el-table-column>
</el-table>

 Fügen Sie die Methode <script> => Methoden hinzu:

// 修改 table cell边框的背景色
tableCellStyle () {
   return 'border-color: #868686;'
 },
// 修改 table header cell的背景色
tableHeaderCellStyle () {
  return 'border-color: #868686; color: #606266;'
}

Nachdruck des Originaltextes

http://t.csdn.cn/z8Eye http://t.csdn.cn/z8Eye