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）

| 参数 | 说明 | 类型 | 可选值 | 默认值 | |------|------|-----|--------|-------| | tableData | 显示的数据 | Object | - | - | | templateData | 模板文件流数据 | Stream | - | - | | fileUrl | 模板文件链接 | String | - | - | | tableType | 表格类型 | String | common/single | common | | isEditable | 是否允许编辑 | Boolean | - | true | | isFixedHead | 是否需要固定表头 | Boolean | - | false | | showDialog | 是否允许展示自定义弹窗 | Boolean | - | false | | headerRows | 表头行数 | Number | - | 1 | | showPagination | 是否需要展示分页 | Boolean | - | false | | cellInfo | 已修改的单元格数据 | Object | - | - | | cellConstraints | 表格类型为single单元格约束信息，表格类型为common时不在属性中传入 | Object | - | {} | | targetValueData | 表格类型为single时回显值 | Object | - | - |

表格-cellConstraints属性

| 属性名 | 描述 | 可选值 | | ------ | ----| ----- | | indicatorType | 单元格要渲染的数据类型 | 文本/数值/日期/百分比 | | interactType | 单元格要渲染的交互类型 | 无/下拉框/日期/输入框/勾选框 | | interactData | interactType为下拉框时的下拉选项 | [{id:"",lovDesc:"",lovValue:""}] |

表格-事件（Table Events）

| 事件名 | 说明 | 参数 | | ------ | ----| ----- | | cell-click | 当单元格被点击时会触发该事件 | cellInfo | | input-change | 输入框发生变化时触发 | cellInfo | | select-change | 下拉框选中值发生变化时触发 | cellInfo |

表格-方法（Table Methods）

| 方法名 | 说明 | 参数 | | ------ | ----| ----- | | getNeedSaveData | 获取发生变动的单元格信息，一般保存时需要 | - |

表格-slot（Table Slot）

| name | 说明 | | ------ | ----| | pagination | 自定义分页的内容 | | dialog | 自定义弹窗的内容 |