vue.js 尝试在单击时获取行数据

t98cgbkg 于 2023-10-23 发布在 Vue.js

关注(0)|答案(1)|浏览(128)

我试图在单击行时从该表中获取行数据，特别是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>

vue.js

来源：https://stackoverflow.com/questions/67329894/trying-to-get-row-data-onclick

1条答案

按热度按时间

ctehm74n1#

el-table有一个内置的row-click事件。只需要听一下行单击，然后对返回的项做些什么。

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

赞(0）回复(0）举报 2023-10-23

我来回答

vue.js 尝试在单击时获取行数据

1条答案

相关问题

热门标签

最新问答