# vue3-excel

**Repository Path**: starbugs/vue3-excel

## Basic Information

- **Project Name**: vue3-excel
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-01-19
- **Last Updated**: 2026-01-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# vue-excel
简单基于vue3的表格操作相关

## 简单编辑excel，修改后有对比色
- params `mode`: `read` | `edit`
- params `cellWidth`
- params `cellHeight`
- params `minRows`
- params `minCols`
```vue
<script>
  import {Excel} from "@huahuadavids/vuejs-excel"
  import { onMounted, ref } from "vue"
  const excelRef1 = ref()
  const before = [
    { 图纸号: "IMG108367344", 零件号: 18163487731 },
    { 图纸号: "IMG108367344", 零件号: 1123423535 },
    { 图纸号: "IMG108367344", 零件号: 11354564464 }
  ]

  const after = [
    { 图纸号: "IMG108367344", 零件号: 181634877311 },
    { 图纸号: "IMG108367344", 零件号: 11234235351 },
    { 图纸号: "IMG108367344", 零件号: 113545644641}
  ]
  
  // update the data
  setTimeout(() => {
    excelRef1.value.setOriginData(after)
    excelRef1.value.setGridData(before)
  }, 300)
  
  // 获取修改后的数据
  console.log(excelRef1.value.getGridData())
</script>
<template>
 <Excel ref="excelRef1" mode="read" :cell-width="150"/>
</template>
```

## 导出excel
```js
  import {exportArrayToExcel} from "@huahuadavids/vuejs-excel"
  const map1 = {
    当前月份: "cur_month",
    工位: "work_station",
    返工成本: "rework_cost",
    机型: "plane_type"
  }
  const params = {
    title: Object.keys(map1),
    key: Object.values(map1),
    data: this.data2, // 数据源
    autoWidth: true, //autoWidth等于true，那么列的宽度会适应那一列最长的值
    filename: '返工成本'
  }
  exportArrayToExcel(params)
```

## 加载在线的excel
```vue
<script>
  import {ExcelView} from "@huahuadavids/vuejs-excel"
</script>
<template>
  <excel-view :url="https://google.com/test.xlsx"/>
</template>


```