javascript - 试图在点击上获取行数据
问题描述
单击一行时,我试图从该表中获取行数据,特别是 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
事件。只需听行单击并对返回的项目执行一些操作。
<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>
推荐阅读
- javascript - 创建一个反应项目
- tomcat - 当我尝试在 URL 中发送特殊字符时,Tomcat 正在返回 HTTP 状态 400 - 错误请求状态
- java - Eclipse Oxygen 中的 Spring Boot 项目
- excel - 在源工作表中没有唯一 ID 的 Ms Excel 中的索引和匹配
- sql - 为 INSERT、DELETE 触发事件创建触发器 TR1,如果事务在 SUNDAY 执行,则应触发触发器
- jquery - 如何在jQuery中计算自动成绩和备注
- python - 如何使用 Python REST API 从 VSTS (Azure DevOps) 中的查询中提取 WorkItems?
- vlsi - 在 VLSI 测试中,为什么我们在 DFT(可测试性设计)中的扫描插入之前执行 mbist?
- php - PHP Simple HTML DOM count span inside in in div of other div
- c++ - 为什么我的功能在使用 goto 时给了我一个“在 '}' 标记之前的预期主表达式”?