vue el-table el-table-column 表头tip提示

这个是关于ElementUI库，table表头提示Tip的东西。去查看了官方的文档发现并没有关于这一块的功能示例，在看了诸多技术文档后，写了这个比较合适我们项目的代码块吗，废话不多说，先看效果。 优点： 1、封装成组件跟混合，直接在页面引用，结构里添加:render-header="renderHeader" ，然后在data里配置headerTipMap就可以了。 2.适用于修改页面比较多表头，修改内容较少，配置简单，提示内容集中，便于维护 缺点： 1.需要消耗性能，写法比普通模板的那种方式较为麻烦些。

总结：页面多，表头多，建议用我这方式，修改少直接用模板的方式（这里不做介绍）

这里个里面有三个部分父组件，子组件，跟一个Mixin(混合)，也可以不写Mixin(混合)，直接在出页面的methods写renderHeader方法就可以了。

父组件里的代码

<template>
 <div class="page-container">
  <el-table :data="tableData" style="width: 50%;">
    <el-table-column :render-header="renderHeader" prop="name" label="姓名" />
    <el-table-column :render-header="renderHeader" prop="age" label="年龄"/>
  </el-table>
 </div>
</template>

<script>
    import { tableHeaderTipMethod } from '@/mixins/tableHeaderTipMixin'
    export default {
        name: 'tableHeaderTip',
        mixins: [tableHeaderTipMethod],
        data() {
            return {
                tableData: [
                { name: '王小虎', age: 18 },
                { name: '王小虎', age: 23 }],
                headerTipMap: {
                    "姓名": ["这是姓名","我叫王小虎"],
                    "年龄": ["这是年龄"]
                }
            }
        }
    }
</script>
复制代码

Mixin里代码

import TableHeaderTip from '../components/TableHeaderTip'

export const tableHeaderTipMethod = {
  components: {
    TableHeaderTip
  },

  methods: {
    renderHeader(h, { column }) {
      let messages = this.headerTipMap[column.label] || []
      return h(
        TableHeaderTip, {
          props: {
            label: column.label,
            messages
          }
        }
      )
    }
  }
}

子组件里代码

<template>
    <div>
    <el-tooltip effect="dark" placement="top">
        <div slot="content">
            <div v-for="(item, index) in messages" :key="index">{{item}}</div>
        </div>
        <!-- span标签里 可以做成自定义图标或者文案，直接把i标记加进去即可 -->
        <!-- <i class="el-icon-info" style="display:none; color: #409eff;margin-left:5px;"></i> -->
        <span> {{label}} </span>
    </el-tooltip>
    </div>
</template>

<script>
export default {
    name: 'TableHeaderTip',
    props: {
        label: {
            type: String,
            default: ''
        },
        messages: {
            type: Array,
            default: []
        }
    }
}
</script>

新手发帖，如果不对，欢迎指正！！！