CODEWITHSUNDEEP
vue.js
Xiaozhou Song
Xiaozhou Song

Reputation: 171

Vuejs span rows matches some condition

I have a table that is looped and listed lots items. There are two labels, one is called product name, and one is called load number. I want that when the loading number is the same, keep the product name in the same cell, like span product name row when their load number are the same.

I really have no idea how to do it. How can I do this? 

<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>

Upvotes: 0

Views: 327

Answers (1)

Filip Sobol
Filip Sobol

Reputation: 5491

Not sure if I understood your problem, but I hope this helps (Codepen):

Template:

<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;
      }, {});
    }
  }
});

Upvotes: 2

Related Questions