vue el-table表格合并单元格、合计、自定义表格高度和页面Loadding的完美实现

2023-05-20 16:05:30

实现Element Table高级功能：表格底部合计、自定义高度和页面加载效果

在构建动态数据驱动的Web应用程序时，Element UI是一个流行的Vue.js UI库，它提供了丰富的组件集合，可以轻松创建各种用户界面元素。其中，Element Table是一个功能强大的表格组件，它允许开发人员展示和操作复杂的数据集。本文旨在全面解析Element Table的官方教程，分享使用它的经验和避开常见的坑点，并提供详细的代码示例，帮助开发人员一步到位实现所需的功能。

表格底部合计

在许多情况下，表格需要在底部显示数据的汇总信息，例如总计或平均值。Element Table通过el-table-footer组件提供了这一功能。要实现表格底部合计，需要遵循以下步骤：

添加一个el-table-footer组件，并在其内添加一个或多个el-table-column组件，指定要合计的列。
设置show-summary属性为true，启用合计功能。
对于要合计的列，使用formatter属性指定一个自定义函数，该函数返回合计值。

自定义表格高度

Element Table默认使用父容器的高度。然而，有时需要根据特定要求自定义表格的高度。可以通过两种方法实现：

使用CSS样式表： 添加一个CSS样式表，为.el-table类设置height属性。
使用JavaScript： 在Vue实例中使用$nextTick钩子，在表格渲染完成后动态计算表格的高度，并将其存储在数据变量中。

页面加载效果

为了提高用户体验，当加载数据时显示一个加载效果是一个好主意。Element UI提供了el-loading组件，可以轻松地实现这一效果：

添加一个el-loading组件，并将其与一个布尔值绑定的v-if指令一起使用，以在需要时显示加载效果。
在methods选项中定义一个函数，在需要加载数据时触发，并将其设置到el-loading组件的loading属性。
在数据加载完成后，将loading属性设置为false，以隐藏加载效果。

代码示例

为了更好地理解这些功能，以下是实现上述功能的代码示例：

<template>
  <el-table :data="tableData" :border="true">
    <el-table-column prop="name" label="名称" width="180"></el-table-column>
    <el-table-column prop="price" label="价格" width="120"></el-table-column>
    <el-table-column prop="quantity" label="数量" width="100"></el-table-column>
    <el-table-column prop="total" label="总价" width="120"></el-table-column>
    <el-table-footer :show-summary="true">
      <el-table-column prop="name" label="合计"></el-table-column>
      <el-table-column prop="price"></el-table-column>
      <el-table-column prop="quantity"></el-table-column>
      <el-table-column prop="total" label="总价" :formatter="handleFooterTotal"></el-table-column>
    </el-table-footer>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          name: 'iPhone X',
          price: 999,
          quantity: 1,
          total: 999
        },
        {
          name: 'iPad Pro',
          price: 799,
          quantity: 2,
          total: 1598
        },
        {
          name: 'MacBook Pro',
          price: 1299,
          quantity: 1,
          total: 1299
        }
      ]
    };
  },
  methods: {
    handleFooterTotal(row, column, rowIndex) {
      if (column.property === 'total') {
        let total = 0;
        this.tableData.forEach((item) => {
          total += item.total;
        });
        return total;
      }
    }
  }
};
</script>