1. Set el-table in the style TAB of the entire container

< p style = "max-width: 100%; clear: both; min-height: 1em;Copy the code

2. Modify the style of the el-Table header

<el-table :header-cell-style = "function name "></el-table>Copy the code

The header-cell-style bound function returns the header style

Functions are defined in the following format in methods:

HeaderStyle ({row, column, rowIndex, columnIndex}){if(rowIndex == 0){return 'headerStyle'}}Copy the code

3. Wrap the first text of the el-table

Method 1: THE CSS method

<el-table-column :label="' text 1\n text 2'"></el-table-column> => Double and single quotes. El-table th>. Cell {white-space: pre-line; // Merge whitespace normal newline white-space: pre-wrap; // Keep whitespace normal newline}Copy the code

Method 2: El-table-column built-in render function render-header

<el-table-column :render header =" function name" label=" name name"></el-table-column> render header (h,{column, $index}){let header = column.label.split(' '); / / to the special characters could be divided into one part of the need to wrap the label return [h (' p ', {}, [h (' p ', {}, the header [0]), h (' p ', {}, the header [1])])]}Copy the code

4. Modify the row and column styles of the EL-Table

Background color modification: /deep/. El-table and /deep/. El-table__row need to be changed. Both of them have the default backcolor padding By default, the left and right padding is 10px /deep/.el-table. cell to display the td of the content area If the div. Cell in the header is the same as the div. Cell in the display area, you can use the second form to set the border /deep/. El-table TD El-table th. Is-leaf The default table header has a border-bottom but can be changed to /deep/ in header-cell style /deep/. El-table --enable-row-hover. El-table__body-wrapper The entire content area default to the border-bottom hover style modification /deep/. El-table --enable-row-hover tr:hover>td{ background-color: transparent ! important; }Copy the code

Original link: blog.csdn.net/qq_44747461…