有時候如果table的header的內(nèi)容太多而頁面的寬度有限，這個時候需要將多長的文字隱藏起來，顯示省略號并用彈窗顯示全部信息，這時候可以使用render-header這個屬性，自定義生成header，看下面的代碼：

<template>
  <div class="table-contain">
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="date" label="Date" width="180">
        </el-table-column>
        <el-table-column prop="name" label="Name" width="180">
        </el-table-column>
        <el-table-column
          prop="address"
          label="This is a long long long long long long long long long long Address"
          :render-header="renderHeader"
        >
        </el-table-column>
      </el-table>
  </div>
</template>

<script>
export default {
  name: "elementTable",
  data() {
    return {
      tableData: [
        {
          date: "2016-05-03",
          name: "Tom",
          address: "No. 189, Grove St, Los Angeles",
        },
        {
          date: "2016-05-02",
          name: "Tom",
          address: "No. 189, Grove St, Los Angeles",
        },
        {
          date: "2016-05-04",
          name: "Tom",
          address: "No. 189, Grove St, Los Angeles",
        },
        {
          date: "2016-05-01",
          name: "Tom",
          address: "No. 189, Grove St, Los Angeles",
        },
      ],
    };
  },
  created() {
    let _this = this;
  },
  mounted() {
    let _this = this;
  },
  components: {},
  methods: {
    renderHeader: function (h, { column }) {
      return h(
        "div",
        {
          slot: "content",
          class: "table-header-flex",
        },
        [
          h(
            "el-tooltip",
            {
              props: {
                placement: "top",
              },
            },
            [
              h(
                "div",
                {
                  slot: "content",
                  style: {
                    whiteSpace: "normal",
                  },
                },
                column.label
              ),
              h(
                "span",
                {
                  style: {
                    whiteSpace: "normal",
                    overflow: "hidden",
                    "text-overflow": "ellipsis",
                    "white-space": "nowrap",
                    "max-width": "90%",
                    display: "inline-block",
                  },
                },
                column.label
              ),
            ]
          ),
        ]
      );
    },
  },
};
</script>

<style>
  .table-contain{
    width: 500px;
    height: 100%;
    padding: 10px;
  }
</style>

上面代碼中renderHeader方法里要注意column 包含的是每一行的內(nèi)容，給header添加顯示省略號的css代碼，并且要把header的文字內(nèi)容包含在el-tooltip里面
下面的是效果圖：
文章來源地址http://www.zghlxwxcb.cn/news/detail-776035.html

到了這里，關(guān)于【vue】Element ui 表格的header 標題文字過于太長 而需要顯示省略號并用tooltip顯示全部信息的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！