How to use it in Vue?

[QiRongTech]

How to use it in Vue? Could you please provide sample example , with the capability to show my local formatted excel file.

[carlosdaniel26]

component example:

<!-- WolfTable.vue -->
<template>
    <div id="table"></div>
  </template>
  
  <script>
  import '@wolf-table/table/dist/table.min.css';
  import Table from "@wolf-table/table";
  
  export default {
    name: 'WolfTable',
    mounted() {
      const t = Table.create(
        '#table',
        () => 1400,
        () => 600,
        {
          scrollable: true,
          resizable: true,
          selectable: true,
          editable: true,
          copyable: true,
        }
      )
        .freeze('D5')
        .merge('F10:G11')
        .merge('I10:K11')
        .addBorder('E8:L12', 'all', 'medium', '#21ba45')
        .formulaParser((v) => `${v}-formula`)
        .data({
          styles: [
            { bold: true, strikethrough: true, color: '#21ba45', italic: true, align: 'center', fontSize: 12 },
          ],
          cells: [
            [0, 0, 'abc'],
            [1, 1, 100],
            [2, 6, { value: 'formua', style: 0 }],
            [9, 5, { value: '', formula: '=sum(A1:A10)' }],
          ],
        })
        .render();
  
      // add style
      const si = t.addStyle({
        bold: true,
        italic: true,
        underline: true,
        color: '#1b1c1d',
      });
      // set cell
      t.cell(2, 2, { value: 'set-value', style: si }).render();
  
      // get cell
      console.log('cell[2,2]:', t.cell(2, 2));
    }
  };
  </script>