有这样一个需求 element +vue 实现显示的table 的表头添加一个添加图标， 并绑定一个点击事件，我查了好多资料， 终于找到table 表头的一个事件 :render-header 可以实现。

  有这样一个需求   element +vue 实现显示的table 的表头添加一个添加图标， 并绑定一个点击事件，我查了好多资料， 终于找到table 表头的一个事件  :render-header 可以实现。

 

 

代码html 

 

?

1 2 3 4 5 6 7

<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:

?

1

methods: {renderHeader(h, { column, $index }){<br>    return h('div', null,[<br>        h('span',null,[<br>            h('i',{class :'el-icon-circle-plus-outline', on:{<br>                    click: function () {<br>                        vm.addRow();<br>                    }<br>                }},''<br>            )<br>        ]),<br><br>    ])<br>}}

　　js的意思 就是 添加 一个div 里面有个span  ， span里面加一个<i class="el-icon-circle-plus-outline"></i>图片的class，on 后面的是绑定一个点击事件。注意返回的h()，第三个参数是个数组，就好似一个div里面有多个标签；

      蓝色的意思是每一行 有一个删除图片的按钮， 点击 删除