vxe-table 导入 excel xlsx 时,单元格内容值丢失前面0解决方法

vxe-table 导入 excel xlsx 时,单元格内容值丢失前面0解决方法,不如到出数据为 "003200" ,导出到 xlsx 时,由于 xlsx 会自定义格式化数字,所以 0 就没了;解决方法就是知道为字符串类型,可以通过 column.cell-type 设置

查看官网:vxetable.cn gitbub:github.com/x-extends/v... gitee:gitee.com/x-extends/v...

html 复制代码
<template>
  <div>
    <vxe-button @click="exportEvent">直接导出 XLSX 文件</vxe-button>
    <vxe-grid ref="gridRef" v-bind="gridOptions"></vxe-grid>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'

const gridRef = ref()

const gridOptions = reactive({
  border: true,
  showFooter: true,
  columns: [
    { field: 'seq', type: 'seq', width: 70 },
    {
      title: '分组1',
      children: [
        { field: 'name', title: 'Name' },
        { field: 'role', title: 'Role' }
      ]
    },
    { field: 'sex', title: 'Sex' },
    {
      field: 'age',
      title: 'Age',
      formatter ({ cellValue }) {
        return `内容:${cellValue}`
      },
      footerFormatter ({ itemValue }) {
        return `尾部:${itemValue}`
      }
    },
    { field: 'no1', title: 'NO1' },
    { field: 'no2', title: 'NO2 String', cellType: 'string' }
  ],
  data: [
    { id: 10001, name: '张三', role: 'Develop', sex: 'Man', age: 28, no1: '028', no2: '028' },
    { id: 10002, name: '李四', role: '研发', sex: 'Women', age: 36, no1: '220', no2: '220' },
    { id: 10003, name: '王五', role: '产品经理', sex: 'Man', age: 44, no1: '003200', no2: '003200' },
    { id: 10004, name: '老六', role: 'Designer', sex: 'Women', age: 38, no1: '02040', no2: '02040' }
  ],
  footerData: [
    { seq: '合计', name: '12人', age: '999', no1: '356' }
  ]
})

const exportEvent = () => {
  const $grid = gridRef.value
  if ($grid) {
    $grid.exportData({
      type: 'xlsx'
    })
  }
}
</script>

gitee.com/x-extends/v...

相关推荐
鶴哥只手遮天13 小时前
Vue 3 核心源码深度剖析系列(v3.5.44)-第 1 章 项目全景:monorepo 架构与工程化体系
前端·vue.js·开源
OpenTiny社区14 小时前
多会话 + 流式输出怎么落地?TinyRobot Kit 对话数据层深度解析
前端·vue.js
破烂三角裤17 小时前
Vue 3 自动生成汉字拼音:pinyin-pro、Ruby 标签
vue.js
顽疲17 小时前
java vue springboot 养老系统源码详解:退住 care_out 审批结算与腾床事务实践
java·vue.js·spring boot·vue养老·springboot养老·java养老
雪芽蓝域zzs17 小时前
第 10 节:地图点击逆地理编码(点击地图获取经纬度 + 地址)
vue.js
斯内普吖17 小时前
(开源)线上花店系统实战指南 基于 Java + SSM + Vue + MySQL
java·vue.js·mysql·开源
溪语流沙19 小时前
【Web全栈进阶】Vue Router + Pinia:SPA路由与全局状态
前端·javascript·vue.js
u01110267520 小时前
WebP 转成 PNG 后为什么更大?图片格式转换不等于压缩
前端·javascript·vue.js
seconp20 小时前
基于Spring Boot和Vue 3的智慧旅游网站:住宿预订、行程规划与千问接入
vue.js·spring boot·毕业设计·软件工程·课程设计·旅游·毕设
daols8821 小时前
vue 甘特图组件 vxe-gantt 修改滚动条样式-让滚动条自动隐藏
javascript·vue.js·甘特图