vue7(DevExtreme-DataGrid이용하기)

dev-grid를 사용하려 하는데 참고할게 공식문서밖에 없다.

 

https://js.devexpress.com/Documentation/Guide/Vue_Components/DevExtreme_Vue_Components/

DevExtreme Vue Components: DevExtreme - JavaScript UI Components for Angular, React, Vue and jQuery by DevExpress 21.2

 

공식문서 참고하기

 

data파일을 연결하면 자동으로 table을 만들어준다.

다양한 옵션이 있어서 편하고 쉽게 사용 가능한 라이브러리.

 

1. 먼저 json형식의 data 파일 만들기 (mockData.js)

//mockData.js

const users =[
        {
         "userId" : 1,
         "alphabet" : "a",
         "age" : 20,
         "color" : "pink",
         "fruit" : "tomato"
        },
        {
         "userId" : 2,
         "alphabet" : "b",
         "age" : 28,
         "color" : "orange",
         "fruit" : "banana"
        },
        {
         "userId" : 3,
         "alphabet" : "c",
         "age" : 14,
         "color" : "blue",
         "fruit" : "berry"
        },
      ]

export default {
    userData() {
        return users;
    }
}

 

2. (vue6글에서 만든) About.vue에다가 table그리기

//About.vue

<template>
  <div>
    <h1>ABOUT</h1>
    	<DxDataGrid
      		key-expr="userId"
        	:data-source="users">
    </DxDataGrid>
  </div>
</template>

key-expr 에다가 id key 값을 넣어주고

:data-source 에다가 위에서 데이터 파일 선언한 이름 넣어주면 된다

 

//About.vue

<script>
import DxDataGrid from 'devextreme-vue/data-grid';
import mockData from '../mockData';

export default {
	name: "About",
  components: {
		DxDataGrid,
	  },
	data() {
        return {
            users: mockData.userData(),
        }
    },
}
</script>

 1. devextreme-vue/data-grid import 해주고

 2. mockData 만든거 import

 3. DxDataGrid를 받아서 사용하기 때문에 components에 추가하기

 4. return 에다가는 mockData파일의 userData를 users로 보내고 위에 <template>에서 users로 받아주면 된다!

그럼 다음과 같이 테이블이 자동 생성된다!

테이블의 다양한 옵션은 세부설정하면서 다뤄보기!