el-table表头添加弹框提示

在项目中遇到需求,解决后记录下以备下次使用

table表头标题过长,需要溢出打点进行美化,需要鼠标移入展示全部文字,使用了el-tooltip以及下图属性实现

// 1. 首先需要封装一个弹框的全局组件
<template>
  <div class="tooltip">
    <el-tooltip effect="dark" placement="right">
      <div slot="content">
        <!-- 插槽，可提供多行的提示信息 -->
        <!-- 全局组件，这里是配置图标icon和提示信息的地方 -->
        <!-- 在其他组件中引用方式详见 table-header-tips.vue 组件中的 renderHeaderMethods 方法 -->
        <p v-for="(item, index) in messages" :key="index">{{item}}</p>
      </div>
      <!-- <i class="el-icon-info" style="color:#409eff;margin-left:5px;"></i> -->
      <span>{{item}}</span>
    </el-tooltip>
  </div>
</template>
<script>
  export default {
    name: 'tooltipComponent',
    data() {
      return {};
    },
    props: {
      messages: {
        type: Array,
        default() {
          return [];
        }
      },
      item:{
          type:String,
          default:()=>''
      }
    }
  };
</script>
// 随便放一个位置

//2. 再创建一个声明全局组件的js文件
// 引入封装好的弹窗
import tooltipComponent from './tooltipComponent/index.vue';

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

export default promptMessages;

// 3. 在main.js文件引入步骤2创建的js文件挂载到全局
import tooltipComponent from '@/components/messages/';
Vue.use(tooltipComponent); // 表头提示自定义提示信息组件

//  4.在使用的页面操作

<el-table :data="tableData.data" style="width: 100%">
    <el-table-column
     ...配置的乱七八糟的属性
     (主角↓)
     :render-header="myTooltip"
    >
    </el-table-column>
</el-table>


//在methods中定义方法,动态生成dom插入
methods: {
        myTooltip(h, { column }) {
            // h == this.$createElement  生成dom的
            return h(
            'div',
            {
                style: 'text-aglin:center;',
                class: 'xxx'
            },
            [
                // 引用封装好的组件  这里会将组件放在表头中,组件是封装好的可以触发弹框
                h('tooltipComponent', {
                // 传入参数
                props: {
                    // messages 里面配置的信息即为 Tooltip 提示信息 item为鼠标移入触发Tooltip提示信息的内容
                    messages: [column.label],
                    // 这里进行一个手动截取长度打点处理,
                    item:column.label.length>6? column.label.slice(0,6)+'...' :column.label
                }
                })
            ]
        )}
    }