Render an el-input, in el-table render-header how to adjust the style a little bit.

use render-header in el-table-column to render an el-input, in the header as follows:

el-input

=:header-cell-style="{margin:0,padding:0}"render-headermargin:0,padding:0el-input


Jul.03,2021

set the properties of Table-column class-name to customize the style. You can refer to the following pseudo code

<el-table-column class-name="ts" :render-header="renderHeader"></el-table-column>
...

renderHeader(h, { column, $index }) {
  return (
    <el-input></el-input>
  )
}
...

<style lang="scss">
.el-table th.ts > .cell {
  padding: 0;
  .el-input {
    padding: 0;
  }
}
</style>

.el-table__header th.ts .cell,
.el-table__header th.ts div {

    line-height: 0px;
    padding:0
}

can solve this problem


Hello, how to render an el-select control in header


render-header rendering el-input, how to achieve bidirectional data binding

Menu