使用vue3+elementplus做一个动态的Excel表格样式页面，支持合并单元格（增加输入框输入对应表格位置合并），更改背景颜色即可，

好的，这是一个比较复杂的功能，需要涉及到 Vue3 和 Element Plus 的使用，以及表格的渲染、合并单元格、修改样式等操作。以下是一个简单的实现思路，供参考：

1. 安装 Vue3 和 Element Plus：

npm install vue@next
npm install element-plus

2. 在 Vue3 中引入 Element Plus：

在 main.js 中添加以下代码：

import { createApp } from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus'
import 'element-plus/lib/theme-chalk/index.css'

createApp(App).use(ElementPlus).mount('#app')

3. 定义表格数据：

可以使用一个二维数组来表示表格数据，例如：

data() {
  return {
    tableData: [
      ['A1', 'B1', 'C1'],
      ['A2', 'B2', 'C2'],
      ['A3', 'B3', 'C3']
    ],
    mergedCells: [] // 记录合并单元格信息
  }
}

其中，tableData 是一个二维数组，表示表格的内容；mergedCells 是一个数组，用于记录合并单元格的信息，例如：

mergedCells: [
  { row: 1, col: 1, rowspan: 2, colspan: 2 }
]

表示将第 2 行第 2 列的单元格合并为一个跨度为 2 行 2 列的单元格。

4. 渲染表格：

使用 el-table 组件来渲染表格，例如：

<el-table :data="tableData" border>
  <template v-for="(row, rowIndex) in tableData">
    <tr :key="rowIndex">
      <template v-for="(cell, colIndex) in row">
        <td :key="colIndex" :rowspan="getMergedRowspan(rowIndex, colIndex)" :colspan="getMergedColspan(rowIndex, colIndex)" :style="getCellStyle(rowIndex, colIndex)">
          <div v-if="!isMergedCell(rowIndex, colIndex)">
            {{ cell }}
          </div>
        </td>
      </template>
    </tr>
  </template>
</el-table>

其中，getMergedRowspan、getMergedColspan 和 getCellStyle 是自定义的方法，用于获取合并单元格的行跨度、列跨度和样式。

5. 实现合并单元格：

可以使用一个输入框来输入合并单元格的信息，例如：

<el-form label-width="80px">
  <el-form-item label="合并单元格">
    <el-input v-model="mergeInput" placeholder="请输入要合并的单元格位置"></el-input>
    <el-button type="primary" @click="mergeCells">合并</el-button>
  </el-form-item>
</el-form>

在 mergeCells 方法中，可以解析输入框中的内容，更新 mergedCells 数组，例如：

mergeCells() {
  const [start, end] = this.mergeInput.split(':')
  const [startRow, startCol] = this.getCellPosition(start)
  const [endRow, endCol] = this.getCellPosition(end)
  this.mergedCells.push({
    row: startRow,
    col: startCol,
    rowspan: endRow - startRow + 1,
    colspan: endCol - startCol + 1
  })
}

其中，getCellPosition 是一个自定义的方法，用于获取单元格的位置，例如：

getCellPosition(cell) {
  const row = cell.charCodeAt(0) - 'A'.charCodeAt(0)
  const col = parseInt(cell.slice(1)) - 1
  return [row, col]
}

6. 改变单元格样式：

可以使用一个颜色选择器来选择背景颜色，例如：

<el-form-item label="背景颜色">
  <el-color-picker v-model="bgColor"></el-color-picker>
</el-form-item>

在 getCellStyle 方法中，可以根据 mergedCells 和 bgColor 来计算单元格的样式，例如：

getCellStyle(row, col) {
  const mergedCell = this.getMergedCell(row, col)
  if (mergedCell) {
    return {
      'background-color': this.bgColor,
      'text-align': 'center',
      'font-weight': 'bold'
    }
  }
  return {
    'text-align': 'center'
  }
}

其中，getMergedCell 是一个自定义的方法，用于获取一个单元格所在的合并单元格，例如：

getMergedCell(row, col) {
  for (const cell of this.mergedCells) {
    if (row >= cell.row && row < cell.row + cell.rowspan && col >= cell.col && col < cell.col + cell.colspan) {
      return cell
    }
  }
  return null
}

7. 实现拆分单元格：

可以使用鼠标右键菜单来拆分单元格，例如：

<div @contextmenu.prevent="showContextMenu($event)">
  <el-dropdown-menu ref="contextMenu">
    <el-dropdown-item @click="splitCell">拆分单元格</el-dropdown-item>
  </el-dropdown-menu>
</div>

在 showContextMenu 方法中，可以根据鼠标位置显示右键菜单，例如：

showContextMenu(event) {
  event.preventDefault()
  const x = event.clientX
  const y = event.clientY
  const contextMenu = this.$refs.contextMenu
  contextMenu.style.display = 'block'
  contextMenu.style.left = x + 'px'
  contextMenu.style.top = y + 'px'
  this.contextMenuCell = this.getCellInfo(event.target)
}

其中，getCellInfo 是一个自定义的方法，用于获取鼠标右键所在的单元格的位置和合并单元格信息，例如：

getCellInfo(target) {
  const row = target.parentElement.rowIndex - 1
  const col = target.cellIndex
  const mergedCell = this.getMergedCell(row, col)
  return {
    row,
    col,
    rowspan: mergedCell ? mergedCell.rowspan : 1,
    colspan: mergedCell ? mergedCell.colspan : 1
  }
}

在 splitCell 方法中，可以根据 contextMenuCell 的信息，更新 mergedCells 数组，例如：

splitCell() {
  const { row, col, rowspan, colspan } = this.contextMenuCell
  const index = this.mergedCells.findIndex(cell => cell.row === row && cell.col === col)
  if (index >= 0) {
    this.mergedCells.splice(index, 1)
    for (let i = row; i < row + rowspan; i++) {
      for (let j = col; j < col + colspan; j++) {
        if (i !== row || j !== col) {
          this.mergedCells.push({
            row: i,
            col: j,
            rowspan: 1,
            colspan: 1
          })
        }
      }
    }
  }
}

这样，一个支持动态样式和合并单元格的 Excel 表格就完成了！