Vue读取Excel并以表格形式展现在页面上,并实现单元格数据可编辑
最近由于公司项目需求,我在画原型图的时候发现,有个功能是前端导入Excel文件并在页面上进行预览,在预览过程中用户可能会修改某个单元格的数据。因此,本文来实现利用node包vue-xlsx-table实现此需求。
第一步、安装:install
npm install vue-xlsx-table --save
第二步、引入:main.js
import vueXlsxTable from 'vue-xlsx-table'
Vue.use(vueXlsxTable, { rABS: false })
第三步、使用:ExcelRead.vue
<template>
<div>
<h4>vue-xlsx-table</h4>
<vue-xlsx-table @on-select-file="handleSelectedFile">上传Excel</vue-xlsx-table>
</div>
</template>
<script>
export default {
name: 'ExcelRead',
methods: {
/**
* 读取Excel内容
* @param excelData
*/
handleSelectedFile (excelData) {
let { header: tableHeader, body: tableData } = excelData
console.log("excel表头:",tableHeader)
console.log("excel数据:",tableData)
}
}
}
</script>
<style scoped lang="stylus">
</style>
<template>
<div class="home">
<ExcelRead @update="updateExcel"></ExcelRead>
<el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%"
@selection-change="handleSelectionChange">
<el-table-column type="selection" width="55"></el-table-column>
<el-table-column label="姓名">
<template slot-scope="scope">
<div @dblclick="handleFieldEdit(scope.$index)">
<span v-show="!scope.row.mode">{{scope.row.姓名}}</span>
<el-input v-show="scope.row.mode" :ref="'name'+scope.$index" v-model="scope.row.姓名"
@blur="handleFiledBlur(scope.$index)"
@keyup.enter.native="$event.target.blur" clearable placeholder="请输入姓名"></el-input>
</div>
</template>
</el-table-column>
<el-table-column prop="拼音" label="拼音"></el-table-column>
<el-table-column prop="证件号码" label="证件号码"></el-table-column>
<el-table-column prop="性别" label="性别"></el-table-column>
<el-table-column prop="地址" label="地址"></el-table-column>
<el-table-column prop="国籍" label="国籍"></el-table-column>
<el-table-column prop="标签" label="标签"></el-table-column>
<el-table-column prop="群体" label="群体"></el-table-column>
<el-table-column prop="案件信息" label="案件信息"></el-table-column>
<el-table-column prop="状态" label="状态"></el-table-column>
<el-table-column prop="其他" label="其他"></el-table-column>
</el-table>
</div>
</template>
<script>
import ExcelRead from '@/components/ExcelRead.component.vue'
export default {
name: 'home',
data () {
return {
tableData: [],
}
},
components: {
ExcelRead
},
methods: {
/**
* excel数据已经上传,可以读取了
*/
updateExcel (excelData) {
this.tableData = excelData.body
},
/**
* 编辑表格字段
*/
handleFieldEdit (index) {
this.tableData[index].mode = true
this.$set(this.tableData, index, this.tableData[index])
this.$nextTick(()=>{
this.$refs[`name${index}`].focus()
})
},
/**
* 单元格失去焦点事件
*/
handleFiledBlur (index) {
this.tableData[index].mode = false
this.$set(this.tableData, index, this.tableData[index])
},
/**
* 勾选表格行数据
* @param val
*/
handleSelectionChange (val) {
console.log(val)
}
}
}
</script>