javascriptvue.jshtml-tabledatatableelement-ui

Trying to get row data onClick


I'm trying to get row data from this table when a row is clicked, specifically the ID. I'm able to do this already because I added the IDs to the rows and utilize event to get the row data that way. My issue is that if I click on one of the child (nested)rows, I need to know their IDs(already doing that with event) but I also need to know the ID of the parent row. So for example, if I click on the Test 320 row, the child row ID is 320 but how can we also know the parent row ID (2014 Golf -->5)?

How I'm getting the row IDs for the ones that get clicked:

this.rowId = event.target.parentNode.childNodes[1].innerHTML;

enter image description here

      <input type="text" v-model="search" placeholder="Filter by Model or Trim" class="filter" />
      <el-table :data="tableData" class="padded-table" height="600" style="width: 100%" row-key="id">
        <el-table-column prop="name" label="TRIM" min-width="200"> </el-table-column>
        <el-table-column prop="technical" label="TECHNICAL" min-width="80"> </el-table-column>
        <el-table-column prop="customer_delivery" label="CUSTOMER DELIVERY" min-width="120"> </el-table-column>
        <el-table-column prop="customer_acceptance" label="CUSTOMER ACCEPTANCE" min-width="120"> </el-table-column>
        <el-table-column prop="off_the_truck" label="OFF THE TRUCK" min-width="80"> </el-table-column>
        <el-table-column prop="vim" label="VIM" min-width="80"> </el-table-column>
      </el-table>

Solution

  • el-table has a built-in row-click event. Just listen to row-click and do something with the returned item.

    <template>
      <el-table
        :data="tableData"
        @row-click="handleRowClick" // this line
        class="padded-table" 
        height="600" 
        style="width: 100%" 
        row-key="id"
      >
      ...
      </el-table>
    </template>
    
    <script>
    export default {
      ...
      methods: {
        handleRowClick(row) {
          console.log(row);
        }
      }
    }
    </script>