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

elementUI table表格通常的樣式是這樣的：vue

可是要改變表頭是比較麻煩的一個事情，可是每每有些項目是須要的好比改爲以下樣式：npm

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

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

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

方法一：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>

運行效果：工具

對上面方法還有須要改進的地方，有時候在自定義的時候內容過於複雜，這個時候能夠把內容都放到組件裏面，在引進來插入進去。例如：this

 <!-- 使用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已是自定義組件(標籤)，因此不須要加引號。spa

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

詳細細心去官網看吧。3d

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語法就不作多介紹了。