Question

我有一个循环的表并列出了很多项目。有两个标签，一个称为产品名称，另一个称为装载号。我希望当加载编号相同时，将产品名称保留在同一单元格中，例如当其加载编号相同时，跨越产品名称行。

我真的不知道该怎么做。我怎样才能做到这一点？

<el-table-column prop="product"
                 sortable="custom"
                 :label="$t('Product name')"
                 width=""
                 v-if="checkedCols.indexOf('Product Name') >= 0">
</el-table-column>

<el-table-column prop="po_number"
                 sortable="custom"
                 :label="$t('Load number')"
                 width=""
                 v-if="checkedCols.indexOf('Load Number') >= 0">
  <template slot-scope="scope">
      <a target="_blank"
         href="#" @click="openPhaseIUrl(scope.row.po_number, 'load')">
        {{scope.row.po_number}}
      </a>
  </template>
</el-table-column>

Answer 1

不确定我是否理解您的问题，但我希望这会有所帮助（Codepen）：

模板：

<div id="app">
  <table>
    <tr>
      <th>PO Number</th>
      <th>Product name</th>
    </tr>

    <tr v-for="(products, po_number) in productsGroupedByPoNumber">
      <td v-text="po_number" />
      <td>
        <p v-for="product in products" v-text="product" />
      </td>
    </tr>
  </table>
</div>

使用Javascript：

new Vue({
  el: "#app",

  data: {
    products: [
      { name: "Product #1", po_number: "PO #1" },
      { name: "Product #2", po_number: "PO #1" },
      { name: "Product #3", po_number: "PO #1" },
      { name: "Product #4", po_number: "PO #2" },
      { name: "Product #5", po_number: "PO #2" },
      { name: "Product #6", po_number: "PO #3" },
    ]
  },

  computed: {
    productsGroupedByPoNumber() {
      return this.products.reduce((carry, product) => {
        if (!carry.hasOwnProperty(product.po_number)) {
          carry[product.po_number] = [];
        }

        carry[product.po_number].push(product.name);

        return carry;
      }, {});
    }
  }
});

Vuejs跨行符合某些条件

1 个答案: