jexcel使用示例

[klren0312]

<template>
  <div class="home">
    <div class="block">
      <div id="excel"></div>
    </div>
    <button @click="getData">getData</button>
  </div>
</template>

<script lang="ts">
import jexcel from 'jexcel'
import 'jexcel/dist/jexcel.css'
import { Vue, Component } from 'vue-property-decorator'
import createTimePicker from '@/components/create'

@Component({
  name: 'jexcel'
})
export default class Home extends Vue {
  private tableData: Array<any> = [
    [], [], [], [], [],
    [], [], [], [], [],
    [], [], [], [], []
  ];

  private customerCol: any = {
    closeEditor: (cell) => {
      console.log(cell.children[0].children[0].value)
      const value = cell.children[0].children[0].value
      cell.innerHTML = value
      return value
    },
    openEditor: (cell) => {
      // Update cell
      cell.classList.add('editor')
      cell.innerHTML = ''
      createTimePicker(cell)
    },
    getValue: (cell) => {
      return cell.innerHTML
    },
    setValue: (cell, value) => {
      cell.innerHTML = value
    }
  }

  private options: Record<string, any> = {
    data: this.tableData,
    allowToolbar: true,
    columns: [
      { type: 'numeric', title: '*手机号', width: '120px' },
      { type: 'text', title: '姓氏', width: '120px' },
      { type: 'text', title: '房型', width: '120px' },
      { type: 'dropdown', title: '支付状态', width: '150px', source: [{ id: 1, name: '未支付' }, { id: 2, name: '已支付' }] },
      { type: 'calendar', title: '到店时间', width: '150px', options: { format: 'HH24:MI', time: 1, textDone: '确定', textReset: '重置', textUpdate: '更新' } },
      { type: 'text', title: '时间', width: '120px', editor: this.customerCol }
    ],
    text: {
      noRecordsFound: '未找到',
      showingPage: '显示 {1} 条中的第 {0} 条',
      show: '显示 ',
      search: '搜索',
      entries: ' 条目',
      columnName: '列标题',
      insertANewColumnBefore: '在此前插入列',
      insertANewColumnAfter: '在此后插入列',
      deleteSelectedColumns: '删除选定列',
      renameThisColumn: '重命名列',
      orderAscending: '升序',
      orderDescending: '降序',
      insertANewRowBefore: '在此前插入行',
      insertANewRowAfter: '在此后插入行',
      deleteSelectedRows: '删除选定行',
      editComments: '编辑批注',
      addComments: '插入批注',
      comments: '批注',
      clearComments: '删除批注',
      copy: '复制',
      paste: '粘贴',
      saveAs: '保存为',
      about: '关于',
      areYouSureToDeleteTheSelectedRows: '确定删除选定行?',
      areYouSureToDeleteTheSelectedColumns: '确定删除选定列?',
      thisActionWillDestroyAnyExistingMergedCellsAreYouSure: '这一操作会破坏所有现存的合并单元格，确认操作？',
      thisActionWillClearYourSearchResultsAreYouSure: '这一操作会清空搜索结果，确认操作？',
      thereIsAConflictWithAnotherMergedCell: '与其他合并单元格有冲突',
      invalidMergeProperties: '无效的合并属性',
      cellAlreadyMerged: '单元格已合并',
      noCellsSelected: '未选定单元格'
    }
  };

  private spreadsheet: any;
  mounted () {
    this.spreadsheet = jexcel(document.getElementById('excel'), this.options)
  }

  getData () {
    console.log(this.spreadsheet.getData())
  }
}
</script>

<style lang="scss">
  #excel {
    max-height: 300px;
  }
  .jcontextmenu > div:last-child {
    display: none;
  }
  .jcalendar-table {
    display: none;
  }
</style>

[klren0312]

<template>
  <div :id="instanceId"></div>
</template>
<script>
import jexcel from 'jexcel' // excel组件
import 'jexcel/dist/jexcel.css'
export default {
  name: 'ExcelTable',
  props: {
    instanceId: {
      type: String,
      default: 'excel-table'
    }, // excel的DOM id， 防止初始化相互干扰
    excelData: {
      type: Array,
      default: () => [[], [], []]
    }, // excel数据
    excelColumns: {
      type: Array,
      default: () => [
        { type: 'text', title: 'test', width: '150px' },
        { type: 'text', title: 'test', width: '150px' },
        { type: 'text', title: 'test', width: '150px' }
      ]
    } // excel列标题
  },
  data() {
    return {
      excelInstance: null, // excel实例
      excelOptions: {
        data: this.excelData,
        allowToolbar: true,
        columns: this.excelColumns,
        allowDeletingAllRows: false, // 允许删除所有行
        allowRenameColumn: false, // 允许重命名列
        allowDeleteColumn: false, // 允许删除列
        tableOverflow: true, // 允许滚动
        tableHeight: '400px', // 最大高度
        text: {
          noRecordsFound: '未找到',
          showingPage: '显示 {1} 条中的第 {0} 条',
          show: '显示 ',
          search: '搜索',
          entries: ' 条目',
          columnName: '列标题',
          insertANewColumnBefore: '在此前插入列',
          insertANewColumnAfter: '在此后插入列',
          deleteSelectedColumns: '删除选定列',
          renameThisColumn: '重命名列',
          orderAscending: '升序',
          orderDescending: '降序',
          insertANewRowBefore: '在此前插入行',
          insertANewRowAfter: '在此后插入行',
          deleteSelectedRows: '删除选定行',
          editComments: '编辑批注',
          addComments: '插入批注',
          comments: '批注',
          clearComments: '删除批注',
          copy: '复制',
          paste: '粘贴',
          saveAs: '保存为',
          about: '关于',
          areYouSureToDeleteTheSelectedRows: '确定删除选定行?',
          areYouSureToDeleteTheSelectedColumns: '确定删除选定列?',
          thisActionWillDestroyAnyExistingMergedCellsAreYouSure:
            '这一操作会破坏所有现存的合并单元格，确认操作？',
          thisActionWillClearYourSearchResultsAreYouSure:
            '这一操作会清空搜索结果，确认操作？',
          thereIsAConflictWithAnotherMergedCell: '与其他合并单元格有冲突',
          invalidMergeProperties: '无效的合并属性',
          cellAlreadyMerged: '单元格已合并',
          noCellsSelected: '未选定单元格'
        } // 翻译
      }
    }
  },
  mounted() {
    this.$nextTick(() => {
      if (this.excelInstance) {
        document.getElementById(this.instanceId).innerHTML = ''
        this.excelInstance = null
      }
      this.excelOptions.data = this.excelData
      this.excelInstance = jexcel(
        document.getElementById(this.instanceId),
        this.excelOptions
      )
    })
  }
}
</script>
<style>
.jcontextmenu>div:last-child {
  display: none;
}

.jexcel_selectall:after {
  content: '序号';
  display: block;
  text-align: center;
}
</style>