博客 / 詳情

返回

vxe-table 導入 excel xlsx 時,單元格內容值丟失前面0解決方法

vxe-table 導入 excel xlsx 時,單元格內容值丟失前面0解決方法,不如到出數據為 "003200" ,導出到 xlsx 時,由於 xlsx 會自定義格式化數字,所以 0 就沒了;解決方法就是知道為字符串類型,可以通過 column.cell-type 設置

查看官網:https://vxetable.cn
gitbub:https://github.com/x-extends/vxe-table
gitee:https://gitee.com/x-extends/vxe-table

image

image

<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>

https://gitee.com/x-extends/vxe-table

user avatar
0 位用戶收藏了這個故事!

發佈 評論

Some HTML is okay.