<template>
  <div id="x-spreadsheet"></div>
</template>

<script>
  import Spreadsheet from "x-data-spreadsheet";
  import zhCN from "x-data-spreadsheet/dist/locale/zh-cn";
  export default {
    created() {},
    mounted() {
      Spreadsheet.locale("zh-cn", zhCN);
      const s = new Spreadsheet("#x-spreadsheet", {
          showToolbar: true,
          showGrid: true,
          showContextmenu: true,
          view: {
            height: () => document.querySelector("#x-spreadsheet").clientHeight - 25,
            width: () => document.querySelector("#x-spreadsheet").clientWidth,
          }
        })
        .change(data => {

        });
    }
  };
</script>


<style>
  #x-spreadsheet {
    width: 100%;
    height: 100%;
    overflow: auto;
  }
</style>