vue+element-ui el-table表格(含表头)内容溢出省略，鼠标悬浮提示

第一种:
参考：https://my.oschina.net/u/3455362/blog/4674804

<template>
  <div class="test">
        <el-table :data="gridData" border stripe style=" 100%">
          <template v-for="item in gridDataHeader">
            <el-table-column :prop="item.key" :key="item.key" :label="item.label" :  show-overflow-tooltip>
              <template slot-scope="scope" slot="header">
                <div @mouseover="onMouseOver('refName' + scope.$index)">
                  <el-tooltip :disabled="isShowTooltip" :content="item.label" placement="top">
                    <div class="long_title">
                      <span :ref="'refName' + scope.$index">{{item.label}}</span>
                    </div>
                  </el-tooltip>
                </div>
              </template>
            </el-table-column>
          </template>
        </el-table>
  </div>
</template>
<script>
export default {
  data() {
    return {
      gridDataHeader: [
        {key:'date',label:'日期afdsasfasdfasfdasasfasfasdfasdfasdfadsfdfasdf','100',aling:'center'},
        {key:'name',label:'姓名','200',aling:'center'},
        {key:'address',label:'地址','100',aling:'center'}
      ],
      gridData: [
        {
          date:
            "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄afsafasfergtujyjhgngfhddfghdgfhgfdh",
        },
      ],
      isShowTooltip: false,
    };
  },
  methods: {
    onMouseOver(refName) {
      let parentWidth = this.$refs[refName][0].parentNode.offsetWidth;
      let contentWidth = this.$refs[refName][0].offsetWidth;
      // 判断是否开启tooltip功能
      if (contentWidth > parentWidth) {
        this.isShowTooltip = false;
      } else {
        this.isShowTooltip = true;
      }
    },
  },
};
</script>
<style>
.long_title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>

<template>
  <div class="TableHeaderTest">
    <el-table
      size="small"
      border
      v-loading="loading"
      :data="tableData"
       
    >
      <el-table-column prop="city_name" label="城市"> </el-table-column>
      <el-table-column prop="maxprice" :render-header="renderHeader">
        <template slot-scope="scope">
          <span
            ><span class="skucost-pruice">￥</span
            ><span class="skucost-pruice">{{ scope.row.maxprice }}</span></span
          >
        </template>
      </el-table-column>
      <el-table-column prop="company_name" label="机构名称"> </el-table-column>
      <el-table-column prop="area_name" label="区域"> </el-table-column>
      <el-table-column prop="price" label="价格">
        <template slot-scope="scope">
          <span
            ><span class="skucost-pruice">￥</span
            ><span class="skucost-pruice">{{ scope.row.price }}</span></span
          >
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
export default {
  name: "TableHeaderTest",
  data() {
    return {
      loading: false,
      tableData: [
        {
          city_name: "fafa",
          maxprice: "123",
          company_name: "sfdgsfdgfsd",
          area_name: "hgfhdgf",
          price: "123",
        },
      ],
    };
  },
  methods: {
    //自定义表头
    renderHeader(h) {
      return h("span", {}, [
        // h("span",{class: "headerTest",},"价格"),
        h(
          "el-popover",
          {
            props: {
              placement: "top",
               "200",
              trigger: "hover",
              content: "城市价格为该城市所有加盟商价格的最高价",
            },
          },
        //   [h("", { slot: "reference", class: "el-icon-question" }, "")]
        [h("span",{slot: "reference",class: "headerTest",},"价格就分手；收款方使肌肤的哈萨克复读机啊阿凡达阿斯顿发的说法放大石头人gas发送到发")]
        ),
      ]);
    },
  },
};
</script>
<style>
.headerTest {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>
注：el-tooltip写法

renderHeader(h,{column}){
　　console.log(column);
　　if(column.label){//表头名称
　　　　reutrn (
　　　　　　<el-tooltip errect="dark" content={column.label} placement="top">//鼠标悬浮提示
　　　　　　　　<span style="overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">{column.label}</span>//表头名称
　　　　　　</el-tooltip>
　　　　)
　　}
}