Design mm designed a very beautiful table, and then I died...Copy the code

I used two methods to set the style of el-table:

El – table attributes

El-table itself defines attributes such as header-cell-style, which can be used to style all table headers.

Code examples:

// template
<el-table
  class="cost-table"
  :data="costList"
  style="width: 100%"
  :header-cell-style="tableHeaderCellStyle"
>
// script
tableHeaderCellStyle ({row, column, rowIndex, columnIndex}) {
  if (columnIndex == 2) {
    return 'height: 54px; padding-right: 65px; text-align: right'
  } else {
    return 'height: 54px; padding-left: 24px; '}}Copy the code
NOTE: This method may encounter style conflicts with the style of the EL-table itself, and the Settings will not take effect.Copy the code

Style through

When implementing properties such as header font-family, it was found that the style Settings did not take effect. Google found that scope was the problem, but could not remove scope (removing scope would pollute the global style). Then I found this great thing: style penetration. The syntax is to add >>> or /deep/ or ::v-deep to the front of the penetrating selector.

NOTE: Stylus has no problem in measurement, SCSS does not work, need /deep/Copy the code

Here’s an example of styling the font for the header of an EL-table

// style .cost-table /deep/ .is-leaf{ /deep/ .cell{ height:20px; font-size:14px; font-family:PingFangSC-Medium,PingFang SC; font-weight:500; Color: rgba (33,33,33,1); line-height:20px; }}Copy the code