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语法就不做多介绍了。

 

来源：oschina

链接：https://my.oschina.net/u/4263469/blog/3617549