vue數組排序加計算百分比

以下是使用Vue对数组进行排序并计算百分比的示例代码：

<template>
  <div>
    <h2>商品列表</h2>
    <table>
      <thead>
        <tr>
          <th>商品名称</th>
          <th>销售量</th>
          <th>销售占比</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item, index) in sortedItems" :key="index">
          <td>{{ item.name }}</td>
          <td>{{ item.sales }}</td>
          <td>{{ item.percent }}%</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { name: '商品A', sales: 100 },
        { name: '商品B', sales: 200 },
        { name: '商品C', sales: 300 },
        { name: '商品D', sales: 400 },
        { name: '商品E', sales: 500 },
      ],
    };
  },
  computed: {
    // 对items数组进行排序
    sortedItems() {
      return this.items.sort((a, b) => b.sales - a.sales);
    },
  },
  methods: {
    // 计算百分比
    calculatePercent(sales) {
      const totalSales = this.items.reduce((acc, cur) => acc + cur.sales, 0);
      return ((sales / totalSales) * 100).toFixed(2);
    },
  },
  created() {
    // 计算每个商品的百分比
    this.items.forEach((item) => {
      item.percent = this.calculatePercent(item.sales);
    });
  },
};
</script>