需求是表头加个图标,保留排序功能
questionIcon(h, { column, $index }) { console.log(h); console.log(column); console.log($index); return h("span", [ h("span", { class: "questionIcon", on: { click: () => { console.log(`${column.label} ${$index}`); } } }), h("span", column.label) ]); }
<el-table-column label="引流类型" width="90" :render-header="questionIcon" sortable="custom"> <template slot-scope="scope"> <span class="baiduMobile-icon">{{ scope.row.t3 }}</span> </template> </el-table-column>
说明:
sortable="custom" 表示后端排序
:render-header="questionIcon" 表示自定义表头的样式,不影响现有的排序功能
效果如下:
由于需求的需要,经过改造实现自定义参数:
questionIcon(h, { column, $index }, text) { console.log(text); console.log(h); console.log(column); console.log($index); return h("span", [ h("span", { class: "questionIcon", on: { click: () => { console.log(`${column.label} ${$index}`); } } }), h("span", column.label) ]); }
<el-table-column label="引流类型" width="90" :render-header="(h,obj) => questionIcon(h,obj,'test')" sortable="custom"> <template slot-scope="scope"> <span class="baiduMobile-icon">{{ scope.row.t3 }}</span> </template> </el-table-column>