vue-sheet-table v1.0.6

vue-sheet-table

●介绍

适用于Vue的Excel转换Table渲染的组件，支持多种交互操作，支持文件流和文件url导入，支持单元格编辑

●使用

引入

在main.ts中全局引入或者在指定组件中引入

import SheetTable from "vue-sheet-table";
import 'vue-sheet-table/sheet-table.css'
Vue.use(SheetTable);

基础表格

excel文件转换成table,只有展示功能

<template>
    <button @click="getFile" type="primary">导入文件</button>
     <input
        style="font-size: 16px; display: none"
        type="file"
        ref="uploadRef"
        accept="application/vnd.msexcel,application/vnd.openxml
        formats-officedocument.spreadsheetml.sheet"
        @change="uploadExcel"
      />
    <SheetTable
      ref="sheetTable"
      :templateData="templateData"
    >
    </SheetTable>
</template>
<script lang="ts">
import { Vue, Component } from "vue-property-decorator";
import SheetTable from "@/components/sheet-table";
@Component({
  components: { SheetTable },
})
export default class HomeIndex extends Vue {
  templateData: any = {}; //模板文件数据
  fileUrl: string = ""; //模板文件url
  /**
   * 打开文件管理器选择文件 导入方式1
   */
  public getFile() {
    const pEle: any = this.$refs.uploadRef;
    pEle.click();
  }
  /**
   * 通过上传本地文件渲染数据渲染
   */
  public async uploadExcel() {
    const pEle: any = this.$refs.uploadRef;
    // 传入模板文件流信息
    this.templateData = pEle.files[0];
  }
  /**
   * getUrl 导入方式2
   */
  public async getUrl() {
    const url ="http://xxxxxx"
    this.fileUrl = url;
  }
}
</script>

当excel为文件流时，使用templateData传入文件流数据，为url时，使用fileUrl传入文件url即可

常规数据表格渲染

支持数据的批量导入渲染，接收一个格式化的对象

<template>
    <SheetTable
      ref="sheetTable"
      :templateData="templateData"
      :tableData="tableData"
      tableType="common"
    >
    </SheetTable>
</template>
<script lang="ts">
import { Vue, Component } from "vue-property-decorator";
import SheetTable from "@/components/sheet-table";
@Component({
  components: { SheetTable },
})
export default class HomeIndex extends Vue {
  tableData: any = {
      "0":{
          "0":{
              r: 0,
              c: 0,
              v: {},
              viewStr: "value1",
              isShow: true,
              cellConstraints: {
                  "indicatorType" : "文本",
                  "interactFormat" : "@",
                  "interactType" : "无",
              }
          },
          "1":{
              r: 0,
              c: 1,
              v: {},
              viewStr: "value1",
              isShow: true,
              cellConstraints: {
                  "indicatorType" : "文本",
                  "interactFormat" : "@",
                  "interactType" : "无",
              }
          }
      }
  };//表格渲染数据
  templateData: any = {}; //模板文件流数据
}
</script>

tableData中设置cellConstraints属性可以对单元格显示的格式进行约束

单条数据表格渲染

支持单条数据导入渲染，接收一个特殊对象

<template>
  <section class="home-index">
    <div>
      <button @click="getFile" type="primary">导入文件</button>
      <input
        style="font-size: 16px; display: none"
        type="file"
        ref="uploadRef"
        accept="application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
        @change="uploadExcel"
      />
    </div>
    <SheetTable
      ref="sheetTable"
      :tableData="tableData"
      :cellConstraints="cellConstraints"
      :targetValueData="targetValueData"
      :templateData="templateData"
      tableType="single"
    >
    </SheetTable>
  </section>
</template>

<script lang="ts">
import { Vue, Component } from "vue-property-decorator";
import SheetTable from "@/components/sheet-table";
@Component({
  components: { SheetTable },
})
export default class HomeIndex extends Vue {
  tableData: any = {}; //表格渲染数据
  cellConstraints: any = {}; //单元格约束条件
  targetValueData: any = {}; //回显值列表
  templateData: any = {}; //模板文件数据

 //打开文件管理器选择文件
  public getFile() {
    const pEle: any = this.$refs.uploadRef;
    pEle.click();
  }
  //通过上传本地文件渲染数据渲染
  public async uploadExcel() {
    // 传入单元格约束信息
     this.cellConstraints = {
       "3_5": {
         indicatorType: "数值",
         interactData: null,
         interactType: "输入框",
       },
       "3_11": {
         indicatorType: "数值",
         interactData: null,
         interactType: "无",
       },
     };
     //传入回显值信息
     this.targetValueData = {
       "3_5": 111,
       "3_11": 22,
     };
    const pEle: any = this.$refs.uploadRef;
    // 传入模板文件流信息
    this.templateData = pEle.files[0];
  }
}
</script>

targetValueData是单元格赋值数据，cellConstraints是单元格约束条件，两个都是以属性的形式传入

数据表格编辑保存

支持下拉框、输入框、勾选框、日期选择和自定义弹窗形式进行编辑

<template>
  <button @click="saveClick" type="primary">保存</-button>
  <section class="home-index">
    <SheetTable
      ref="sheetTable"
      :tableData="tableData"
      :templateData="templateData"
      :cellInfo="cellInfo"
      @input-change="editChange"
      @select-change="editChange"
      @cell-click="editChange"
    >
    </SheetTable>
  </section>
</template>
<script lang="ts">
import { Vue, Component } from "vue-property-decorator";
import SheetTable from "@/components/sheet-table";
@Component({
  components: { SheetTable },
})
export default class HomeIndex extends Vue {
  tableData: any = {}; //表格渲染数据
  templateData: any = {}; //模板文件数据
  cellInfo: any = {}; //改变的单元格信息
  /**
   * 打开文件管理器选择文件
   */
  public getFile() {
    const pEle: any = this.$refs.uploadRef;
    pEle.click();
  }
  /**
   * 通过上传本地文件渲染数据渲染
   */
  public async uploadExcel() {
    const pEle: any = this.$refs.uploadRef;
    // 传入模板文件流信息
    this.templateData = pEle.files[0];
  }
  /**
   * 单元格编辑
   */
  public async editChange(cellInfo: any) {
    this.cellInfo = cellInfo;
  }
    /**
   * 获取保存的数据
   */
  public async saveClick() {
    const refs: any = this.$refs.sheetTable;
    const res = await refs.getNeedSaveData();
  }
}
</script>

●用法API

表格-属性（Table Attributes）

表格-cellConstraints属性

表格-事件（Table Events）

表格-方法（Table Methods）

表格-slot（Table Slot）