element表格汇总列带%字符串转换数字

如果你在使用 Element UI 表格时，需要对汇总列中的百分比字符串进行转换为数字，并计算平均值，可以使用 `formatter` 属性和 `sumText` 属性来实现。

假设我们有一个表格列 `percentage`，其中的数据都是百分比字符串，例如 `25.00%`，`50.00%`，`75.00%` 等等。我们需要对这些字符串进行转换为数字，并计算它们的平均值，并在表格底部的汇总列中显示。可以这样写：

<template>
  <div>
    <el-table :data="tableData" border stripe>
      <el-table-column label="Name" prop="name"></el-table-column>
      <el-table-column label="Percentage" prop="percentage" :formatter="percentageFormatter"></el-table-column>
      <el-table-column label="Amount" prop="amount" :formatter="amountFormatter"></el-table-column>
      <el-table-column label="Total" :label-class-name="['total']" :sum-text="percentageTotalText" :formatter="percentageTotalFormatter"></el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: 'John Doe', percentage: '25.00%', amount: 100 },
        { name: 'Jane Doe', percentage: '50.00%', amount: 200 },
        { name: 'Jim Smith', percentage: '75.00%', amount: 300 },
      ],
    }
  },
  methods: {
    percentageFormatter(row) {
      return row.percentage
    },
    amountFormatter(row) {
      return '$' + row.amount
    },
    percentageTotalFormatter({ total }) {
      return this.formatPercentage(total / this.tableData.length)
    },
    formatPercentage(value) {
      return (value * 100).toFixed(2) + '%'
    },
    percentageTotalText() {
      return 'Average'
    },
  },
}
</script>

这里使用了 `formatter` 属性来定义 `percentage` 列和 `amount` 列的显示格式。在 `percentageFormatter` 方法中，我们将百分比字符串直接返回。在 `amountFormatter` 方法中，我们将 `amount` 属性前添加 `$` 字符串。

在汇总列中，我们使用了 `:sum-text` 属性来定义汇总列的文本，使用 `:formatter` 属性来格式化汇总值。在 `percentageTotalFormatter` 方法中，我们将汇总值除以数据长度，得到平均值，并使用 `formatPercentage` 方法将其转换为百分比字符串。在 `percentageTotalText` 方法中，我们将汇总列的文本设置为 `Average`。

注意，在 `percentageTotalFormatter` 方法中，我们需要将百分比字符串转换为数字进行计算，可以使用 `parseFloat` 方法来实现。例如：

percentageTotalFormatter({ total }) {
  const percentageTotal = parseFloat(total) / this.tableData.length
  return this.formatPercentage(percentageTotal)
},

这样就可以在 Element UI 表格中对汇总列中的百分比字符串进行转换为数字，并计算平均值了。