vue el-table通过弹窗显示隐藏表格中的列,弹窗有el-checkbox全选el-checkbox-group显示表格所有的列,刚进页面时表格显示部分的列,弹窗中勾选全选时表格则显示所有的列,表格未显示所有的列,如何下载完成的表格数据
时间: 2024-03-21 16:43:08 浏览: 67
对于未显示的列,可以通过设置 `<el-table-column :visible="false">` 的方式来隐藏列,然后在弹窗中通过 `<el-checkbox>` 和 `<el-checkbox-group>` 组件来控制列的显示和隐藏。当用户勾选全选时,可以通过遍历表格的所有列来显示所有列,代码如下:
```
<template>
<div>
<el-table :data="tableData">
<el-table-column v-for="column in columns" :key="column.prop" :label="column.label" :prop="column.prop" :visible="column.visible"></el-table-column>
</el-table>
<el-dialog :visible.sync="dialogVisible">
<el-checkbox @change="handleCheckAll">全选</el-checkbox>
<el-checkbox-group v-model="checkedColumns">
<el-checkbox v-for="column in columns" :key="column.prop" :label="column.prop">{{ column.label }}</el-checkbox>
</el-checkbox-group>
</el-dialog>
<el-button @click="downloadTableData">下载表格数据</el-button>
</div>
</template>
<script>
export default {
data() {
return {
tableData: [], // 表格数据
columns: [ // 表格列配置
{ label: '姓名', prop: 'name', visible: true },
{ label: '年龄', prop: 'age', visible: true },
{ label: '地址', prop: 'address', visible: false },
{ label: '邮箱', prop: 'email', visible: false }
],
dialogVisible: false, // 弹窗是否可见
checkedColumns: [] // 已勾选的列
}
},
methods: {
handleCheckAll(value) {
if (value) {
// 显示所有列
this.columns.forEach(column => {
column.visible = true
})
} else {
// 隐藏所有列
this.columns.forEach(column => {
column.visible = false
})
}
},
downloadTableData() {
// 下载表格数据的代码
}
}
}
</script>
```
至于如何下载表格数据,可以借助第三方库 `file-saver` 和 `xlsx` 来实现,具体实现可以参考以下代码:
```
<template>
<div>
<el-table :data="tableData">
<el-table-column v-for="column in columns" :key="column.prop" :label="column.label" :prop="column.prop" :visible="column.visible"></el-table-column>
</el-table>
<el-dialog :visible.sync="dialogVisible">
<el-checkbox @change="handleCheckAll">全选</el-checkbox>
<el-checkbox-group v-model="checkedColumns">
<el-checkbox v-for="column in columns" :key="column.prop" :label="column.prop">{{ column.label }}</el-checkbox>
</el-checkbox-group>
</el-dialog>
<el-button @click="downloadTableData">下载表格数据</el-button>
</div>
</template>
<script>
import XLSX from 'xlsx'
import { saveAs } from 'file-saver'
export default {
data() {
return {
tableData: [], // 表格数据
columns: [ // 表格列配置
{ label: '姓名', prop: 'name', visible: true },
{ label: '年龄', prop: 'age', visible: true },
{ label: '地址', prop: 'address', visible: false },
{ label: '邮箱', prop: 'email', visible: false }
],
dialogVisible: false, // 弹窗是否可见
checkedColumns: [] // 已勾选的列
}
},
methods: {
handleCheckAll(value) {
if (value) {
// 显示所有列
this.columns.forEach(column => {
column.visible = true
})
} else {
// 隐藏所有列
this.columns.forEach(column => {
column.visible = false
})
}
},
downloadTableData() {
// 表格数据
const data = [this.columns.map(column => column.label), ...this.tableData.map(item => this.columns.map(column => item[column.prop]))]
// 已勾选的列
const checkedColumns = this.checkedColumns.length > 0 ? this.checkedColumns : this.columns.filter(column => column.visible).map(column => column.prop)
// 生成 workbook
const workbook = XLSX.utils.book_new()
const worksheet = XLSX.utils.aoa_to_sheet(data.filter((_, index) => index === 0 || checkedColumns.includes(this.columns[index - 1].prop)))
XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1')
// 导出文件
const buffer = XLSX.write(workbook, { type: 'buffer' })
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'table-data.xlsx')
}
}
}
</script>
```
阅读全文