问题描述
当单击一行时,我试图从该表中获取行数据,特别是 ID。我已经能够做到这一点,因为我将 ID 添加到行并利用 event
以这种方式获取行数据。我的问题是,如果我点击其中一个子(嵌套)行,我需要知道它们的 ID(已经用 event
这样做了),但我还需要知道父行的 ID。例如,如果我点击 Test 320 行,子行 ID 是 320,但我们如何知道父行 ID (2014 Golf -->5)?
我如何获取被点击的行 ID:
this.rowId = event.target.parentNode.childNodes[1].innerHTML;
<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>
解决方法
el-table 有一个内置的 row-click
event。只需听行单击并处理返回的项目。
<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>