🐛 [Bug]: 表格组件无法导出文件 #227
Description
Environment
Edge, Windows11
Version
latest
Version
latest
Link to minimal reproduction
none
Step to reproduce
业务逻辑：
1、点击导出文件按钮，该按钮绑定了exportFile方法
2、exportFile方法会调用表格的导出方法：this.$('tableRef').exportCsv
以下是我的页面数据
{
"state": {
"table": [
{
"id": "1",
"name": "GFD科技有限公司",
"city": "福州",
"employees": 800,
"created_date": "2014-04-30 00:56:00",
"boole": false
},
{
"id": "2",
"name": "WWW科技有限公司",
"city": "深圳",
"employees": 300,
"created_date": "2016-07-08 12:36:22",
"boole": true
},
{
"id": "3",
"name": "WAA科技有限公司",
"city": "西安",
"employees": 100,
"created_date": "2016-07-08 12:36:22",
"boole": true
},
{
"id": "4",
"name": "AA科技有限公司",
"city": "北京",
"employees": 200,
"created_date": "2016-07-08 12:36:22",
"boole": true
},
{
"id": "5",
"name": "OO科技有限公司",
"city": "广州",
"employees": 420,
"created_date": "2016-07-08 12:36:22",
"boole": true
}
],
"pageSize": 1,
"currentPage": 1,
"pageTotal": 2,
"pageSizes": [
1,
2
],
"activeRow": {},
"isDelete": false,
"isEdit": false
},
"methods": {
"openEditModal": {
"type": "JSFunction",
"value": "function openEditModal(event) {\n this.state.isEdit = true\n}"
},
"closelEditModal": {
"type": "JSFunction",
"value": "function closelEditModal(event) {\n this.state.isEdit = false\n}"
},
"updateProduct": {
"type": "JSFunction",
"value": "function updateProduct(event) {\n let { id } = this.state.activeRow\n let idx = getIndexByID(id)\n\n if (idx !== -1) {\n let item = this.state.table[idx]\n for (let key in this.state.activeRow) {\n if (this.state.activeRow.hasOwnProperty(key)) {\n item[key] = this.state.activeRow[key]\n }\n }\n }\n\n this.closelEditModal()\n}"
},
"openDeleteModal": {
"type": "JSFunction",
"value": "function openDeleteModal(event) {\n this.state.isDelete = true\n}"
},
"closelDeleteModal": {
"type": "JSFunction",
"value": "function closelDeleteModal(event) {\n this.state.isDelete = false\n}"
},
"deleteProduct": {
"type": "JSFunction",
"value": "function deleteProduct(event) {\n let { id } = this.state.activeRow\n let idx = getIndexByID(id)\n\n if (idx !== -1) {\n this.state.table.splice(idx, 1)\n }\n\n this.openDeleteModal()\n}"
},
"openViewModal": {
"type": "JSFunction",
"value": "function openViewModal(event) {\n this.state.isView = true\n}"
},
"closeViewModal": {
"type": "JSFunction",
"value": "function closeViewModal(event) {\n this.state.isView = false\n}"
},
"getIndexByID": {
"type": "JSFunction",
"value": "function getIndexByID(id) {\n return this.state.table.findIndex((el) => el.id === id)\n}"
},
"onFilterChangeNew": {
"type": "JSFunction",
"value": "function onFilterChangeNew(event) {\n console.log(this.state.pageSizes)\n}"
},
"onPageChangeNew": {
"type": "JSFunction",
"value": "function onPageChangeNew(event) {\n console.log(event)\n console.log(this.state.pageSizes)\n}"
},
"onCurrentChangeNew": {
"type": "JSFunction",
"value": "function onCurrentChangeNew({ row }) {\n console.log('onCurrentChangeNew')\n console.log(row)\n console.log(this.$('tableRef'))\n this.state.activeRow = { ...row }\n}"
},
"exportFile": {
"type": "JSFunction",
"value": "function exportFile(event) {\n console.log(this.$('tableRef').exportCsv)\n this.$('tableRef').exportCsv({\n // 文件名称\n filename: 'table.csv',\n original: true,\n // 是否导出表头\n isHeader: false,\n // 是否在每行后面添加制表符\n useTabs: false,\n // 导出的数据\n data: this.state.table\n })\n}"
}
},
"componentName": "Page",
"css": ".div-lwuls {\n background-color: #ffffff;\n}\n#edit {\n padding-left: 20px;\n color: #0062ff;\n}\n.a-tjvju {\n padding-left: 20px;\n color: #ff0000;\n}\n.text-ntpgd {\n font-size: 18px;\n margin-top: 0px;\n padding-left: 0px;\n padding-top: 0px;\n}\n.div-jjlgv {\n position: absolute;\n right: 0px;\n bottom: 10px;\n width: ;\n}\n.elbutton-gwlnl {\n position: static;\n background-color: #0062ff;\n}\n.tinydialogbox-qujmd {\n height: 500px;\n min-height: 500px;\n}\n.div-fpmjl {\n height: 100px;\n position: relative;\n margin-bottom: 20px;\n}\n.elbutton-hjiwv {\n color: #ff0000;\n background-color: #ff0000;\n}\n.text-hquvu {\n color: #ffffff;\n}\n.text-kohln {\n color: #ffffff;\n}\n.tinyformitem-qxwfs {\n border-color: #004cff;\n}\n.page-urtns {\n color: #0084ff;\n width: ;\n}\n.a-rrqso {\n color: #006eff;\n}\n.a-iviqu {\n padding-left: 20px;\n}\n.a-jwmpg {\n padding-left: 20px;\n}\n.div-qnpih {\n margin-bottom: 20px;\n margin-top: 20px;\n position: relative;\n}\n.div-fxvzv {\n width: ;\n min-height: ;\n border-color: #ffffff;\n margin-left: 10px;\n margin-right: 10px;\n}\n.div-rjgtf {\n padding-bottom: 20px;\n margin-top: 0px;\n padding-top: 20px;\n margin-left: 10px;\n margin-right: 10px;\n}\n.elinput-snfop {\n width: 200px;\n padding-left: 20px;\n}\n.div-hgqts {\n padding-left: 0px;\n width: ;\n margin-left: 10px;\n margin-right: 20px;\n}\n.text-riftt {\n color: #ffffff;\n}\n.div-nvujj {\n position: relative;\n}\n.elbutton-wgwov {\n position: relative;\n right: 0px;\n}\n.text-cssbr {\n color: #252b3a;\n background-color: #ffffff;\n}\n",
"props": {
"className": "page-urtns"
},
"lifeCycles": {
"setup": {
"type": "JSFunction",
"value": "function setup({ props, state, watch, onMounted }) {\r\n watch(state.pageSizes, (newValue, oldValue) => {\r\n console.log(`pageSizes changed from ${oldValue} to ${newValue}`);\r\n });\r\n} "
}
},
"children": [
{
"componentName": "div",
"props": {
"className": "div-qnpih"
},
"id": "531554f3",
"children": [
{
"componentName": "div",
"props": {
"className": "div-rjgtf",
"style": "display: flex;\nflex: 1;\n"
},
"id": "6e453215",
"children": [
{
"componentName": "div",
"props": {
"className": "div-hgqts"
},
"id": "65646e25",
"children": [
{
"componentName": "Text",
"props": {
"text": "产品名称",
"className": "text-cssbr"
},
"id": "15144764"
},
{
"componentName": "ElInput",
"props": {
"className": "elinput-snfop"
},
"id": "22563487"
}
]
},
{
"componentName": "div",
"props": {
"className": "div-nvujj"
},
"id": "647f5233",
"children": [
{
"componentName": "ElButton",
"props": {
"style": "background-color: #5e7ce0;\n",
"className": "elbutton-wgwov"
},
"children": [
{
"componentName": "Text",
"props": {
"text": "搜索",
"className": "text-riftt"
},
"id": "27462266"
}
],
"id": "32564522"
}
]
}
]
},
{
"componentName": "div",
"props": {
"className": "div-fxvzv"
},
"id": "45256342",
"children": [
{
"componentName": "ElButton",
"props": {
"onClick": {
"type": "JSExpression",
"value": "this.exportFile"
}
},
"children": [
{
"componentName": "Text",
"props": {
"text": "批量删除"
},
"id": "3513e234"
}
],
"id": "4226543a"
},
{
"componentName": "ElButton",
"props": {
"onClick": {
"type": "JSExpression",
"value": "this.exportFile"
}
},
"children": [
{
"componentName": "Text",
"props": {
"text": "批量修改"
},
"id": "36a63211"
}
],
"id": "52449122"
},
{
"componentName": "ElButton",
"props": {
"onClick": {
"type": "JSExpression",
"value": "this.exportFile"
}
},
"children": [
{
"componentName": "Text",
"props": {
"text": "导出文件"
},
"id": "59364b53"
}
],
"id": "4565e636"
}
]
}
]
},
{
"componentName": "TinyGrid",
"props": {
"editConfig": {
"trigger": "click",
"mode": "cell",
"showStatus": true
},
"columns": [
{
"type": "index",
"width": 60
},
{
"type": "selection",
"width": 60
},
{
"field": "employees",
"title": "员工数",
"sortable": true
},
{
"field": "created_date",
"title": "创建日期",
"sortable": true
},
{
"field": "city",
"title": "城市"
},
{
"title": "操作",
"slots": {
"default": {
"type": "JSSlot",
"value": [
{
"componentName": "div",
"id": "3233e475",
"children": [
{
"componentName": "a",
"props": {
"onClick": {
"type": "JSExpression",
"value": "this.openViewModal"
},
"target": "_self"
},
"children": "查看\n",
"id": "b1e22653"
},
{
"componentName": "a",
"props": {
"target": "_self",
"onClick": {
"type": "JSExpression",
"value": "this.openEditModal"
},
"className": "a-jwmpg",
"style": "padding-left: 20px;\ncolor: #5e7ce0;\n"
},
"children": "编辑",
"id": "63532546"
},
{
"componentName": "a",
"props": {
"onClick": {
"type": "JSExpression",
"value": "this.openDeleteModal"
},
"target": "_self",
"className": "a-iviqu",
"style": "padding-left: 20px;\ncolor: #ff4d4f;\n"
},
"children": "删除",
"id": "15d46214"
}
],
"props": {
"className": "div-lwuls"
}
}
]
}
}
}
],
"data": {
"type": "JSExpression",
"value": "this.state.table"
},
"ref": "tableRef",
"edit-config": "\"{ trigger: 'click', mode: 'cell', showStatus: true }\"",
"highlight-current-row": true,
"onCurrentChange": {
"type": "JSExpression",
"value": "this.onCurrentChangeNew"
},
"sortable": true,
"highlight-hover-row": true
},
"id": "e336644b"
},
{
"componentName": "TinyPager",
"props": {
"layout": "total, sizes, prev, pager, next",
"total": {
"type": "JSExpression",
"value": "this.state.pageTotal"
},
"pageSize": {
"type": "JSExpression",
"value": "this.state.pageSize"
},
"currentPage": {
"type": "JSExpression",
"value": "this.state.currentPage"
},
"pageSizes": {
"type": "JSExpression",
"value": "this.state.pageSizes"
},
"onPageChange": {
"type": "JSExpression",
"value": "this.onPageChangeNew"
}
},
"id": "46259434"
},
{
"componentName": "TinyDialogBox",
"props": {
"visible": {
"type": "JSExpression",
"value": "this.state.isDelete",
"model": {
"prop": "visible"
}
},
"show-close": true,
"className": "tinydialogbox-qujmd",
"title": "删除",
"center": false
},
"children": [
{
"componentName": "div",
"id": "23233621",
"children": [
{
"componentName": "Text",
"props": {
"text": "确定删除？",
"className": "text-ntpgd"
},
"id": "6623d645"
},
{
"componentName": "Text",
"props": {},
"id": "64516442"
},
{
"componentName": "div",
"props": {
"className": "div-jjlgv"
},
"id": "5a282262",
"children": [
{
"componentName": "ElButton",
"props": {
"className": "elbutton-gwlnl",
"onClick": {
"type": "JSExpression",
"value": "this.closelDeleteModal"
}
},
"children": [
{
"componentName": "Text",
"props": {
"text": "取消",
"className": "text-kohln"
},
"id": "5614a23c"
}
],
"id": "4361243c"
},
{
"componentName": "ElButton",
"props": {
"className": "elbutton-hjiwv",
"onClick": {
"type": "JSExpression",
"value": "this.deleteProduct"
}
},
"children": [
{
"componentName": "Text",
"props": {
"text": "删除",
"className": "text-hquvu"
},
"id": "444b8224"
}
],
"id": "37614464"
}
]
}
],
"props": {
"className": "div-fpmjl"
}
}
],
"id": "65b212a3"
},
{
"componentName": "TinyDialogBox",
"props": {
"visible": {
"type": "JSExpression",
"value": "this.state.isEdit",
"model": {
"prop": "visible"
}
},
"show-close": true,
"title": "编辑"
},
"children": [
{
"componentName": "div",
"id": "e562fb26",
"children": [
{
"componentName": "TinyForm",
"props": {
"labelWidth": "80px",
"labelPosition": "top"
},
"children": [
{
"componentName": "TinyFormItem",
"props": {
"label": "员工数"
},
"children": [
{
"componentName": "TinyInput",
"props": {
"placeholder": "请输入",
"modelValue": {
"type": "JSExpression",
"value": "this.state.activeRow.employees",
"model": true
},
"type": "text",
"rows": 0
},
"id": "53336625"
}
],
"id": "31362352"
},
{
"componentName": "TinyFormItem",
"props": {
"label": "城市"
},
"children": [
{
"componentName": "TinyInput",
"props": {
"placeholder": "请输入",
"modelValue": {
"type": "JSExpression",
"value": "this.state.activeRow.city",
"model": true
},
"type": "text"
},
"id": "44914542"
}
],
"id": "58653642"
},
{
"componentName": "TinyFormItem",
"props": {
"label": "",
"className": "tinyformitem-qxwfs"
},
"children": [
{
"componentName": "TinyButton",
"props": {
"text": "提交",
"type": "primary",
"style": "margin-right: 10px",
"onClick": {
"type": "JSExpression",
"value": "this.updateProduct"
}
},
"id": "522526fa"
}
],
"id": "f3242522"
}
],
"id": "77633325"
}
]
}
],
"id": "6664335a"
}
],
"dataSource": {
"list": []
},
"utils": [],
"bridge": [],
"inputs": [],
"outputs": [],
"fileName": "Product"
}
What is expected
触发表格组件实例的导出文件的方法，可以导出指定文件
What is actually happening
没有导出文件
Any additional comments (optional)
No response