[Vuetify] v-data-table

데이터(객체)를 table 형태로 보여주는 컴포넌트이다.

코드를 보면서 설명하는 것이 이해하는데 더 좋을 것 같다.

 

코드

tempate: `
	<v-data-table
        v-model="table.selected"
        :loading="table.loading"
        :loading-text="'데이터를 요청 중입니다.'"
        :headers="table.headers"
        :items="tableItems"
        :items-per-page="10"
        no-data-text="데이터가 없습니다."
        show-select
	>
`,
data() {
    return {
        table: {
            selected: [],
            loading: true,
            headers: [
                {text: '번호', value: 'seq'},
                {text: '이름', value: 'name'},
                {text: '사용여부', value: 'useYn'},
                {text: '등록일', value: 'regDt'},
                {text: '수정일', value: 'uptDt'},
            ],
        },
        data: [],
    }
},
created() {
	// data 가져오기
	this.data = this.getData()
},
computed: {
    // 테이블 set
    tableItems() {
        let results = []
        this.data.map((v) => {
            v.id = v.seq
            v.regDt = new Date(v.regDt).format('yyyy-MM-dd(KS) HH:mm:ss');
            v.uptDt = new Date(v.uptDt).format('yyyy-MM-dd(KS) HH:mm:ss');
            results.push(v);
        });
        return results
    }
},
methods: {
	// 서버에서 데이터 가져오기
	getData() {
    	...
    }
},

 

v-data-table

v-model : table.selected 배열에 선택한 객체를 담는다.

loading : true일 경우 loading한다.

loading-text : loading간 출력할 텍스트

headers : 테이블 헤더를 설정한다.(text는 헤더명, value는 대응되는 데이터)

items : 테이블로 보여줄 데이터

items-per-page : 페이지당 보여줄 데이터 수

no-data-text : 데이터가 없을 시 보여줄 화면

show-select : 선택박스 활성화 

data

컴포넌트 생성 시 가져오는 데이터를 담을 data(array)와 table 객체를 구성할 selected(array), loading(boolean), headers(array)를 선언한다.

created

컴포넌트 생성 시 getData function을 호출하여 data 변수에 데이터를 담는다.

computed

table에 보여줄 데이터를 구성한다. data에 담겨있는 데이터를 반복하여 id값을 고유 seq로, 날짜는 보기 쉬운 방식으로 변환하여 result배열에 담고 result배열을 반환한다.

methods

서버와 통신하여 data를 가져오는 function getData를 정의한다.

 

실무에서 사용 시 아래와 같이 깔끔한 테이블이 출력된다.