有這樣一個需求 element +vue 實現顯示的table 的表頭添加一個添加圖標， 並綁定一個點擊事件，我查了好多資料， 終於找到table 表頭的一個事件 :render-header 可以實現。

  有這樣一個需求   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 后面的是綁定一個點擊事件。注意返回的h()，第三個參數是個數組，就好似一個div里面有多個標簽；

      藍色的意思是每一行 有一個刪除圖片的按鈕， 點擊 刪除