vue使用vue-xlsx-table包读取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>