[Vue.js] Jspreadsheet 사용하기

이전 포스팅(yonikim.tistory.com/29) 에선 jqxGrid 의 승리로 돌아갔으나, 구현하던 도중 치명적인 오류가 발생하였다. 

분명 editable 을 false 로 해줬는데 copy&paste 가 된다.

 

 

...?

 

 

---

 

jqxGrid.....잠시나마 즐거운 시간이었어.....Say Goodbye...⭐️

🙋‍♀️Jspreadsheet🙋‍♀️ vs jQWidgets > jqxGrid

---

Jspreadsheet 사용하기

---

jexcel 설치

$ npm install jexcel

 

▷ src/App.vue

...
<script>
export default {
  data: () => ({
    menus: [
      {
        title: '홈',
        icon: 'mdi-home',
        to: '/home',
      },
      {
        title: '엑셀',
        icon: 'mdi-file-excel',
        to: '/excel',
      },
    ],
    drawer: true,
  }),
  methods: {
    logout() {
      this.$router.push('/logout')
    },
  },
}
</script>

 

▷ src/components/Excel/Main.vue

<template> 
  <v-container fluid>
    <v-row class="mt-3 mx-1"> 
      <v-col class="px-1" cols="12" xs="12" sm="12" md="12" lg="12"> 
        <div id="spreadsheet" ref="spreadsheet"></div>
      </v-col> 
    </v-row> 
  </v-container> 
</template>
<script>
import jexcelStyle from "jexcel/dist/jexcel.css"; 
import jexcel from "jexcel"; 
export default {
  name: 'Excel',
  data() {
    return {
      data: [{
        id: 1,
        firstname: 'yoni',
        lastname: 'kim',
        productname: 'tistory',
        available: true,
        quantity: 1,
        price: 10000000000,
        total: 1
      }]
    }
  },
  computed: {
    jExcelOptions() {
      return {
        data: this.data,
        columns: [
          { type: 'text', title: '배송방법', name: 'deliveryType', width: "120px", readOnly: true, },
          { text: 'First Name', datafield: 'firstname', width: 200, cellsalign: 'center', align: 'center', editable: false, checked: true },
          { text: 'Last Name', datafield: 'lastname', width: 200, cellsalign: 'center', align: 'center', editable: false, checked: true },
          { text: 'Product', datafield: 'productname', width: 180, cellsalign: 'center', align: 'center', checked: true },
          { text: 'Quantity', datafield: 'quantity', width: 80, cellsalign: 'center', align: 'center, checked: true' },
          { text: 'Unit Price', datafield: 'price', width: 90, cellsalign: 'center', align: 'center', cellsformat: 'c2', checked: true },
          { text: 'Total', datafield: 'total', cellsalign: 'center', align: 'center', cellsformat: 'c2', checked: true }
        ]
      }
    }
  },
  mounted: function() {
    const jExcelObj = jexcel(this.$refs["spreadsheet"], this.jExcelOptions);
    Object.assign(this, { jExcelObj }); 
  }
}
</script>

 

▷ src/router/index.js

import VueRouter from 'vue-router'

import Home from '@/components/Home'
import Excel from '@/components/Excel/Main'
import LogoutSuccess from '@/components/Logout'

const router = new VueRouter({
    mode: 'history',
    routes: [
        { path: '/', name: 'Index', component: Home, },
        { path: '/home', name: 'Home', component: Home, },
        { path: '/excel', name: 'Excel', component: Excel, },
        { path: '/logout', component: LogoutSuccess, }
    ]
})

export default router