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: '這是一個提示'
            })
        ]
    );
}