ElementUI中table表格自定义表头Tooltip文字提示

picture

table-header-tips

应用 element 中的 table 组件，自定义表头 Tooltip 文字提示。

效果图

效果图

示例 demo 代码

请点这里

引用 element-ui

npm install element-ui

在 main.js 中引入

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

增加全局组件 promptMessages 并在全局引用

在 src -> modules -> components -> messages 中增加 promptMessages 组件及 index.js 文件

promptMessages 组件

index.js 文件

import promptMessages from './promptMessages.vue';

/* istanbul ignore next */
promptMessages.install = function(Vue) {
  Vue.component(promptMessages.name, promptMessages);
};

export default promptMessages;

在 utils 文件夹 下，新增 components.js 用于 引入全局组件
components.js 文件

/**
 * Created by Administrator on 2019/07/03 0030.
 * 所有自定义全局组件在此引入
 */
import Vue from 'vue';
import promptMessages from '@/modules/components/messages';
Vue.use(promptMessages); // 表头提示自定义提示信息组件

最后在 main.js 中引入 components.js 文件即可全局使用 promptMessages 组件。

import '@/utils/components.js'; // 自定义组件 js

table-header-tips 组件 自定义表头方法 renderHeaderMethods

应用了 element table 组件的 render-header（列标题 Label 区域渲染使用的 Function）。