el-table多级表头封装（+表头省略号）

最新推荐文章于 2024-07-09 15:06:23 发布

天气晚来秋~

最新推荐文章于 2024-07-09 15:06:23 发布

阅读量902

点赞数 1

分类专栏： vue 前端 element 文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/TianQiWanLaiQiu/article/details/121359824

版权

前端同时被 3 个专栏收录

46 篇文章 0 订阅

订阅专栏

vue

28 篇文章 1 订阅

订阅专栏

element

18 篇文章 0 订阅

订阅专栏

这篇博客展示了如何在Vue.js中创建一个带有多级表头和自定义渲染功能的表格组件。通过`el-table`组件，实现了数据绑定、自定义样式、列宽设置、内容溢出提示等功能，同时提供了数据行和单元格的类名定制，以增强表格的可读性和交互性。

摘要由CSDN通过智能技术生成

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

<script>
export default {
  data() {
    return {
      tableData: [
        {
          id: 1,
          date: "2018-07-24",
          profit: 35394.05,
        },
        {
          id: 2,
          const: 102203.71,
          profit: 35394.05,
        },
      ],
      // 子组件的表头数据
      tableLabel: [
        { label: "", width: "40", prop: "id" },
        { label: "多级表头",
          tableLabel: [
            { label: "销售额第三方", width: "", prop: "sale" },
            { label: "成本啥的啥的", width: "", prop: "const" },
            { label: "利润第三", width: "", prop: "profit" },
          ],
        },
        { label: "销售量", width: "", prop: "sales" },
        { label: "销售额第三方", width: "", prop: "sale" },
        { label: "成本啥的啥的", width: "", prop: "const" },
        { label: "利润第三", width: "", prop: "profit" },
      ],
    };
  },
  methods: {
    // 表头省略号，超出n显示，例：超出4
    renderHeader(h, { column }) {
      // console.log($index);
      let titleText = column.label;
      if (column.label.length > 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>