element-ui自定義table表頭，修改列標題樣式

elementUI table表格一般的樣式是這樣的：

但是要改變表頭是比較麻煩的一個事情，但是往往有些項目是需要的比如改成如下樣式：

 

一般直接改起來挺麻煩，好在官網提供了一個方法：render-header

參數	說明	類型	可選值	默認值
render-header	列標題 Label 區域渲染使用的 Function	Function(h, { column, $index })	—	—

 

根據官方的方法來實現有兩個方法：

方法一：vue的render函數來直接實現

<template>
    <div>
        <h2 align="center">自定義表頭樣式</h2>
        <el-table :data="tableData" border stripe>
            <el-table-column prop="name" label="姓名" align="center" :render-header="renderHeader">
            </el-table-column>
            <el-table-column prop="date" label="日期" align="center">
            </el-table-column>
            <el-table-column prop="address" label="地址" align="center">
            </el-table-column>
        </el-table>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                tableData: [{
                    name: '王小虎',
                    date: '2016-05-02',
                    address: '上海市普陀區金沙江路 1518 弄'
                }, {
                    name: '王老五',
                    date: '2016-05-04',
                    address: '上海市普陀區金沙江路 1517 弄'
                }],
                tableHeader: [{
                    prop: 'name',
                    label: '姓名'
                }, {
                    prop: 'date',
                    label: '時間'
                }, {
                    prop: 'address',
                    label: '地址'
                }],
            }
        },
        methods: {
            renderHeader(h, {column, $index}) {
                // 這里在最外層插入一個div標簽
                return h('div',[// h即為cerateElement的簡寫 
                    // 在div里面插入span
                    h('span', {
                        // 表示內容
                        domProps:{
                            innerHTML:column.label
                        },
                        on: {
                            click: () => {
                                console.log(`${column.label}   ${$index}`)
                            }
                        }
                    }),
                    h('el-tooltip',{
                        // 表示屬性
                        attrs: {
                            effect: "dark",
                            content: "備注信息",
                            placement: "top"
                        },
                    },[
                        h("i", {
                            'class': 'el-icon-warning table-msg'
                        })
                    ])
                ])
            },
        }  
    }
</script>

 運行效果：

對上面方法還有需要改進的地方，有時候在自定義的時候內容過於復雜，這個時候可以把內容都放到組件里面，在引進來插入進去。例如：

 <!-- 使用PromptMessage.vue的組件 自定義表頭 -->
<template>
    <el-tooltip effect="dark" placement="top">
      <div slot="content">
        <span v-for="item in messages" :key="item">
          {{item}}
        </span>
      </div>
      <i class="el-icon-question" style="color:#409eff;font-size:15px;"></i>
    </el-tooltip>
</template>
<script>
  export default {
    name:'promptMessage',
    props:['messages']
  };
</script>
<style scope>

</style>

<!-- 新建名為 PromptMessage.vue 的組件 -->

<template>
    <div>
        <h2 align="center">自定義表頭樣式</h2>
        <el-table :data="tableData" border stripe>
            <el-table-column prop="name" label="姓名" align="center" :render-header="renderHeader">
            </el-table-column>
            <el-table-column prop="date" label="日期" align="center" :render-header="renderHeaderTwo">
            </el-table-column>
            <el-table-column prop="address" label="地址" align="center">
            </el-table-column>
        </el-table>
    </div>
</template>

<script>
/* 
    局部引入組件，也可以全局引入，在main.js

    import promptmessage from '路徑/PromptMessage.vue'
    Vue.component('promptmessage', promptmessage)
*/
import promptmessage from './PromptMessage.vue'
    export default {
        data() {
            return {
                tableData: [{
                    name: '王小虎',
                    date: '2016-05-02',
                    address: '上海市普陀區金沙江路 1518 弄'
                }, {
                    name: '王老五',
                    date: '2016-05-04',
                    address: '上海市普陀區金沙江路 1517 弄'
                }],
                tableHeader: [{
                    prop: 'name',
                    label: '姓名'
                }, {
                    prop: 'date',
                    label: '時間'
                }, {
                    prop: 'address',
                    label: '地址'
                }],
            }
        },
        methods: {
            renderHeader(h, {column, $index}) {
                // 這里在最外層插入一個div標簽
                return h('div',[// h即為cerateElement的簡寫 
                    // 在div里面插入span
                    h('span', {
                        // 表示內容
                        domProps:{
                            innerHTML:column.label
                        },
                        on: {
                            click: () => {
                                console.log(`${column.label}   ${$index}`)
                            }
                        }
                    }),
                    h('el-tooltip',{
                        // 表示屬性
                        attrs: {
                            effect: "dark",
                            content: "備注信息",
                            placement: "top"
                        },
                    },[
                        h("i", {
                            'class': 'el-icon-warning table-msg'
                        })
                    ])
                ])
            },
            renderHeaderTwo(h, {column, $index}) {
               return h('div', [
                    h('span', {
                        domProps:{
                            innerHTML:column.label
                        }
                    }),

　　　　　　　　　　　　　 /*

　　　　　　　　　　　　　　　把引入的組件插入進去。

　　　　　　　　　　　　　　　這里的promptmessage已經是自定義組件(標簽)，所以不需要加引號->"promptmessage",

　　　　　　　　　　　　　　　否則會報組件未注冊的錯誤。

　　　　　　　　　　　　　*/

                    h(promptmessage, {
                        props: {messages: ["備注信息2"]},
                        style: {
                            'cursor': 'pointer',
                        }
                    })
                ])
            },
        }  
    }
</script>

 效果圖：注意promptmessage已經是自定義組件(標簽)，所以不需要加引號。

 

方法二：直接使用JSX語法，此方法最簡單，但是必須安裝編譯插件

 

詳細細心去官網看吧。

1. 先安裝JSX語法編譯工具：

　　npm install\
　　babel-plugin-syntax-jsx\
　　babel-plugin-transform-vue-jsx\
　　babel-helper-vue-jsx-merge-props\
　　babel-preset-es2015\
　　--save-dev

2. 配置.babelrc文件:

　　{
　　　　"presets": ["es2015"],
　　　　"plugins": ["transform-vue-jsx"]
　　}

3. 編寫代碼：

<template>
    <div>
        <h2 align="center">自定義表頭樣式</h2>
        <el-table :data="tableData" border stripe>
            <el-table-column prop="name" label="姓名" align="center" :render-header="renderHeader">
            </el-table-column>
            <el-table-column prop="date" label="日期" align="center">
            </el-table-column>
            <el-table-column prop="address" label="地址" align="center">
            </el-table-column>
        </el-table>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                tableData: [{
                    name: '王小虎',
                    date: '2016-05-02',
                    address: '上海市普陀區金沙江路 1518 弄'
                }, {
                    name: '王老五',
                    date: '2016-05-04',
                    address: '上海市普陀區金沙江路 1517 弄'
                }],
                tableHeader: [{
                    prop: 'name',
                    label: '姓名'
                }, {
                    prop: 'date',
                    label: '時間'
                }, {
                    prop: 'address',
                    label: '地址'
                }],
                mesHtml:'只是一個提示'
            }
        },
        methods: {
            renderHeader(h, {column, $index}) {
                return(
                    <div>
                        <span>{column.label}</span>
                        <el-tooltip class="tooltip" effect="dark" placement="top">
                            <div slot="content">
                                <span onClick={this.handleClick}>{this.mesHtml}</span>
                            </div>
                            <i class="el-icon-question"></i>
                        </el-tooltip>
                    </div>
                )
            },
            handleClick(){
                alert('點擊')
            }
        }  
    }
</script>

 

 運行效果如下，具體jsx語法就不做多介紹了。