vue实现透视表

Vue 实现透视表

透视表（Pivot Table）是一种数据汇总工具，用于对数据进行分组、聚合和展示。在 Vue 中可以通过以下方法实现透视表功能。

使用第三方库

推荐使用 vue-pivot-table 或 pivot-table.js 等库快速实现透视表功能。

安装 vue-pivot-table：

npm install vue-pivot-table

基本用法：

<template>
  <vue-pivot-table
    :data="tableData"
    :rows="rowFields"
    :cols="colFields"
    :vals="valueFields"
    :aggregator="aggregator"
  />
</template>

<script>
import VuePivotTable from 'vue-pivot-table';

export default {
  components: { VuePivotTable },
  data() {
    return {
      tableData: [
        { category: 'A', subcategory: 'X', value: 10 },
        { category: 'A', subcategory: 'Y', value: 20 },
        { category: 'B', subcategory: 'X', value: 30 },
        { category: 'B', subcategory: 'Y', value: 40 }
      ],
      rowFields: ['category'],
      colFields: ['subcategory'],
      valueFields: ['value'],
      aggregator: 'sum'
    };
  }
};
</script>

手动实现透视表逻辑

如果希望手动实现透视表逻辑，可以通过以下步骤完成数据分组和聚合。

定义数据分组函数：

function groupBy(data, keys, aggregator) {
  const groups = {};
  data.forEach(item => {
    const groupKey = keys.map(key => item[key]).join('|');
    if (!groups[groupKey]) {
      groups[groupKey] = { ...item };
    } else {
      groups[groupKey].value += item.value;
    }
  });
  return Object.values(groups);
}

在 Vue 组件中使用：

<template>
  <table>
    <thead>
      <tr>
        <th v-for="header in headers" :key="header">{{ header }}</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="row in pivotedData" :key="row.category + row.subcategory">
        <td>{{ row.category }}</td>
        <td>{{ row.subcategory }}</td>
        <td>{{ row.value }}</td>
      </tr>
    </tbody>
  </table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { category: 'A', subcategory: 'X', value: 10 },
        { category: 'A', subcategory: 'Y', value: 20 },
        { category: 'B', subcategory: 'X', value: 30 },
        { category: 'B', subcategory: 'Y', value: 40 }
      ],
      headers: ['Category', 'Subcategory', 'Value']
    };
  },
  computed: {
    pivotedData() {
      return groupBy(this.tableData, ['category', 'subcategory'], 'sum');
    }
  }
};
</script>

添加交互功能

允许用户动态选择行、列和聚合字段：

<template>
  <div>
    <select v-model="selectedRows">
      <option v-for="field in fields" :key="field" :value="field">{{ field }}</option>
    </select>
    <select v-model="selectedCols">
      <option v-for="field in fields" :key="field" :value="field">{{ field }}</option>
    </select>
    <vue-pivot-table
      :data="tableData"
      :rows="[selectedRows]"
      :cols="[selectedCols]"
      :vals="['value']"
      :aggregator="'sum'"
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { category: 'A', subcategory: 'X', value: 10 },
        { category: 'A', subcategory: 'Y', value: 20 },
        { category: 'B', subcategory: 'X', value: 30 },
        { category: 'B', subcategory: 'Y', value: 40 }
      ],
      fields: ['category', 'subcategory'],
      selectedRows: 'category',
      selectedCols: 'subcategory'
    };
  }
};
</script>

样式定制

通过 CSS 自定义透视表样式：

.pivot-table {
  border-collapse: collapse;
  width: 100%;
}

.pivot-table th, .pivot-table td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
}

.pivot-table th {
  background-color: #f2f2f2;
}

.pivot-table tr:nth-child(even) {
  background-color: #f9f9f9;
}

这些方法提供了从简单到复杂的透视表实现方案，可以根据项目需求选择合适的方案。