鍍金池/ 問(wèn)答/HTML/ el-table render-header中渲染出一個(gè)el-input，如何把

el-table render-header中渲染出一個(gè)el-input，如何把樣式調(diào)好看一點(diǎn)

在el-table-column中使用 render-header在表頭中渲染出一個(gè)el-input，如下：
圖片描述

請(qǐng)問(wèn)怎么把el-input左右兩邊還有下方的空白區(qū)域縮?。?/p>

已經(jīng)設(shè)置了=:header-cell-style="{margin:0,padding:0}"，render-header中也設(shè)置了margin:0,padding:0，但是el-input周圍的空白消除不了。

另外我希望將表頭做成如下效果，是否還有別的方法？
圖片描述

回答
編輯回答
久礙你

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

    line-height: 0px;
    padding:0
}

可解決此問(wèn)題

圖片描述

2017年8月17日 05:54
編輯回答
青黛色

設(shè)置Table-column的屬性class-name，自定義樣式?？梢詤⒖枷旅娴膫未a

<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>
2018年4月21日 02:36