在项目中,有时候我们的项目要根据设计图来修改我们的表格的头部,一下就是element提供的两种修改头部的方法:
1. Table-column Attributes render-header 方法
<el-table-column prop="delete" label="删除" :render-header="renderHeader" width="120" > <template slot-scope="scope"> <el-button @click="handleDelete(scope.row)" > 删除 </el-button> </template> </el-table-column>
methods:
// 修改表格的头信息
renderHeader(h, { column }) {
// 重新渲染表头
if (column.property == 'delete') {
return h('i', {
class:
this.clickDeleteTime == 1
? 'el-icon-delete c-red'
: 'el-icon-delete',
style: 'font-size:24px',
on: {//这个是你的点击方法
click: () => {
this.clearAll()
}
}
})
}
},
这个是第一种方法:现在你就可以看到你的头部就是你想要的效果了,不过你会发现的console报了一个警告。
对于我这种对代码有洁癖的人,很不喜欢这种,开个小玩笑,那就解决掉这个警告不就行了,仔细看了下element文档,有个新的方法,这就是第二个实现方法。
2.
Table-column Scoped Slot
<el-table-column prop="delete" label="删除" width="120" > <template slot="header" slot-scope="{ column, $index }" > <i class="el-icon-delete" @click="clearAll" > </i> </template> <template slot-scope="scope"> <el-button type="" @click="handleDelete(scope.row)" > 删除 </el-button> </template> </el-table-column>
第二种方法完美解决,是不是很简单,那就开是行动吧!