element-plus el-table获取行数据
时间: 2023-03-27 12:01:00 浏览: 290
可以通过监听 el-table 的 row-click 或者 row-dblclick 事件,在事件处理函数中获取当前行的数据。例如:
```javascript
<el-table @row-click="handleRowClick">
<!-- 表格列定义 -->
</el-table>
// 在 methods 中定义事件处理函数
methods: {
handleRowClick(row) {
console.log(row); // 当前行的数据
}
}
```
相关问题
element-plus el-table 多选数据回显
在使用 element-plus 的 el-table 进行多选时,可以通过绑定一个对象来实现数据回显。具体实现方法如下:
1. 在获取表格数据时,将数据转化为一个以 id 为键,整个数据对象为值的字典对象。
2. 在获取回显数据时,将数据转化为一个以 deviceId 为键,整个数据对象为值的字典对象。
3. 在 el-table 的 @select 事件中,将选中的数据对象存入回显数据字典对象中。
4. 在 el-table 的 @select-all 事件中,遍历所有数据对象,将其存入回显数据字典对象中。
5. 在 el-table 的 :row-selected 事件中,根据回显数据字典对象中是否存在当前数据对象的 id 或 deviceId,来判断当前数据对象是否应该被选中。
具体代码实现可以参考以下示例:
```
<template>
<el-table
ref="tableRef"
:data="tableData"
@select="handleSelect"
@select-all="handleSelectAll"
:row-selected="isRowSelected"
row-key="id"
>
<el-table-column type="selection" width="55" />
<el-table-column type="index" label="序号" width="150" />
<el-table-column prop="name" label="电厂名称" />
</el-table>
</template>
<script>
export default {
data() {
return {
tableData: [], // 表格数据
selectedData: {}, // 回显数据
}
},
methods: {
// 获取表格数据
async fetchData() {
const res = await fetchTableData()
this.tableData = res.data.reduce((dic, item) => {
dic[item.id] = item
return dic
}, {})
},
// 获取回显数据
async fetchSelectedData() {
const res = await fetchSelectedData()
this.selectedData = res.data.reduce((dic, item) => {
dic[item.deviceId] = item
return dic
}, {})
},
// 处理单个选中事件
handleSelect(selection, row) {
this.$set(this.selectedData, row.deviceId, row)
},
// 处理全选事件
handleSelectAll(selection) {
Object.values(this.tableData).forEach(row => {
this.$set(this.selectedData, row.deviceId, row)
})
},
// 判断行是否被选中
isRowSelected(row) {
return !!this.selectedData[row.id || row.deviceId]
},
},
mounted() {
this.fetchData()
this.fetchSelectedData()
},
}
</script>
```
element-plus el-table xlsx数据导出
要使用element-plus el-table实现xlsx数据导出,需要使用xlsx和file-saver插件。
1. 第一步是安装和引入xlsx和file-saver插件。
```
npm install xlsx file-saver --save
```
```javascript
import XLSX from 'xlsx'
import FileSaver from 'file-saver'
```
2. 第二步是编写xlsx导出函数,该函数将读取el-table中的数据并将其写入xlsx工作表。
```javascript
export function exportExcel(tableData, fileName) {
const worksheet = XLSX.utils.json_to_sheet(tableData)
const workbook = XLSX.utils.book_new()
XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1')
const buffer = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' })
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), fileName)
}
```
3. 最后,在事件处理程序中调用导出函数,并传递el-table数据和文件名作为参数。
```javascript
exportExcel(this.tableData, '文件名.xlsx')
```
完整示例代码:
```vue
<template>
<el-table :data="tableData" border>
<el-table-column prop="id" label="ID"></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="address" label="地址"></el-table-column>
<template slot="summary">
<el-button type="primary" @click="handleExport">导出</el-button>
</template>
</el-table>
</template>
<script>
import XLSX from 'xlsx'
import FileSaver from 'file-saver'
export default {
data() {
return {
tableData: [
{
id: '1',
name: '张三',
age: '20',
address: '上海'
},
{
id: '2',
name: '李四',
age: '30',
address: '北京'
},
{
id: '3',
name: '王五 ',
age: '40',
address: '广州'
}
]
}
},
methods: {
handleExport() {
const worksheet = XLSX.utils.json_to_sheet(this.tableData)
const workbook = XLSX.utils.book_new()
XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1')
const buffer = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' })
FileSaver.saveAs(new Blob([buffer], { type: 'application/octet-stream' }), '数据.xlsx')
}
}
}
</script>
```