前端获取el-table列表数据后,怎么不请求服务器,实现勾选导出
时间: 2024-03-17 17:40:53 浏览: 22
如果前端已经成功获取了el-table列表数据,那么你可以在前端通过勾选来导出数据,而无需再次请求服务器。具体实现方法如下:
1. 在el-table中添加一个checkbox列,实现勾选功能。
2. 在checkbox列的header中添加一个勾选框,实现全选功能。
3. 绑定勾选事件,将勾选的数据存储到一个数组中。
4. 点击导出按钮时,将存储的勾选数据通过js-xlsx等工具转换成Excel文件并下载。
下面是一个示例代码,供你参考:
```vue
<el-table :data="tableData" style="width: 100%">
<el-table-column type="selection" width="55">
<template slot-scope="scope">
<el-checkbox v-model="checkedItems" :label="scope.row"></el-checkbox>
</template>
<template slot="header">
<el-checkbox v-model="checkAll" @change="handleCheckAllChange"></el-checkbox>
</template>
</el-table-column>
<el-table-column prop="name" label="姓名"></el-table-column>
<el-table-column prop="age" label="年龄"></el-table-column>
</el-table>
<el-button type="primary" @click="handleExport">导出</el-button>
```
```javascript
export default {
data() {
return {
tableData: [
{ name: '张三', age: 18 },
{ name: '李四', age: 20 },
{ name: '王五', age: 22 }
],
checkedItems: [],
checkAll: false
}
},
methods: {
handleCheckAllChange(val) {
this.checkedItems = val ? this.tableData : []
},
handleExport() {
const header = ['姓名', '年龄']
const data = this.checkedItems.map(item => [item.name, item.age])
const worksheet = XLSX.utils.aoa_to_sheet([header, ...data])
const workbook = XLSX.utils.book_new()
XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1')
XLSX.writeFile(workbook, 'data.xlsx')
}
}
}
```
在这个示例中,我们通过el-checkbox实现了勾选和全选功能,并将勾选的数据存储在了checkedItems数组中。当点击导出按钮时,我们将checkedItems数组中的数据转换成Excel文件并下载。