有这样一个需求 element +vue 实现显示的table 的表头添加一个添加图标, 并绑定一个点击事件,我查了好多资料, 终于找到table 表头的一个事件 :render-header 可以实现。
代码html
<el-table-column fixed="left" width="65px" :render-header="renderHeader"> <template slot-scope="scope"> <el-button @click.native.prevent="deleteRow(scope.$index, formDetail.taxEntityList)" size="small"><i class="el-icon-remove-outline"></i></el-button> </template> </el-table-column> </el-table>
js:
methods: { renderHeader(h, { column, $index }){ return h(‘div‘, null,[ h(‘span‘,null,‘‘), h(‘i‘,{class :‘el-icon-circle-plus-outline‘, on:{ click: function () { //vm.addRow(); } }},‘‘ ) ]) } }
js的意思 就是 添加 一个div 里面有个span , span里面加一个<i class="el-icon-circle-plus-outline"></i>图片的class,on 后面的是绑定一个点击事件。
蓝色的意思是每一行 有一个删除图片的按钮, 点击 删除
原文:https://www.cnblogs.com/laosunlaiye/p/10718546.html