el-table获取点击行的数据
时间: 2023-08-15 11:07:52 浏览: 47
可以通过监听表格的 `row-click` 事件,在事件回调函数中获取点击行的数据。具体步骤如下:
1. 给 `el-table` 组件绑定 `row-click` 事件监听器:
```html
<el-table @row-click="handleRowClick">
```
2. 在 Vue 实例中定义 `handleRowClick` 方法,该方法接收两个参数:点击行的数据对象和点击行的索引。
```js
methods: {
handleRowClick(row, event, column) {
console.log('点击行的数据:', row)
}
}
```
这样,当用户点击某一行时,就会触发 `handleRowClick` 方法,你可以在该方法中拿到点击行的数据对象 `row`,然后就可以对该行数据进行操作了。
相关问题
el-table获取懒加载数据
以下是使用Element-ui的el-table获取懒加载数据的示例:
1. 在父组件中引入子组件表格,并向子组件传递表格数据和表头数据。
```html
<template>
<div>
<child-table :tableData="tableData" :tableColumns="tableColumns"></child-table>
</div>
</template>
<script>
import ChildTable from './ChildTable.vue';
export default {
components: {
ChildTable
},
data() {
return {
tableData: [], // 表格数据
tableColumns: [] // 表头数据
};
},
mounted() {
// 获取表格数据和表头数据的方法
this.getTableData();
},
methods: {
getTableData() {
// 发送请求获取表格数据和表头数据
// 将获取到的数据赋值给tableData和tableColumns
}
}
};
</script>
```
2. 在子组件中使用el-table渲染表格数据和表头数据。
```html
<template>
<div>
<el-table :data="tableData" :columns="tableColumns"></el-table>
</div>
</template>
<script>
export default {
props: {
tableData: {
type: Array,
default: () => []
},
tableColumns: {
type: Array,
default: () => []
}
}
};
</script>
```
通过以上示例,你可以在父组件中发送请求获取表格数据和表头数据,并将其传递给子组件,子组件使用el-table渲染数据。这样就实现了el-table的懒加载数据。
el-table 获取选择行的 案例
以下是一个示例代码,演示如何在 element-ui 的 el-table 组件中获取当前选中的行数据:
```html
<template>
<el-table ref="table" :data="tableData" @selection-change="handleSelectionChange">
<el-table-column type="selection"></el-table-column>
<el-table-column prop="name" label="姓名"></el-table-column>
<el-table-column prop="age" label="年龄"></el-table-column>
<el-table-column prop="gender" label="性别"></el-table-column>
</el-table>
</template>
<script>
export default {
data() {
return {
tableData: [
{ name: '小明', age: 18, gender: '男' },
{ name: '小红', age: 20, gender: '女' },
{ name: '小刚', age: 22, gender: '男' },
{ name: '小丽', age: 24, gender: '女' }
],
selectedRows: []
}
},
methods: {
handleSelectionChange(selection) {
this.selectedRows = selection;
}
}
}
</script>
```
在上述代码中,我们使用了 element-ui 的 el-table 组件,并且在该组件中添加了一个 type="selection" 的列,表示该列为选中列。我们在 el-table 标签上通过 @selection-change 监听事件,在事件处理函数 handleSelectionChange 中获取当前选中的行数据,然后将其存储在 selectedRows 中。
在 Vue.js 组件中,我们可以通过 $refs 来访问 el-table 组件,然后调用 getSelection 方法来获取当前选中的行数据。例如:
```js
const selectedRows = this.$refs.table.getSelection();
```
通过以上代码,我们可以在 Vue.js 中获取到当前选中的行数据。