Vue2 导入有单元格合并的Excel文件并且正确显示？

Question

目前在用Vue2 + ElementUI做项目，遇到一个问题：Vue2 导入有单元格合并的Excel文件并且正确显示，然后点击单元格可以编辑内容？
现在只实现了Vue2导入完全没有单元格合并情况的Excel文件，点击可以编辑。感谢提供方案和思路。

Answer 1

下午好🌅🌅🌅
本答案参考通义千问

Vue2 导入带合并单元格的Excel文件并显示编辑方案

要在Vue2项目中实现导入带合并单元格的Excel文件并正确显示和编辑，你可以采用以下方案：

方案概述

1. 使用 xlsx 库解析Excel文件
2. 处理合并单元格信息
3. 使用ElementUI的表格组件显示数据
4. 实现编辑功能

详细实现步骤

1. 安装依赖

首先安装必要的库：

npm install xlsx file-saver

2. 实现Excel导入组件

<template>
  <div>
    <el-upload
      action=""
      :auto-upload="false"
      :on-change="handleFileChange"
      accept=".xlsx, .xls"
    >
      <el-button type="primary">导入Excel</el-button>
    </el-upload>
    
    <el-table
      :data="tableData"
      border
      style="width: 100%; margin-top: 20px"
      :span-method="arraySpanMethod"
    >
      <el-table-column
        v-for="(col, index) in tableColumns"
        :key="index"
        :prop="col.prop"
        :label="col.label"
      >
        <template slot-scope="scope">
          <div v-if="scope.row.isEdit">
            <el-input v-model="scope.row[col.prop]" @blur="handleEdit(scope.row)"></el-input>
          </div>
          <div v-else @click="handleCellClick(scope.row, col.prop)">
            {{ scope.row[col.prop] }}
          </div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import * as XLSX from 'xlsx'

export default {
  data() {
    return {
      tableData: [],
      tableColumns: [],
      merges: [], // 存储合并单元格信息
      originalData: [] // 存储原始数据用于恢复合并单元格
    }
  },
  methods: {
    handleFileChange(file) {
      const reader = new FileReader()
      reader.onload = e => {
        const data = new Uint8Array(e.target.result)
        const workbook = XLSX.read(data, { type: 'array' })
        const firstSheetName = workbook.SheetNames[0]
        const worksheet = workbook.Sheets[firstSheetName]
        
        // 获取合并单元格信息
        this.merges = worksheet['!merges'] || []
        
        // 转换为JSON
        const jsonData = XLSX.utils.sheet_to_json(worksheet, { header: 1 })
        
        // 处理表头
        const headers = jsonData[0]
        this.tableColumns = headers.map((header, index) => ({
          prop: `col${index}`,
          label: header || `列${index + 1}`
        }))
        
        // 处理数据行
        const rows = jsonData.slice(1)
        this.tableData = rows.map(row => {
          const obj = { isEdit: false }
          row.forEach((cell, index) => {
            obj[`col${index}`] = cell
          })
          return obj
        })
        
        // 保存原始数据用于恢复合并单元格
        this.originalData = JSON.parse(JSON.stringify(this.tableData))
      }
      reader.readAsArrayBuffer(file.raw)
    },
    
    // 处理合并单元格
    arraySpanMethod({ row, column, rowIndex, columnIndex }) {
      for (const merge of this.merges) {
        const { s, e } = merge // s: start, e: end
        if (
          rowIndex >= s.r && 
          rowIndex <= e.r && 
          columnIndex >= s.c && 
          columnIndex <= e.c
        ) {
          if (rowIndex === s.r && columnIndex === s.c) {
            return {
              rowspan: e.r - s.r + 1,
              colspan: e.c - s.c + 1
            }
          } else {
            return {
              rowspan: 0,
              colspan: 0
            }
          }
        }
      }
    },
    
    // 单元格点击事件
    handleCellClick(row, prop) {
      // 检查是否是合并单元格的主单元格
      const isMainCell = this.isMainCell(row, prop)
      if (isMainCell) {
        this.$set(row, 'isEdit', true)
      }
    },
    
    // 检查是否是合并单元格的主单元格
    isMainCell(row, prop) {
      const rowIndex = this.tableData.indexOf(row)
      const columnIndex = this.tableColumns.findIndex(col => col.prop === prop)
      
      for (const merge of this.merges) {
        const { s } = merge
        if (rowIndex === s.r && columnIndex === s.c) {
          return true
        }
      }
      return true
    },
    
    // 结束编辑
    handleEdit(row) {
      row.isEdit = false
      // 如果需要同步更新合并单元格的其他单元格
      this.updateMergedCells(row)
    },
    
    // 更新合并单元格的其他单元格
    updateMergedCells(row) {
      const rowIndex = this.tableData.indexOf(row)
      
      for (const merge of this.merges) {
        const { s, e } = merge
        if (rowIndex === s.r) {
          // 找到被合并的单元格范围
          for (let r = s.r; r <= e.r; r++) {
            for (let c = s.c; c <= e.c; c++) {
              if (r !== s.r || c !== s.c) {
                // 更新其他单元格的值
                const prop = this.tableColumns[c].prop
                this.tableData[r][prop] = row[this.tableColumns[s.c].prop]
              }
            }
          }
        }
      }
    }
  }
}
</script>

关键点说明

1. 合并单元格处理：

   • 使用 worksheet['!merges'] 获取合并单元格信息
   • 通过 arraySpanMethod 方法设置表格的合并属性

2. 编辑功能：

   • 只允许编辑合并单元格的主单元格（左上角单元格）
   • 编辑完成后同步更新合并区域的其他单元格

3. 数据恢复：

   • 保存原始数据用于恢复合并单元格状态

优化建议

1. 性能优化：

   • 对于大型Excel文件，考虑分页加载
   • 使用虚拟滚动优化渲染性能

2. 用户体验：

   • 添加加载状态提示
   • 提供导入错误反馈
   • 添加导出功能

3. 功能扩展：

   • 支持更多Excel格式
   • 添加撤销/重做功能
   • 支持自定义样式

这个方案应该能满足你的需求，如果有特殊要求可以在此基础上进行调整。