From 164d07fa933ea5602effc69f7651f84706378131 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=B0=B1=E7=9C=A0=E5=84=80=E5=BC=8F?= <854085467@qq.com> Date: Wed, 10 Aug 2022 01:31:49 +0800 Subject: [PATCH] =?UTF-8?q?=E2=9C=A8(component):=20=E5=AE=9E=E7=8E=B0=20ta?= =?UTF-8?q?ble=20=E5=A4=8D=E6=9D=82=E8=A1=A8=E5=A4=B4=20=E4=B8=8E=20?= =?UTF-8?q?=E5=8D=95=E5=85=83=E6=A0=BC=E5=90=88=E5=B9=B6=20=E7=9A=84?= =?UTF-8?q?=E5=AF=BC=E5=87=BA=E5=85=BC=E5=AE=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/component/table/TableRow.vue | 29 ++++- .../component/src/component/table/index.vue | 103 +++++++++++------- .../src/document/zh-CN/components/table.md | 2 +- 3 files changed, 90 insertions(+), 44 deletions(-) diff --git a/package/component/src/component/table/TableRow.vue b/package/component/src/component/table/TableRow.vue index f70da8db..36696e0b 100644 --- a/package/component/src/component/table/TableRow.vue +++ b/package/component/src/component/table/TableRow.vue @@ -176,7 +176,11 @@ const renderFixedStyle = (column: any, columnIndex: number) => { if (column.fixed == "left") { var left = 0; for (var i = 0; i < columnIndex; i++) { - if (props.columns[i].fixed && props.columns[i].fixed == "left" && props.tableColumnKeys.includes(props.columns[i].key)) { + if ( + props.columns[i].fixed && + props.columns[i].fixed == "left" && + props.tableColumnKeys.includes(props.columns[i].key) + ) { left = left + props.columns[i]?.width.replace("px", ""); } } @@ -184,7 +188,11 @@ const renderFixedStyle = (column: any, columnIndex: number) => { } else { var right = 0; for (var i = columnIndex + 1; i < props.columns.length; i++) { - if (props.columns[i].fixed && props.columns[i].fixed == "right" && props.tableColumnKeys.includes(props.columns[i].key)) { + if ( + props.columns[i].fixed && + props.columns[i].fixed == "right" && + props.tableColumnKeys.includes(props.columns[i].key) + ) { right = right + props.columns[i]?.width.replace("px", ""); } } @@ -193,7 +201,10 @@ const renderFixedStyle = (column: any, columnIndex: number) => { } else { var isLast = true; for (var i = columnIndex + 1; i < props.columns.length; i++) { - if (props.columns[i].fixed == undefined && props.tableColumnKeys.includes(props.columns[i].key)) { + if ( + props.columns[i].fixed == undefined && + props.tableColumnKeys.includes(props.columns[i].key) + ) { isLast = false; } } @@ -207,7 +218,11 @@ const renderFixedClassName = (column: any, columnIndex: number) => { if (column.fixed == "left") { var left = true; for (var i = columnIndex + 1; i < props.columns.length; i++) { - if (props.columns[i].fixed && props.columns[i].fixed == "left" && props.tableColumnKeys.includes(props.columns[i].key)) { + if ( + props.columns[i].fixed && + props.columns[i].fixed == "left" && + props.tableColumnKeys.includes(props.columns[i].key) + ) { left = false; } } @@ -215,7 +230,11 @@ const renderFixedClassName = (column: any, columnIndex: number) => { } else { var right = true; for (var i = 0; i < columnIndex; i++) { - if (props.columns[i].fixed && props.columns[i].fixed == "right" && props.tableColumnKeys.includes(props.columns[i].key)) { + if ( + props.columns[i].fixed && + props.columns[i].fixed == "right" && + props.tableColumnKeys.includes(props.columns[i].key) + ) { right = false; } } diff --git a/package/component/src/component/table/index.vue b/package/component/src/component/table/index.vue index bb8a94cb..90bf2a7b 100644 --- a/package/component/src/component/table/index.vue +++ b/package/component/src/component/table/index.vue @@ -325,47 +325,55 @@ const print = function () { document.body.innerHTML = oldContent; }; +/** + * excel 导出 + */ const exportData = () => { - const head: any = []; - const body: any = []; - tableColumns.value.forEach((item) => { - try { - tableDataSource.value.forEach((dataItem) => { - if (dataItem[item.key] != undefined) { - head.push(item.title); - throw new Error("exception"); - } - }); - } catch (e) {} - }); - tableDataSource.value.forEach((item) => { - let obj: any = []; - tableColumns.value.forEach((tableColumn) => { + var tableStr = ``; + for(let tableHeadColumn of tableHeadColumns.value){ + tableStr += ''; + for(let column of tableHeadColumn){ + tableStr += `${column.title}` + } + tableStr += ''; + } + tableDataSource.value.forEach((item, rowIndex) => { + tableStr += '' + tableBodyColumns.value.forEach((tableColumn, columnIndex) => { Object.keys(item).forEach((name) => { if (tableColumn.key === name) { - obj.push(item[name]); + const rowColSpan = props.spanMethod(item, tableColumn, rowIndex, columnIndex); + const rowspan = rowColSpan ? rowColSpan[0] : 1; + const colspan = rowColSpan ? rowColSpan[1] : 1; + if(rowspan != 0 && colspan != 0) { + tableStr += `${item[name]}` + } } - }); - }); - body.push(obj); + }); + }); + tableStr += '' }); - exportToExcel(head, body); + var worksheet = "Sheet1"; + var uri = "data:application/vnd.ms-excel;base64,"; + var exportTemplate = + ` + + + + ${tableStr}
+ + `; + window.location.href = uri + base64(exportTemplate); return; }; -function exportToExcel(headerList: any, bodyList: any) { - let excelList = []; - excelList.push(headerList.join("\t,")); - excelList.push("\n"); - bodyList.forEach((item: any) => { - excelList.push(item.join("\t,")); - excelList.push("\n"); - }); - var merged = excelList.join(""); - let link = document.createElement("a"); - link.href = "data:text/xls;charset=utf-8,\ufeff" + encodeURIComponent(merged); - link.download = `table.xls`; - link.click(); +//输出base64编码 +function base64(s: string) { + return window.btoa(unescape(encodeURIComponent(s))); } const sortTable = (e: any, key: string, sort: string) => { @@ -481,7 +489,11 @@ const renderFixedStyle = (column: any, columnIndex: number) => { if (column.fixed == "left") { var left = 0; for (var i = 0; i < columnIndex; i++) { - if (props.columns[i].fixed && props.columns[i].fixed == "left" && tableColumnKeys.value.includes(props.columns[i].key)) { + if ( + props.columns[i].fixed && + props.columns[i].fixed == "left" && + tableColumnKeys.value.includes(props.columns[i].key) + ) { left = left + props.columns[i]?.width.replace("px", ""); } } @@ -489,7 +501,11 @@ const renderFixedStyle = (column: any, columnIndex: number) => { } else { var right = 0; for (var i = columnIndex + 1; i < props.columns.length; i++) { - if (props.columns[i].fixed && props.columns[i].fixed == "right" && tableColumnKeys.value.includes(props.columns[i].key)) { + if ( + props.columns[i].fixed && + props.columns[i].fixed == "right" && + tableColumnKeys.value.includes(props.columns[i].key) + ) { right = right + props.columns[i]?.width.replace("px", ""); } } @@ -498,7 +514,10 @@ const renderFixedStyle = (column: any, columnIndex: number) => { } else { var isLast = true; for (var i = columnIndex + 1; i < props.columns.length; i++) { - if (props.columns[i].fixed == undefined && tableColumnKeys.value.includes(props.columns[i].key)) { + if ( + props.columns[i].fixed == undefined && + tableColumnKeys.value.includes(props.columns[i].key) + ) { isLast = false; } } @@ -515,7 +534,11 @@ const renderFixedClassName = (column: any, columnIndex: number) => { if (column.fixed == "left") { var left = true; for (var i = columnIndex + 1; i < props.columns.length; i++) { - if (props.columns[i].fixed && props.columns[i].fixed == "left" && tableColumnKeys.value.includes(props.columns[i].key)) { + if ( + props.columns[i].fixed && + props.columns[i].fixed == "left" && + tableColumnKeys.value.includes(props.columns[i].key) + ) { left = false; } } @@ -523,7 +546,11 @@ const renderFixedClassName = (column: any, columnIndex: number) => { } else { var right = true; for (var i = 0; i < columnIndex; i++) { - if (props.columns[i].fixed && props.columns[i].fixed == "right" && tableColumnKeys.value.includes(props.columns[i].key)) { + if ( + props.columns[i].fixed && + props.columns[i].fixed == "right" && + tableColumnKeys.value.includes(props.columns[i].key) + ) { right = false; } } diff --git a/package/document-component/src/document/zh-CN/components/table.md b/package/document-component/src/document/zh-CN/components/table.md index 85d3381d..eb18ecb4 100644 --- a/package/document-component/src/document/zh-CN/components/table.md +++ b/package/document-component/src/document/zh-CN/components/table.md @@ -1004,7 +1004,7 @@ export default { ::: demo 通过 `span-method` 属性, 自定义行列合并的逻辑。