不知道小伙伴们有没有遇到过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文件名。

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

Logo

前往低代码交流专区

更多推荐