Vue是一款流行的JavaScript框架，常被用于构建动态用户界面。Excel是微软开发的电子表格软件，因其易用性和强大功能备受欢迎。本文将介绍如何运用Vue和Excel实现数据的批量编辑和导入。
1. 准备工作
在介绍具体实现步骤前，我们需要先做些准备工作。
1.1 安装依赖
首先，我们需要安装以下依赖项：
npm install xlsx --save
npm install file-saver --save
xlsx是一个可以解析Excel文件的库，file-saver用于在客户端生成文件并保存在本地。
1.2 创建Vue工程
在安装依赖项后，我们需要创建Vue工程，可使用Vue官方的脚手架工具，也可以使用其他的工具。
2. 批量编辑
数据批量编辑是Excel表格最常用的功能之一。在本节中，我们将实现在Vue页面中批量编辑表格的功能。
2.1 解析Excel文件
首先，我们需要编写代码来解析上传的Excel文件，并将其转换成可编辑的数据格式。以下是实现代码：
import { read } from "xlsx";
export default {
methods: {
handleFile(files) {
const file = files[0];
const reader = new FileReader();
reader.onload = e => {
const data = e.target.result;
const workbook = read(data, {type: "binary"});
const sheetName = workbook.SheetNames[0];
const worksheet = workbook.Sheets[sheetName];
const headers = {};
const dataArr = [];
for (let cell in worksheet) {
if (cell[0] === "!") continue;
const col = cell.substring(0, 1);
const row = cell.substring(1);
const value = worksheet[cell].v;
if (row === "1") {
headers[col] = value;
continue;
}
if (!dataArr[row]) dataArr[row] = {};
dataArr[row][headers[col]] = value;
}
this.dataArr = dataArr.slice(1);
};
reader.readAsBinaryString(file);
}
},
data() {
return {
dataArr: []
};
}
};
在这个代码中，我们使用了xlsx库中的read方法来解析Excel文件。首先，我们读取上传的文件并将其转换成二进制数据。然后我们从二进制数据中解析出Excel文件，取得第一个sheet的所有数据。接下来，我们通过headers对象来存储表头中的每一列的值。最后，我们将Excel文件的数据从对象格式转换成数组格式，并将其传递给Vue组件中的dataArr数组。
2.2 实现表格编辑功能
我们已经成功将Excel文件解析成可编辑的数据格式，现在开始实现表格编辑功能。我们将在Vue中使用element-ui库来实现表格展示和编辑功能。
<template>
<el-table :data="dataArr" style="width: 100%">
<el-table-column v-for="(item, index) in columns" :key="index" :prop="item.prop" :label="item.label">
<template slot-scope="scope">
<el-input v-model="scope.row[item.prop]" :disabled="!editable"></el-input>
</template>
</el-table-column>
</el-table>
</template>
<script>
export default {
data() {
return {
editable: false,
columns: [
{ label: "姓名", prop: "name" },
{ label: "性别", prop: "gender" },
{ label: "年龄", prop: "age" }
]
};
}
};
</script>
在这段代码中，我们首先使用element-ui的el-table组件来展示数据。然后，我们使用el-table-column来创建表头和对应的列，其中prop属性表示该列对应的数据字段。最后，我们使用el-input组件来实现可编辑的单元格。在editetable属性为false时，单元格为只读状态，在editable为true时，单元格为可编辑状态。
3. 数据导入
数据导入是Excel表格最常用的功能之一。在本节中，我们将实现在Vue页面中导入Excel文件的功能。
3.1 下载Excel模板
首先，我们需要为用户提供一个下载Excel模板的链接，让用户根据表头进行数据录入。
<template>
<div class="button-wrap">
<a href="./ExcelTemplate.xlsx" download>下载Excel模板</a>
</div>
</template>
使用a标签创建一个下载链接，并指定其链接文件的格式为.xlsx文件。例如，在我的项目文件夹中，Excel模板文件的位置为./public/ExcelTemplate.xlsx。
3.2 上传Excel文件
在用户完成数据录入之后，我们需要提供一个上传Excel文件的按钮，让用户上传数据文件。以下是实现代码：
<template>
<el-button type="primary" @click="handleUploadClick">
{{ uploadBtnText }}
<input type="file" ref="fileInput" class="file-input" @change="handleFileChange" style="display:none">
</el-button>
</template>
<script>
export default {
data() {
return {
uploadBtnText: "上传Excel数据文件"
};
},
methods: {
handleUploadClick() {
this.$refs.fileInput.click();
},
handleFileChange(event) {
const files = event.target.files;
this.$emit("file-selected", files);
}
}
};
</script>
<style>
.file-input {
height: 0;
width: 0;
visibility: hidden;
}
</style>
在这段代码中，我们使用element-ui的el-button组件创建一个上传按钮，并使用input元素来实现输入框功能。当用户点击按钮时，我们触发handleUploadClick方法，使input元素的click事件被触发，从而实现选择文件功能。当用户选择文件后，我们将所选文件传递给父组件。
3.3 保存导入数据
在文件上传成功后，我们需要将文件中的数据保存到数据库中。以下是实现代码：
import { write } from "xlsx";
import { saveAs } from "file-saver";
export default {
methods: {
handleFileSelected(files) {
if (files && files.length) {
this.file = files[0];
this.handleFile(this.file);
}
},
handleFile(file) {
const reader = new FileReader();
reader.onload = e => {
const data = e.target.result;
const workbook = read(data, {type: "binary"});
const sheetName = workbook.SheetNames[0];
const worksheet = workbook.Sheets[sheetName];
const headers = [];
const dataArr = [];
for (let cell in worksheet) {
if (cell[0] === "!") continue;
const col = cell.substring(0, 1);
const row = cell.substring(1);
const value = worksheet[cell].v;
if (row === "1") {
headers[col] = value;
continue;
}
if (!dataArr[row]) dataArr[row] = {};
dataArr[row][headers[col]] = value;
}
const fileName = this.file.name.replace('.xlsx', '');
const headers = this.columns.map(column => column.label);
const fields = this.columns.map(column => column.prop);
const result = [];
dataArr.forEach(item => {
const newItem = {};
fields.forEach(field => {
newItem[field] = item[field] ? item[field] : null;
});
result.push(newItem);
});
const newWorkbook = {
SheetNames: ["Sheet1"],
Sheets: {
Sheet1: write(result, { header: headers, skipHeader: true })
}
};
saveAs(new Blob([newWorkbook]), `${fileName}-processed.xlsx`);
};
reader.readAsBinaryString(file);
}
}
};
在这个代码中，我们首先使用file-saver库中的saveAs方法来保存上传的文件，并按照指定格式重命名该文件。然后，我们使用xlsx库中的write方法来将文件中的数据进行处理，并生成一个新的Excel文件，其中的数据和原始数据类似，只不过我们对其进行了处理。最后，将处理后的数据保存到新的Excel文件中。
总结
本文介绍了如何使用Vue和Excel实现数据批量编辑和导入功能。我们通过使用xlsx库中的read和write方法来解析和生成Excel文件，并使用element-ui库来实现表格展示和编辑功能。同时，我们还使用了file-saver库来在客户端生成和保存文件。这些功能的实现，可以大大提高数据维护的效率，减少人工录入和编辑数据的时间和成本。