在 PrimeVue 数据表中添加增量计数列

Question

我正在使用 primevue 基本数据表，它在 VUE 3、composition api 中运行良好。 我添加了一个模板列，该列显示每行递增 1 并从 1 开始。如下图所示，数字相差甚远。 关于如何修复有什么想法吗？

这是沙箱链接

Answer 1

您可以向

products

数组添加另一个属性并将其显示在表中：

<template>
  <div>
    <DataTable :value="productsWithRowNumber" responsiveLayout="scroll">
      <Column field="rowNumber" header="#"></Column>
      <Column field="code" header="Code"></Column>
      <Column field="name" header="Name"></Column>
      <Column field="category" header="Category"></Column>
      <Column field="quantity" header="Quantity"></Column>
    </DataTable>
  </div>
</template>

<script>
import { ref, computed, onMounted } from "vue";
import ProductService from "./service/ProductService";

export default {
  setup() {
    onMounted(() => {
      productService.value
        .getProductsSmall()
        .then((data) => (products.value = data));
    });

    const products = ref([]);
    const productService = ref(new ProductService());

    const productsWithRowNumber = computed(() =>
      products.value.map((p, i) => ({ rowNumber: i + 1, ...p }))
    );

    return { productsWithRowNumber, productService };
  },
};
</script>         

但请注意，只有在不更改表格排序的情况下，这才能正常工作。

Answer 2

使用

products

数组的索引键怎么样？然后您可以将计数输出为

index + 1

，这样它就会从

1

而不是

0

开始。