element table 获取选中行

你可以使用以下代码获取选中行：

var table = document.getElementById("tableId");
var rows = table.getElementsByTagName("tr");
for (var i = ; i < rows.length; i++) {
rows[i].onclick = function() {
// 获取选中行
var selectedRow = this.rowIndex;
}
}

相关问题

elementui table获取选中行

### 回答1：
在 Element UI 的 table 组件中，可以使用 v-model 绑定一个变量来获取选中的行。例如:

<el-table v-model="selectedRows" @selection-change="handleSelectionChange">

其中 `selectedRows` 是用来存储选中行的变量，`handleSelectionChange` 是在选中行改变时触发的事件。

在 `handleSelectionChange` 方法中，可以访问到当前选中的行，例如:

handleSelectionChange(val) {
  console.log(val)
}

上面代码中的 val 就是当前选中的行，可以对其进行处理。

还可以使用ref获取到表格组件,然后使用$refs.tableRef.store.states.selection 来获取选中行

<el-table ref="tableRef" @selection-change="handleSelectionChange">

在handleSelectionChange中

handleSelectionChange(val) {
  console.log(this.$refs.tableRef.store.states.selection)
}

上面代码中 this.$refs.tableRef.store.states.selection 就是当前选中的行

### 回答2：
ElementUI是一款基于Vue.js的组件库，其中包括了Table表格组件。在项目中经常需要获取表格中选中的行，本篇就要介绍如何使用ElementUI Table组件获取选中行。

首先需要在Table组件中设置一个属性：`@selection-change`。该属性会在选中项发生改变时触发一个事件，我们可以在事件中获取选中的行数据。

示例代码如下：

<el-table @selection-change="handleSelectionChange" :data="tableData" v-loading="tableLoading" style="width: 100%">
  <el-table-column prop="name" label="姓名"></el-table-column>
  <el-table-column prop="age" label="年龄"></el-table-column>
  <el-table-column prop="address" label="地址"></el-table-column>
</el-table>

在该示例代码中，我们还使用了`:data`属性和`v-loading`指令来设置表格的数据和表格加载状态。

接下来要实现`handleSelectionChange`方法来获取选中的行数据。该方法接收一个参数`selectedRows`，它是一个数组，包含了当前选中的所有行数据对象。我们可以用这个数组来获取选中行的数据。

methods: {
  handleSelectionChange(selectedRows) {
    console.log(selectedRows); // 打印选中的行数据
  }
}

至此，我们已经实现了ElementUI Table获取选中行的功能。

如果我们还想让选择框的勾选状态和某些操作按钮的禁用状态与选中的行数据绑定，我们可以通过`:row-key`和`:row-selection`属性实现选中行的状态绑定。具体可以参考ElementUI官网提供的Table组件文档：https://element.eleme.cn/#/zh-CN/component/table#hang-shu-ju-kong-zhi。

总之，配合`@selection-change`事件和`handleSelectionChange`方法，我们可以在ElementUI Table组件中非常方便地获取选中行数据。

### 回答3：
ElementUI是一套基于Vue.js框架的组件库，为我们提供了一些非常便捷的组件和方法，其中表格（Table）是非常常用的组件之一，而获取表格中选中的行也是我们在实际开发中经常需要的功能。下面是一种简单的方法来实现ElementUI表格中获取选中行的功能：

1. 首先，在HTML模板中定义表格及相关的变量，代码如下：

<template>
<div>
<el-table
ref="table"
:data="tableData"
@selection-change="handleSelectionChange">
<el-table-column
type="selection"
width="55">
</el-table-column>
<el-table-column
prop="name"
label="Name"
width="180">
</el-table-column>
<el-table-column
prop="age"
label="Age"
width="100">
</el-table-column>
<el-table-column
prop="address"
label="Address">
</el-table-column>
</el-table>
<div v-show="selectionList.length">
<p>Selected: {{ selectionList }}</p>
</div>
</div>
</template>

<script>
export default {
data() {
return {
tableData: [
{ name: 'John', age: 26, address: 'New York' },
{ name: 'Jane', age: 24, address: 'Paris' },
{ name: 'Tom', age: 32, address: 'London' },
{ name: 'Mike', age: 29, address: 'Sydney' },
],
selectionList: []
};
},
methods: {
handleSelectionChange(val) {
this.selectionList = val.map(item => item.name);
}
}
};
</script>

2. 在data中定义一个空数组selectionList，用于存放选中的行。

3. 在el-table中设置@selection-change事件，当用户在表格中选中或取消选中行时触发。在事件处理函数handleSelectionChange中，我们可以通过参数val获取当前选中的行的信息（数组形式），然后将选中行的名称存入selectionList数组中。

4. 在模板中展示选中的行信息。

实现以上代码后，我们在表格中选择行，就可以实现获取选中行信息的功能。这种方法适用于需要获取单选或多选表格的选中行信息。可以根据实际需要对代码进行修改，例如通过表格数据的id等唯一标识进行操作。

element el-table 获取选中的行

可以使用 el-table 的 getSelection 方法获取选中的行数据。具体实现可以参考以下代码：

// 获取 el-table 实例
const table = this.$refs.table

// 获取选中的行数据
const selectedRows = table.getSelection()

// 打印选中的行数据
console.log(selectedRows)