<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,
        }
    })
      //.loadData({}) // load data1
      .change(data => {
        console.log(data)
      });
    //s.validate();
  }
};
</script>


<style>
#x-spreadsheet{
    width: 100%;
    height: 100%;
    overflow: auto;
}
/* .x-spreadsheet-toolbar,
.x-spreadsheet-sheet
{
    max-width: 100% !important;
    max-height: 100% !important;
}  */
</style>
