el-table表尾合计行错位

el-table表尾合计行错位可能是由于表格固定列的高度问题导致的。解决方法如下：

.el-table__fixed {
  height: calc(100% + 17px) !important;
}
.el-table__fixed-footer-wrapper {
  bottom: 17px;
}
.el-table__fixed-right {
  height: calc(100% + 17px) !important;
}
.el-table__fixed-right .el-table__fixed-footer-wrapper {
  bottom: 17px;
}

如果你使用的是深度选择器，则可以使用以下示例：

::v-deep .el-table__fixed {
  height: calc(100% + 17px) !important;
}
::v-deep .el-table__fixed-footer-wrapper {
  bottom: 17px;
}
::v-deep .el-table__fixed-right {
  height: calc(100% + 17px) !important;
}
::v-deep .el-table__fixed-right .el-table__fixed-footer-wrapper {
  bottom: 17px;
}

相关问题

js 给 el-table 添加表尾合计行

你通过 `show-summary` 属性来开启表格的合计行，然后通过 `summary-method` 属性指定一个方法来计算表格数据的合计值。下面是一个简单的示例：

<template>
  <el-table :data="tableData" show-summary :summary-method="getSum">
    <el-table-column prop="name" label="姓名"></el-table-column>
    <el-table-column prop="age" label="年龄"></el-table-column>
    <el-table-column prop="score" label="分数"></el-table-column>
    <el-table-column prop="rank" label="排名"></el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: '张三', age: 18, score: 90, rank: 1 },
        { name: '李四', age: 20, score: 85, rank: 2 },
        { name: '王五', age: 22, score: 95, rank: 1 },
        { name: '赵六', age: 19, score: 87, rank: 3 },
      ],
    };
  },
  methods: {
    getSummaries(param) {
      const { columns, data } = param;

      const sums = [];
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '合计';
          return;
        }
        const values = data.map((item) => Number(item[column.property]));
        sums[index] = values.reduce((prev, curr) => {
          const value = Number(curr);
          if (!isNaN(value)) {
            return prev + curr;
          } else {
            return prev;
          }
        }, 0);
        sums[index] = parseFloat(sums[index].toFixed(2));
      });

      return sums;
    },
  },
};
</script>

在上面的例子中，我们定义了一个 `tableData` 数组来存储表格数据，然后在表格组件中设置了 `show-summary` 属性为 `true`，并且通过 `summary-method` 属性指定了一个方法 `getSum` 来计算表格数据的合计值。

在 `getSum` 方法中，我们首先通过解构赋值获取到传入的参数 `param`，然后从中获取到表格列信息 `columns` 和表格数据 `data`。接着，我们定义一个空数组 `sums` 来存储合计值，然后遍历表格列信息 `columns`，对每一列数据进行求和操作，并将结果存储到 `sums` 数组中。最后，我们返回计算出来的合计值数组 `sums`。

通过上面的示例，你可以轻松地给 `el-table` 添加表尾合计行。

element el-table 表尾

element el-table 表尾是指表格的底部区域，通常用于显示表格数据的汇总信息或者操作按钮等。在引用中，第一个方法解决了当表格出现横向滚动条时，合并栏在滚动条下方的问题。第二个引用展示了一个 el-table 表格的示例代码，其中使用了 show-summary 属性来显示表格的汇总信息。第三个引用中的 js 部分则是对表格底部区域进行操作的代码，通过监听 footerRight 数据的变化，动态修改表格底部区域的内容。