Vue+Element-ui实例_el-table可选列（字段）导出Excel

不知道小伙伴们有没有遇到过table表格导出Excel时，领导说“我不想全部导出，能不能选择我想导出的列（字段）”，心里嘀咕“你不能用Excel去操作嘛”，好叭，还是我来吧，下面这篇文章就简单的介绍了如何对el-table表格进行选择列（字段）的导出，进行了组件的封装处理，希望大家喜欢，如有纰漏望指正，谢谢

主要需要解决的问题：

（1）怎么样对展示的table表格进行选择列（字段）的处理

（2）v-if和v-show的不同处理

（3）如何进行组件封装

效果图如下：

下面是代码部分：

首先要引入插件，在控制台输入，并在子组件中引入

npm install --save xlsx file-saver

 import FileSaver from "file-saver";
 import XLSX from "xlsx";

子组件：

<template>
	<div class="selectExportExcel">
		<div class="exportBtn">
			<el-button style="float: right;" type="warning" plain @click="getExportDt">导出<i
					class="el-icon-download el-icon--right"></i></el-button>
		</div>
		<div class="hideTable">
			<el-table v-show="false" id="exportTable" height="300" :data="tableData">
				<template v-for="(item, index) in tableHeader">
					<el-table-column v-if="item.checked" :key="index" :prop="item.property" :label="item.colName" />
				</template>
			</el-table>
		</div>
	</div>
</template>

<script>
	import FileSaver from "file-saver";
	import XLSX from "xlsx";
	export default{
		name:'selectExportExcel',
		props: {
			exportData: {
				type: Object,
				default () {
					return {}
				}
			}
		},
		data(){
			return{
				tableData:this.exportData.tableData,
				tableHeader:this.exportData.tableHeader,
				excelName:this.exportData.excelName+'.xlsx'
			}
		},
		methods:{
			/* 导出数据到Excel表 */
			exportExcel(id) {
				/* generate workbook object from table */
				var xlsxParam = {
					raw: true
				} // 导出的内容只做解析，不进行格式转换
				var wb = XLSX.utils.table_to_book(document.querySelector(id), xlsxParam)
				
				/* get binary string as output */
				var wbout = XLSX.write(wb, {
					bookType: 'xlsx',
					bookSST: true,
					type: 'array'
				})
				try {
					FileSaver.saveAs(new Blob([wbout], {
						type: 'application/octet-stream'
					}), this.excelName)
				} catch (e) {
					if (typeof console !== 'undefined') {
						console.log(e, wbout)
					}
				}
				return wbout
			},
			/* 导出 */
			getExportDt(){
				let isExport = false;
				// 这里是我们是获取表格数据的请求方法，根据自己的项目请求方法切换一下就行
				this.tableHeader.forEach(item => {
					if(item.checked){
						isExport = true;
					}
				})
				if (isExport) {
					this.exportExcel('#exportTable');
					this.$message({
						type: 'success',
						message: "导出成功"
					})
				} else{
					this.$message({
						type: 'error',
						message: "至少选择一个字段"
					})
				}
			}
		}
	}
</script>

<style>
	.selectExportExcel{
		float: right;
	}
</style>

父组件：

<template>
	<div>
		<el-row style="margin-top:20px;">
			<el-card>
				<div slot="header" class="clearfix">
					<span>table数据</span>
					<selectExportExcel :exportData="exportData"></selectExportExcel>
				</div>
				<el-col>
					<div class="showTable">
						<el-table :data="exportData.tableData" border height="500px" style="width: 100%">
							<template v-for="(item, index) in exportData.tableHeader">
								<el-table-column :key="index" :prop="item.property">
									<template slot="header" slot-scope="scope">
										<el-checkbox v-model="item.checked">{{item.colName}}</el-checkbox>
									</template>
								</el-table-column>
							</template>
						</el-table>
					</div>
				</el-col>
			</el-card>
		</el-row>
	</div>
</template>

<script>
	import FileSaver from "file-saver";
	import XLSX from "xlsx";
	import selectExportExcel from '../../components/selectExportExcel.vue';

	export default {
		name: 'tableTest',
		components: {
			"selectExportExcel": selectExportExcel,
		},
		data() {
			return {
				//导出Excel组件数据
				exportData: {
					tableHeader: [{
							checked: true, // 这里设置checked为true是默认勾选状态
							colName: '日期',
							property: 'date'
						},
						{
							checked: true,
							colName: '姓名',
							property: 'name',
						},
						{
							checked: true,
							colName: '地址',
							property: 'address'
						}
					],
					tableData: [{
							date: '2016-05-02',
							name: '王小虎',
							address: '上海市普陀区金沙江路 1518 弄'
						},
						{
							date: '2016-05-04',
							name: '张小强',
							address: '上海市普陀区金沙江路 1517 弄'
						},
						{
							date: '2016-05-01',
							name: '朱小明',
							address: '上海市普陀区金沙江路 1519 弄'
						},
						{
							date: '2016-05-03',
							name: '王小虎',
							address: '上海市普陀区金沙江路 1516 弄'
						}
					],
					excelName: '测试导出'
				},
			}
		},
		methods: {
			
		},
		mounted() {

		}
	}
</script>

<style>
</style>

下面是对上面问题的理解：

（1）怎么样对展示的table表格进行选择列（字段）的处理

<el-table :data="exportData.tableData" border height="500px" style="width: 100%">
                            <template v-for="(item, index) in exportData.tableHeader">
                                <el-table-column :key="index" :prop="item.property">
                                    <template slot="header" slot-scope="scope">
                                        <el-checkbox v-model="item.checked">{{item.colName}}</el-checkbox>
                                    </template>
                                </el-table-column>
                            </template>
     </el-table>

 使用el-table自定义表头，进行表头处理，让表头（列）字段带有选择框。

但是这并不能对此table表格进行筛选处理，因此，需要在子组件中创建另一个table，不同的是，它使用v-if进行对刚刚选择的列进行处理，而且此table表格需要使用v-show隐藏。

<el-table v-show="false" id="exportTable" height="300" :data="tableData">
                <template v-for="(item, index) in tableHeader">
                    <el-table-column v-if="item.checked" :key="index" :prop="item.property" :label="item.colName" />
                </template>
</el-table>

（2）v-if和v-show的不同处理

v-if是不加载dom，v-show是把dom隐藏起来，v-show仅仅是把元素的display属性设置为none，列依然存在，导出的时候还是导出全部列数据，所以使用v-if。

（3）如何进行组件封装

在子组件中写入需要父组件传过来的数据

props: {
            exportData: {
                type: Object,
                default () {
                    return {}
                }
            }
        },

 父组件传值

exportData.tableData是table数据，exportData.tableHeader是表头数据，exportData.excelName是导出的Excel文件名。

好了，这次文章就写到这里啦，若内容、代码有不妥的地方，望斧正！谢谢。