Exigence : Une fois la liste importée en fonction du fichier xlsx, comparez-la avec la liste, puis réalisez la fonction d'édition
1. Télécharger xlsx
J'ai téléchargé la version précédente. Je ne sais pas si la nouvelle version est compatible. Ce paquet fait plus de 900k
npm install [email protected]2. Introduisez dans la page qui doit utiliser l'importation de table
import XLSX from "xlsx";3. Ecrire un el-upload importé
<el-upload
ref="upload"
action="/"
:on-change="onChangeFile"
:auto-upload="false"
:show-file-list="false"
accept=".xls, .xlsx"
class="dialog-upload"
>
<el-button type="primary" icon="el-icon-folder-add">导入</el-button>
</el-upload> // 导入表格
onChangeFile(file) {
console.log(file);
// 保存当前选择文件
this.fileData = file;
// 调用读取数据的方法
this.readExcel();
},
// 读取数据
readExcel() {
const files = this.fileData;
if (!files) {
// 没有文件
return false;
} else if (!/\.(xls|xlsx)$/.test(files.name.toLowerCase())) {
this.$message.error('请上传xls或者xlsx文件');
return false;
}
const fileReader = new FileReader();
fileReader.onload = e => {
try {
const data = e.target.result;
const workbook = XLSX.read(data, {
type: 'binary',
cellDates: true,//设为true，将天数的时间戳转为时间格式
});
if (workbook.SheetNames.length >= 1) {
this.$message.success('导入成功');
}
// 取第一张表
const wsname = workbook.SheetNames[0];
console.log(wsname,'e.target.result');
// 生成json表格内容
const ws = XLSX.utils.sheet_to_json(workbook.Sheets[wsname]);
// this.$emit('getUploadData', ws);
console.log(ws, '生成json表格内容');
this.endPoint(ws);
// 清空value值，不然页面为刷新时无法重复使用
this.$refs.upload.value = '';
} catch (e) {
return false;
}
};
fileReader.readAsBinaryString(files.raw);
},Le format json résultant est le suivant
Les données du tableau sont les suivantes
4. Remplissage des données après comparaison des fichiers
findIndex : s'il y en a un qualifié, la valeur de l'index sera renvoyée
endPoint(ws) {
// 遍历从Excel导入的数据
for (const data of ws) {
const name = data['姓名'];
const updUsername = data['修改姓名'];
const updAddress = data['修改地址'];
// 在另一个表格中查找对应的点名
const matchedRowIndex = this.tableData.findIndex(row => row.name == name);
console.log(matchedRowIndex,'对应数据信息');
// 如果找到了匹配的行，则进行数据回填
if (matchedRowIndex !== -1) {
this.tableData[matchedRowIndex].updName = updUsername;
this.tableData[matchedRowIndex].updAddress = updAddress;
}
// 将数组赋值给另一个变量以触发Vue响应式更新
this.tableData = [...this.tableData];
console.log(this.tableData, '点名筛选');
}
},5. Code complet
<template>
<div class="content-box">
<div class="container">
<el-upload
ref="upload"
action="/"
:on-change="onChangeFile"
:auto-upload="false"
:show-file-list="false"
accept=".xls, .xlsx"
class="dialog-upload"
>
<el-button type="primary" icon="el-icon-folder-add">导入</el-button>
</el-upload>
<el-table :data="tableData" style="width: 100%">
<el-table-column prop="date" label="日期" width="180"> </el-table-column>
<el-table-column prop="name" label="姓名" width="180"> </el-table-column>
<el-table-column prop="address" label="地址"> </el-table-column>
<el-table-column label="修改姓名">
<template slot-scope="scope">
<el-input
size="small"
v-model="scope.row.updName"
oninput="if(value==0)value=null"
placeholder="修改日期"
type="text"
></el-input>
</template>
</el-table-column>
<el-table-column label="修改地址">
<template slot-scope="scope">
<el-input
size="small"
v-model="scope.row.updAddress"
oninput="if(value==0)value=null"
placeholder="修改姓名"
type="text"
></el-input>
</template>
</el-table-column>
</el-table>
<el-button @click="saveData">保存</el-button>
</div>
</div>
</template>
<script>
import XLSX from "xlsx";
export default {
data() {
return {
tableData: [
{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄',
updAddress:null,
updName:null
},
{
date: '2016-05-04',
name: '王小二',
address: '上海市普陀区金沙江路 1517 弄',
updAddress:null,
updName:null
},
{
date: '2016-05-01',
name: '王小三',
address: '上海市普陀区金沙江路 1519 弄',
updAddress:null,
updName:null
},
{
date: '2016-05-03',
name: '王小四',
address: '上海市普陀区金沙江路 1516 弄',
updAddress:null,
updName:null
}
],
fileData:""
};
},
mounted() {},
methods: {
// 导入表格
onChangeFile(file) {
console.log(file);
// 保存当前选择文件
this.fileData = file;
// 调用读取数据的方法
this.readExcel();
},
// 读取数据
readExcel() {
const files = this.fileData;
if (!files) {
// 没有文件
return false;
} else if (!/\.(xls|xlsx)$/.test(files.name.toLowerCase())) {
this.$message.error('请上传xls或者xlsx文件');
return false;
}
const fileReader = new FileReader();
fileReader.onload = e => {
try {
const data = e.target.result;
const workbook = XLSX.read(data, {
type: 'binary',
cellDates: true,//设为true，将天数的时间戳转为时间格式
});
if (workbook.SheetNames.length >= 1) {
this.$message.success('导入成功');
}
// 取第一张表
const wsname = workbook.SheetNames[0];
console.log(wsname,'e.target.result');
// 生成json表格内容
const ws = XLSX.utils.sheet_to_json(workbook.Sheets[wsname]);
// this.$emit('getUploadData', ws);
console.log(ws, '生成json表格内容');
this.endPoint(ws);
// 清空value值，不然页面为刷新时无法重复使用
this.$refs.upload.value = '';
} catch (e) {
return false;
}
};
fileReader.readAsBinaryString(files.raw);
},
endPoint(ws) {
// 遍历从Excel导入的数据
for (const data of ws) {
const name = data['姓名'];
const updUsername = data['修改姓名'];
const updAddress = data['修改地址'];
// 在另一个表格中查找对应的点名
const matchedRowIndex = this.tableData.findIndex(row => row.name == name);
console.log(matchedRowIndex,'对应数据信息');
// 如果找到了匹配的行，则进行数据回填
if (matchedRowIndex !== -1) {
this.tableData[matchedRowIndex].updName = updUsername;
this.tableData[matchedRowIndex].updAddress = updAddress;
}
// 将数组赋值给另一个变量以触发Vue响应式更新
this.tableData = [...this.tableData];
console.log(this.tableData, '点名筛选');
}
},
saveData(){
// 保存的话这边只用判断下修改姓名或者修改地址是否有值之后再把修改后的数据进行提交到后台就可以了
}
}
};
</script>
<style lang="scss" scoped></style>
Ceci est la fin de l'article, j'espère qu'il vous sera utile ~~