Vue 创建可编辑表格并下载 CSV 文件

要\u5728 Vue\u4e2d\u521b\u5efa\u4e00\u4e2a\u8868\u683c\u5e76\u5141\u8bb8\u7f16\u8f91\u540e\u4e0b\u8f7d\uff0c\u53ef\u4ee5\u6309\u7167\u4ee5\u4e0b\u6b65\u9aa4\u8fdb\u884c\u64cd\u4f5c\uff1a\n\n1\uff0e\u521b\u5efa\u4e00\u4e2a Vue\u7ec4\u4ef6\uff0c\u547d\u540d\u4e3a Table\uff0c\u7528\u4e8e\u663e\u793a\u548c\u7f16\u8f91\u8868\u683c\u6570\u636e\u3002\nvue\n\u3ctemplate\u3e\n \u3cdiv\u3e\n \u3ctable\u3e\n \u3cthead\u3e\n \u3ctr\u3e\n \u3cth v-for\u3d\'column in columns\' :key\u3d\'column\'\u3e{{ column }}\u3c/th\u3e\n \u3c/tr\u3e\n \u3c/thead\u3e\n \u3ctbody\u3e\n \u3ctr v-for\u3d\'(row, index) in rows\' :key\u3d\'index\'\u3e\n \u3ctd v-for\u3d\'(cell, cellIndex) in row\' :key\u3d\'cellIndex\'\u3e\n \u3cinput v-if\u3d\'editingRowIndex === index && editingCellIndex === cellIndex\' v-model\u3d\'cell\'\u3e\n \u3cspan v-else\u3e{{ cell }}\u3c/span\u3e\n \u3c/td\u3e\n \u3c/tr\u3e\n \u3c/tbody\u3e\n \u3c/table\u3e\n \u3cbutton @click\u3d\'editRow\'\u3e\u7f16\u8f91\u3c/button\u3e\n \u3cbutton @click\u3d\'downloadTable\'\u3e\u4e0b\u8f7d\u3c/button\u3e\n \u3c/div\u3e\n\u3c/template\u3e\n\n\u3cscript\u3e\n\nexport default {\n data() {\n return {\n columns: [\'\u52171\', \'\u52172\', \'\u52173\'],\n rows: [\n [\'\u6570\u636e1\', \'\u6570\u636e2\', \'\u6570\u636e3\'],\n [\'\u6570\u636e4\', \'\u6570\u636e5\', \'\u6570\u636e6\'],\n [\'\u6570\u636e7\', \'\u6570\u636e8\', \'\u6570\u636e9\']\n ],\n editingRowIndex: -1,\n editingCellIndex: -1\n };\n },\n methods: {\n editRow() {\n this.editingRowIndex = 0; // \u7f16\u8f91\u7b2c\u4e00\u884c\n this.editingCellIndex = 0; // \u7f16\u8f91\u7b2c\u4e00\u5217\n },\n downloadTable() {\n const csvContent = this.convertToCSV();\n const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });\n const link = document.createElement('a');\n link.href = URL.createObjectURL(blob);\n link.download = 'table.csv';\n link.click();\n },\n convertToCSV() {\n let csvContent = 'data:text/csv;charset=utf-8,';\n csvContent += this.columns.join(',') + '\n';\n this.rows.forEach(row => {\n csvContent += row.join(',') + '\n';\n });\n return csvContent;\n }\n }\n};\n\u3c/script\u3e\n\n2\uff0e\u5728\u7236\u7ec4\u4ef6\u4e2d\u4f7f\u7528\u8fd9\u4e2a Table\u7ec4\u4ef6\u3002\nvue\n\u3ctemplate\u3e\n \u3cdiv\u3e\n \u3cTable\u3e\u3c/Table\u3e\n \u3c/div\u3e\n\u3c/template\u3e\n\n\u3cscript\u3e\nimport Table from './Table.vue';\n\nexport default {\n components: {\n Table\n }\n};\n\u3c/script\u3e\n\n3\uff0e\u8fd0\u884c Vue\u5e94\u7528\uff0c\u4f60\u5c06\u770b\u5230\u4e00\u4e2a\u5305\u542b\u8868\u683c\u548c\u7f16\u8f91\u3001\u4e0b\u8f7d\u6309\u94ae\u7684\u683c\u5f0f\u3002\u70b9\u51fb\u7f16\u8f91\u6309\u94ae\u5c06\u4f7f\u7b2c\u4e00\u884c\u7b2c\u4e00\u5217\u7684\u5355\u5143\u683c\u53d8\u4e3a\u53ef\u7f16\u8f91\u72b6\u6001\u3002\u70b9\u51fb\u4e0b\u8f7d\u6309\u94ae\u5c06\u4e0b\u8f7d\u8868\u683c\u6570\u636e\u4e3a CSV\u6587\u4ef6\u3002\n\n\u8bf7\u6ce8\u610f\uff0c\u8fd9\u91cc\u4f7f\u7528\u4e86\u4e00\u4e2a convertToCSV\u65b9\u6cd5\u5c06\u8868\u683c\u6570\u636e\u8f6c\u6362\u4e3a CSV\u683c\u5f0f\u3002\u4f60\u53ef\u4ee5\u6839\u636e\u9700\u8981\u4fee\u6539\u8fd9\u4e2a\u65b9\u6cd5\u6765\u9002\u5e94\u4f60\u7684\u8868\u683c\u6570\u636e\u683c\u5f0f\u548c\u9700\u8981\u3002