行业资讯

elementUi中table表尾插入行怎么实现

发布时间：2022-07-29 13:39:23 作者：iii
来源：亿速云 阅读：692

ElementUI中Table表尾插入行怎么实现

引言

ElementUI 是一套基于 Vue.js 的桌面端组件库，提供了丰富的 UI 组件，其中 el-table 是常用的表格组件。在实际开发中，我们经常需要在表格的表尾插入一行，用于显示汇总信息、统计结果或其他自定义内容。本文将详细介绍如何在 ElementUI 的 el-table 中实现表尾插入行，并提供多种实现方式和代码示例。

1. 使用 append 插槽

ElementUI 的 el-table 组件提供了一个 append 插槽，可以在表格的最后插入自定义内容。这是实现表尾插入行最直接和推荐的方式。

1.1 基本用法

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="date" label="日期" width="180"></el-table-column>
    <el-table-column prop="name" label="姓名" width="180"></el-table-column>
    <el-table-column prop="address" label="地址"></el-table-column>
    <template #append>
      <tr class="custom-footer">
        <td colspan="3">汇总信息</td>
      </tr>
    </template>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { date: '2023-01-01', name: '张三', address: '北京市' },
        { date: '2023-01-02', name: '李四', address: '上海市' },
        { date: '2023-01-03', name: '王五', address: '广州市' },
      ],
    };
  },
};
</script>

<style>
.custom-footer {
  background-color: #f5f7fa;
  font-weight: bold;
  text-align: center;
}
</style>

1.2 解释

1.3 优点

1.4 缺点

2. 使用 footer 插槽

ElementUI 的 el-table 组件还提供了一个 footer 插槽，可以在表格的底部插入自定义内容。与 append 插槽不同，footer 插槽的内容会显示在表格的底部，而不是表格的最后一行。

2.1 基本用法

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="date" label="日期" width="180"></el-table-column>
    <el-table-column prop="name" label="姓名" width="180"></el-table-column>
    <el-table-column prop="address" label="地址"></el-table-column>
    <template #footer>
      <div class="custom-footer">
        汇总信息
      </div>
    </template>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { date: '2023-01-01', name: '张三', address: '北京市' },
        { date: '2023-01-02', name: '李四', address: '上海市' },
        { date: '2023-01-03', name: '王五', address: '广州市' },
      ],
    };
  },
};
</script>

<style>
.custom-footer {
  background-color: #f5f7fa;
  font-weight: bold;
  text-align: center;
  padding: 10px;
}
</style>

2.2 解释

2.3 优点

2.4 缺点

3. 使用 summary-method 属性

ElementUI 的 el-table 组件提供了一个 summary-method 属性，可以在表格的最后一行显示汇总信息。这种方式适用于需要在表格的最后一行显示统计结果或汇总数据的场景。

3.1 基本用法

<template>
  <el-table :data="tableData" style="width: 100%" :summary-method="getSummaries">
    <el-table-column prop="date" label="日期" width="180"></el-table-column>
    <el-table-column prop="name" label="姓名" width="180"></el-table-column>
    <el-table-column prop="address" label="地址"></el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { date: '2023-01-01', name: '张三', address: '北京市' },
        { date: '2023-01-02', name: '李四', address: '上海市' },
        { date: '2023-01-03', name: '王五', address: '广州市' },
      ],
    };
  },
  methods: {
    getSummaries(param) {
      const { columns, data } = param;
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '汇总';
          return;
        }
        if (index === 1) {
          sums[index] = `总人数：${data.length}`;
          return;
        }
        sums[index] = '';
      });
      return sums;
    },
  },
};
</script>

<style>
.el-table__footer-wrapper tbody td {
  background-color: #f5f7fa;
  font-weight: bold;
  text-align: center;
}
</style>

3.2 解释

3.3 优点

3.4 缺点

4. 使用 footer 插槽与 summary-method 结合

在某些场景下，我们可能需要在表格的底部显示汇总信息，并在表格的最后一行显示统计结果。此时，可以结合使用 footer 插槽和 summary-method 属性。

4.1 基本用法

<template>
  <el-table :data="tableData" style="width: 100%" :summary-method="getSummaries">
    <el-table-column prop="date" label="日期" width="180"></el-table-column>
    <el-table-column prop="name" label="姓名" width="180"></el-table-column>
    <el-table-column prop="address" label="地址"></el-table-column>
    <template #footer>
      <div class="custom-footer">
        汇总信息
      </div>
    </template>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { date: '2023-01-01', name: '张三', address: '北京市' },
        { date: '2023-01-02', name: '李四', address: '上海市' },
        { date: '2023-01-03', name: '王五', address: '广州市' },
      ],
    };
  },
  methods: {
    getSummaries(param) {
      const { columns, data } = param;
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '汇总';
          return;
        }
        if (index === 1) {
          sums[index] = `总人数：${data.length}`;
          return;
        }
        sums[index] = '';
      });
      return sums;
    },
  },
};
</script>

<style>
.custom-footer {
  background-color: #f5f7fa;
  font-weight: bold;
  text-align: center;
  padding: 10px;
}
</style>

4.2 解释

4.3 优点

4.4 缺点

5. 使用 el-table-column 的 footer 插槽

ElementUI 的 el-table-column 组件提供了一个 footer 插槽，可以在表格的每一列的底部插入自定义内容。这种方式适用于需要在每一列的底部显示不同汇总信息的场景。

5.1 基本用法

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="date" label="日期" width="180">
      <template #footer>
        <div class="custom-footer">
          日期汇总
        </div>
      </template>
    </el-table-column>
    <el-table-column prop="name" label="姓名" width="180">
      <template #footer>
        <div class="custom-footer">
          姓名汇总
        </div>
      </template>
    </el-table-column>
    <el-table-column prop="address" label="地址">
      <template #footer>
        <div class="custom-footer">
          地址汇总
        </div>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { date: '2023-01-01', name: '张三', address: '北京市' },
        { date: '2023-01-02', name: '李四', address: '上海市' },
        { date: '2023-01-03', name: '王五', address: '广州市' },
      ],
    };
  },
};
</script>

<style>
.custom-footer {
  background-color: #f5f7fa;
  font-weight: bold;
  text-align: center;
  padding: 10px;
}
</style>

5.2 解释

5.3 优点

5.4 缺点

6. 使用 el-table-column 的 footer 插槽与 summary-method 结合

在某些场景下，我们可能需要在表格的每一列的底部显示不同的汇总信息，并在表格的最后一行显示统计结果。此时，可以结合使用 el-table-column 的 footer 插槽和 summary-method 属性。

6.1 基本用法

<template>
  <el-table :data="tableData" style="width: 100%" :summary-method="getSummaries">
    <el-table-column prop="date" label="日期" width="180">
      <template #footer>
        <div class="custom-footer">
          日期汇总
        </div>
      </template>
    </el-table-column>
    <el-table-column prop="name" label="姓名" width="180">
      <template #footer>
        <div class="custom-footer">
          姓名汇总
        </div>
      </template>
    </el-table-column>
    <el-table-column prop="address" label="地址">
      <template #footer>
        <div class="custom-footer">
          地址汇总
        </div>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { date: '2023-01-01', name: '张三', address: '北京市' },
        { date: '2023-01-02', name: '李四', address: '上海市' },
        { date: '2023-01-03', name: '王五', address: '广州市' },
      ],
    };
  },
  methods: {
    getSummaries(param) {
      const { columns, data } = param;
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '汇总';
          return;
        }
        if (index === 1) {
          sums[index] = `总人数：${data.length}`;
          return;
        }
        sums[index] = '';
      });
      return sums;
    },
  },
};
</script>

<style>
.custom-footer {
  background-color: #f5f7fa;
  font-weight: bold;
  text-align: center;
  padding: 10px;
}
</style>

6.2 解释

6.3 优点

6.4 缺点

7. 使用 el-table-column 的 footer 插槽与 append 插槽结合

在某些场景下，我们可能需要在表格的每一列的底部显示不同的汇总信息，并在表格的最后一行插入自定义内容。此时，可以结合使用 el-table-column 的 footer 插槽和 append 插槽。

7.1 基本用法

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="date" label="日期" width="180">
      <template #footer>
        <div class="custom-footer">
          日期汇总
        </div>
      </template>
    </el-table-column>
    <el-table-column prop="name" label="姓名" width="180">
      <template #footer>
        <div class="custom-footer">
          姓名汇总
        </div>
      </template>
    </el-table-column>
    <el-table-column prop="address" label="地址">
      <template #footer>
        <div class="custom-footer">
          地址汇总
        </div>
      </template>
    </el-table-column>
    <template #append>
      <tr class="custom-footer">
        <td colspan="3">汇总信息</td>
      </tr>
    </template>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { date: '2023-01-01', name: '张三', address: '北京市' },
        { date: '2023-01-02', name: '李四', address: '上海市' },
        { date: '2023-01-03', name: '王五', address: '广州市' },
      ],
    };
  },
};
</script>

<style>
.custom-footer {
  background-color: #f5f7fa;
  font-weight: bold;
  text-align: center;
  padding: 10px;
}
</style>

7.2 解释

7.3 优点

7.4 缺点

8. 使用 el-table-column 的 footer 插槽与 footer 插槽结合

在某些场景下，我们可能需要在表格的每一列的底部显示不同的汇总信息，并在表格的底部插入自定义内容。此时，可以结合使用 el-table-column 的 footer 插槽和 footer 插槽。

8.1 基本用法

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="date" label="日期" width="180">
      <template #footer>
        <div class="custom-footer">
          日期汇总
        </div>
      </template>
    </el-table-column>
    <el-table-column prop="name" label="姓名" width="180">
      <template #footer>
        <div class="custom-footer">
          姓名汇总
        </div>
      </template>
    </el-table-column>
    <el-table-column prop="address" label="地址">
      <template #footer>
        <div class="custom-footer">
          地址汇总
        </div>
      </template>
    </el-table-column>
    <template #footer>
      <div class="custom-footer">
        汇总信息
      </div>
    </template>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { date: '2023-01-01', name: '张三', address: '北京市' },
        { date: '2023-01-02', name: '李四', address: '上海市' },
        { date: '2023-01-03', name: '王五', address: '广州市' },
      ],
    };
  },
};
</script>

<style>
.custom-footer {
  background-color: #f5f7fa;
  font-weight: bold;
  text-align: center;
  padding: 10px;
}
</style>

8.2 解释

推荐阅读：
  1. 链表升序排列（尾插）
  2. 【C语言】静态顺序表的实现（包括头插、头删、尾插、尾删、查找、删除指定位置）

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。

elementui table

上一篇：C/C++中的静态变量注意事项实例分析

下一篇：基于WPF如何实现一个简单的音频播放动画控件

相关阅读

您好，登录后才能下订单哦！

密码登录
登录注册
获取短信验证码
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》
产品服务
地区划分
帮助支持
关于我们
行业资讯-文章归档 问答-问答归档
广州亿速云计算有限公司

7*24小时在线电话：400-100-2938

7*24小时在线QQ：800811969

Copyright © Yisu Cloud Ltd. All Rights Reserved. 2018 版权所有
粤ICP备17096448号-1 粤公网安备 44010402001142号