关于表格导出

1:静态页面

 <table id='partnerlistall' class="table table-hover table-striped table-bordered table-advanced tablesorter" style="display:none;position:absolute;left:-99999999px;margin-top: 10px" >
                                <thead>
                                    <tr class="topnav">
                                        <th>序号</th>
                                        <th>ID</th>
                                        <th>微信昵称</th>
                                        <th>姓名</th>
                                        <th>性别</th>
                                        <th>手机号</th>
                                        <th>等级名称</th>
                                        <th>推荐人/推荐人ID</th>
                                        <th>加入时间</th>
                                        <th>所属区域</th>
                                        <th>状态</th>
                                    </tr>
                                </thead>
                                <tbody id="education-news-data2"> </tbody>
</table>

2:js

//把数据渲染到education-news-data2里面
var dataParam1 = {
			page: 1,
			rows: 999,
		}

		$('#user_id').val() && (dataParam1.user = $('#user_id').val())
		$('#up_user_id').val() && (dataParam1.up_user = $('#up_user_id').val())
		$('#user_type').val() && (dataParam1.level_no = $('#level-name').find('option:selected').attr('data-level_no'))
		$('#user_type').val() && (dataParam1.classify_id = $('#user_type').val())

		$.ajax({
			url: interface_url + "filter/queryDistributorPageByCnd.do",
			type: 'post',
			dataType: 'json',
			data: JSON.stringify(dataParam1),
			contentType: 'application/json;charset=UTF-8',
			success: function (data) {
				console.log('导出的数据')
				console.log(data)
				if (data.retCode === 0) {
					renderTable1(data.data.list)
				} else {
					toastr.error(data.message);
				}
			},
			error: function () {
			}
		});

function renderTable1(list) {
		var str = ''
		var arr_name = ""
		$.each(list.list, function (index, obj) {
			var areaStr = ''
			console.log(obj)
			$.each(obj.areaList, function (index2, obj2) {
				console.log(obj2)
				/*
				var pro_name = obj2.pro_name || '';
				var city_name = obj2.city_name || '';
				var region_name = obj2.region_name || '';
				var str = pro_name == city_name ? pro_name : (pro_name + city_name)
				areaStr += '<p><span>' + (index2 + 1) + '、</span> ' + str + region_name +'</p>'
				*/
				areaStr += '<p><span>' + (index2 + 1) + '、</span> ' + (obj2.pro_name || '') + (obj2.city_name || '') + (obj2.region_name || '') + '</p>'
			})
			str += '<tr data-level_no = "' + obj.level_no + '" data-user_id="' + obj.user_id + '" data-distributor_id="' + obj.distributor_id + '">'
			str += '<td>' + (index + 1) + '</td>'
			str += '<td>' + (obj.user_id || '') + '</td>'
			str += '<td>' + (obj.user_name || '') + '</td>'
			str += '<td>' + (obj.reality_name || '') + '</td>'
			str += '<td>' + obj.sex_str + '</td>'
			str += '<td>' + (obj.user_phone || '') + '</td>'
			str += '<td>' + (obj.level_name || '') + '</td>'
			if (obj.up_user_id && obj.up_user_name) {
				str += '<td>' + (obj.up_user_name + '/' + obj.up_user_id || '') + '</td>'
			} else {
				str += '<td>' + (obj.up_user_name + '&nbsp;' + obj.up_user_id || '') + '</td>'
			}

			str += '<td>' + (obj.create_time || '') + '</td>'
			str += '<td>' + areaStr + '</td>'
			str += '<td>' + obj.status_str + '</td>'
			str += '</tr>'
			return obj;
		});
		if (list.length === 0) str = '<tr><td colspan="10" align="center">空</td></tr>'
		$("#education-news-data2").html(str);
	}

3:最后一步是导出表格了

		var print_page2=1;
		$("#partnerlist").click(function(){
			$("#partnerlistall").table2excel({
				// 不被导出的表格行的CSS class类
				exclude: ".noExl",
				// 导出的Excel文档的名称,(没看到作用)
				name: "Excel Document Name",
				// Excel文件的名称
				filename: "分销合伙人" + print_page2 + "页.xlsx"
			});
		})
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: element-ui是一款基于Vue.js的组件库,它提供了丰富的UI组件,让我们能够更轻松地开发Web应用程序。其中,Element提供了一个Table组件,用于展示和操作数据表格。 在element-ui的Table组件中,我们可以通过一些配置项来实现数据的导出功能。首先,我们可以使用Excel导出,Element提供了一个名为"el-table-export"的组件,我们只需将Table的数据传入该组件即可实现将数据导出为Excel文件。同时,我们还可以配置是否导出表格的头部信息,以及自定义导出文件的名称。 另外,我们也可以使用CSV导出数据,在Table组件中,可以通过配置"show-summary"属性来实现数据合计,然后将数据通过"el-table-column"的"sum-method"属性自定义合计的函数。最后,我们可以通过"el-table-column"组件的"label"属性来定义表格的列名,然后在表格下方添加一个"el-table-column"组件,将合计结果展示在该列上。通过这种方式,我们可以将合计结果一同导出为CSV文件。 总的来说,element-ui的Table组件提供了丰富的配置项和功能,使得我们能够灵活地进行数据导出。通过简单的配置和自定义函数,我们可以实现将表格数据导出为Excel或CSV文件,从而方便地保存和使用表格数据。 ### 回答2: Element 表格导出是指将 Element 组件中的表格数据导出到其他文件格式(如 Excel、CSV等)的操作。Element 是一个基于 Vue.js 的前端UI框架,提供了丰富的组件库以及实用的工具函数,包括了表格组件,用户可以在应用中使用 Element 的表格组件展示和操作数据。 Element 表格导出的功能是开发者在使用 Element 表格组件时很常用的一个需求。通过使用 Element 提供的方法,我们可以将表格中的数据导出为 Excel 或 CSV 文件,以便后续的数据处理或其他用途。 在 Element 中,我们可以通过以下步骤来实现表格导出: 1. 引入 Element 的相关组件和样式文件,确保项目中已正确安装了 Element 框架; 2. 创建一个 Element 表格组件,并通过设置数据源、列定义等属性来展示数据; 3. 在需要导出表格的地方,添加一个按钮或其他触发导出操作的事件; 4. 在事件处理函数中,使用 Element 提供的导出方法,将表格数据导出成指定格式的文件。 例如,如果要将表格数据导出为 Excel 文件,可以使用 Element 提供的 `exportCsv` 方法,传入需要导出表格数据和文件名,即可生成一个 Excel 文件供下载或保存。同样,如果要将表格数据导出为 CSV 文件,可以使用 `exportCsv` 方法,只需设置导出格式为 CSV 即可。 总之,Element 表格导出是 Element 框架提供的一个功能,可以帮助开发者方便地将表格数据导出为其他文件格式,以满足不同的需求和用途。通过 Element 的强大功能和简洁易用的接口,我们可以高效地实现表格导出功能。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值