element-ui自定義table表頭，修改標題樣式、添加tooltip及 :render-header使用簡介

修改列標題樣式
1.在列標題后面加一個圖標。

以element-ui官方文檔一個table表格為例，我們在地址的后面加一個定位標志的圖標，代碼如下：

<template>
　　<el-table
　　　　:data="tableData2"
　　　　style="width: 100%"
　　　　:row-class-name="tableRowClassName">
　　　　<el-table-column
　　　　　　prop="date"
　　　　　　label="日期"
　　　　　　width="180">
　　　　</el-table-column>
　　　　<el-table-column
　　　　　　prop="name"
　　　　　　label="姓名"
　　　　　　width="180">
　　　　</el-table-column>
　　　　<el-table-column
　　　　　　prop="address"
　　　　　　label="地址" 
　　　　　　:render-header="renderHeader"> // 加入render事件
　　　　</el-table-column>
　　</el-table>
</template>
<script>
export default {
　　methods: {
　　　　// render 事件
　　　　renderHeader (h,{column}) { // h即為cerateElement的簡寫，具體可看vue官方文檔
　　　　　　return h(
　　　　　　　　'div',[ 
　　　　　　　　　　h('span', column.label),
　　　　　　　　　　h('i', {
　　　　　　　　　　　　class:'el-icon-location',
　　　　　　　　　　　　style:'color:#409eff;margin-left:5px;'
　　　　　　　　　　})
　　　　　　　　],
　　　　　　);
　　　　}
　　},
　　data() {
　　　　return {
　　　　　　tableData2: [{
　　　　　　　　date: '2016-05-02',
　　　　　　　　name: '王小虎',
　　　　　　　　address: '上海市普陀區金沙江路 1518 弄',
　　　　　　}, {
　　　　　　　　date: '2016-05-04',
　　　　　　　　name: '王小虎',
　　　　　　　　address: '上海市普陀區金沙江路 1518 弄'
　　　　　　}, {
　　　　　　　　date: '2016-05-01',
　　　　　　　　name: '王小虎',
　　　　　　　　address: '上海市普陀區金沙江路 1518 弄',
　　　　　　}, {
　　　　　　　　date: '2016-05-03',
　　　　　　　　name: '王小虎',
　　　　　　　　address: '上海市普陀區金沙江路 1518 弄'
　　　　　　}]
　　　　}
　　}
}
</script>

 

效果如下：

2.在列標題后面添加一個單選框

還是以上面的代碼為例，只寫關鍵代碼：

// render 事件
renderHeader (h,{column}) { // h即為cerateElement的簡寫，具體可看vue官方文檔
    return h(
　　　　'div',[ 
　　　　　　h('span', column.label),
　　　　　　h('el-checkbox',{
　　　　　　　　style:'margin-left:5px',
　　　　　　　　on:{
　　　　　　　　　　change:this.select // 選中事件 
　　　　　　　　}
　　　　　　})
　　　　],
　　);
},
// 添加選中事件
select (data) {
　　console.log(data);
}    

效果如下：

3.在表頭添加一個Tooltip

現在有一個需求，要在列表表題后面添加一個提示，我們開始嘗試着做，還是以上面的代碼為例，剛開始我想直接用‘el-tooltip’，應該不是很難，然后就是這樣：

renderHeader (h,{column}) {
    return h(
        'div', [ 
             h('span', column.label),
             h('el-tooltip',[
                 h('i', {
                     class:'el-icon-question',
                     style:'color:#409eff;margin-left:5px;'
                 })
             ],{
                 content: '這是一個提示'
            })
        ]
    );
}          

 

運行后發現，基本樣式出來了，但是提示沒有，效果如下：

這樣肯定不能滿足我們的要求，后來經過自己不斷的嘗試，發現這樣寫就可以了

　

renderHeader (h,{column}) {
    return h(
        'div',[ 
             h('span', column.label),
             h('el-tooltip',{
　　　　      props:{
　　　　　　　　effect:'dark',
　　　　　　　　content:'這是一個提示',
　　　　　　　　placement:'top'
　　　　　　},　　　 
　　　　 },[
                 h('i', {
                     class:'el-icon-question',
                     style:'color:#409eff;margin-left:5px;'
                 })
            ],{
                content: '這是一個提示'
            })
        ]
    );
}