element表格表头tootip省略号

效果图

 

<template>
  <div>
    <p>表格数据</p>
    <el-table
      :data="tableData"
      height="400px"
      max-height="400px"
      size="small"
      row-class-name="row"
      cell-class-name="column"
      :highlight-current-row="true"
      @cell-click="cellClick"
      fit
    >
      <el-table-column
        v-for="(item, index) in tableLabel"
        :key="index"
        :prop="item.prop"
        :width="item.width"
        :label="item.label"
        :render-header="renderHeader"
        align="center"
      >
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          id: 1,
          date: "2018-07-24",
          sales: 23.34,
          sale: 137597.76,
          const: 102203.71,
          profit: 35394.05,
        },
        {
          id: 2,
          date: "2018-07-24",
          sales: 23.34,
          sale: 137597.76,
          const: 102203.71,
          profit: 35394.05,
        },
        {
          id: 3,
          date: "2018-07-24",
          sales: 23.34,
          sale: 137597.76,
          const: 102203.71,
          profit: 35394.05,
        },
        {
          id: 4,
          date: "2018-07-24",
          sales: 23.34,
          sale: 137597.76,
          const: 102203.71,
          profit: 35394.05,
        },
        {
          id: 5,
          date: "2018-07-24",
          sales: 23.34,
          sale: 137597.76,
          const: 102203.71,
          profit: 35394.05,
        },
        {
          id: 6,
          date: "2018-07-24",
          sales: 23.34,
          sale: 137597.76,
          const: 102203.71,
          profit: 35394.05,
        },
      ],
      // 子组件的表头数据
      tableLabel: [
        { label: "", width: "40", prop: "id" },
        { label: "日期", width: "", prop: "date" },
        { label: "销售量", width: "", prop: "sales" },
        { label: "销售额第三方", width: "", prop: "sale" },
        { label: "成本啥的啥的", width: "", prop: "const" },
        { label: "利润第三", width: "", prop: "profit" },
      ],
    };
  },
  methods: {
    renderHeader(h, { column, $index }) {
      let titleText = column.label;
      console.log(column.label.length);
      console.log($index);
      if (column.label.length > 4) {  // 这里设置长度为4
        titleText = column.label.slice(0,4) + '...';
        return [
          h(
            'el-tooltip',
            {
              props: {
                content: (function() {
                  const label = column.label;
                  return label;
                })(),
                placement: 'top',
              },
            },
            [
              h('div', {}, titleText),
            ]
          )
        ]
      }
      return titleText;
    }
  }
};
</script>

<style>
</style>