其实手册上说的也比较明白,但是可能在使用上不知道怎么下手。
我们直接上代码:
<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;}