elementUi 中table表尾插入行

最新推荐文章于 2025-07-10 13:24:12 发布

蓝色的落叶

最新推荐文章于 2025-07-10 13:24:12 发布

阅读量1.7w

点赞数 3

CC 4.0 BY-SA版权

分类专栏： elementUI 文章标签： elementui table 插入行

本文链接：https://blog.youkuaiyun.com/qq_38502227/article/details/95495227

elementUI 专栏收录该内容

17 篇文章

订阅专栏

本文介绍如何在ElementUI的Table组件中实现表尾动态插入行，包括具体的步骤和示例代码，帮助开发者更好地掌握ElementUI的表格功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<template>
  <div>
    <el-table stripe class="jx-table" :data="tableData" border ref="table" style="width: 100%">
      <el-table-column prop="firstColumn" :label="firstColLabel" :resizable="false"></el-table-column>
      <el-table-column prop="date" label="时间" :resizable="false"></el-table-column>
      <el-table-column prop="name" label="姓名" :resizable="false"></el-table-column>
      <el-table-column prop="province" label="地点" :resizable="false"></el-table-column>
    </el-table>
  </div>
</template>
<script>
import { map } from "lodash";
export default {
  created() {
    this.init();
  },
  data() {
    return {
      fullTableData: [],
      firstColLabel: "",
      tableFoot: [],
      allDate: {
        TabData: {
          result: [
            {
              date: "2016-05-02",
              name: "王小虎",
              province: "上海",
              firstColumn: 1
            },
            {
              date: "2016-05-04",
              name: "王小虎",
              province: "上海",
             title: 12
            },
            {
              date: "2016-05-01",
              name: "王小虎",
              province: "上海",
              title: 123
            },
            {
              date: "2016-05-03",
              name: "王小虎",
              province: "上海",
              title: 124
            }
          ],
          avg: { date: "---", name: "--", province: "-" },
          count: { date: "_", name: "__", province: "___" }
        },
        csNick: "标题"
      }
    };
  },
  methods: {
    init() {
      const { result, avg, count } = this.allDate.TabData;
      this.fullTableData = map(result, (object, key) => {
        return {
          firstColumn: object.title,
          ...object
        };
      });
      count.firstColumn = "汇总";
      avg.firstColumn = "均值";
      this.tableFoot = [count, avg];
      this.firstColLabel = this.allDate.csNick;
    }
  },
  computed: {
    tableData() {
      const tbody = this.fullTableData;
      return tbody.length ? [...tbody, ...this.tableFoot] : [];
    }
  }
};
</script>
<style lang="scss" scoped>
</style>

效果图如下：
在这里插入图片描述