element中header-cell-class-name、header-cell-style、cell-class-name怎么设置

image.png

其实手册上说的也比较明白,但是可能在使用上不知道怎么下手。

我们直接上代码:

<el-table :cell-class-name="lastTd" :header-cell-class-name="handlemyclass"  :data="list"  border>
    <el-table-column></el-table-column>
    <el-table-column></el-table-column>
    <el-table-column></el-table-column>
    <el-table-column></el-table-column>
</el-table>

如上面的代码,直接在methods里定义上面的两个方法:lastTd和handlemyclass,注意他们都有四个参数,其它我们只用到了columnIndex,他在cell-class-name里代码是每个<tr>中是第几列,而在header-cell-class-name是代码在表头<th>中是第几列,然后直接返回你要定义成的class,并在<style></style>中定义这个class类样式就可以了。

methods: {
    lastTd({row, column, rowIndex, columnIndex}){
      //console.log(columnIndex) 
      if(columnIndex===11){   //这里的11是我表格<tr>中的第11列,这样我就给我表格中所有第11列加上了样式,注意从0开始数
        return "lastTd"
      }
    },
    handlemyclass({row,column,rowIndex,columnIndex}){
      if(columnIndex===4 || columnIndex===5){   //这里是我表格表头中的第4或5列,这样就给我的表格表头的第4和5列加上了columnCss的样式类。
        return 'columnCss'
      }
    }
}


样式中:

.lastTd .cell{white-space: normal;margin: 15px auto;}
.lastTd .cell button{margin: 5px}
.el-table >>> .columnCss .cell{white-space: pre-wrap!important;}


关键词:
上一篇 下一篇


读后有收获可以支付宝请作者喝枸杞,有疑问也可以加作者讨论:





友情链接
@寅春树 豫ICP备20020705号 Powered by Thinkcmfx