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