vue 로 만든 간단한 게시판

참고 :codesandbox.io/s/gandanhan-gesipan-gq5mn

간단한 게시판 - CodeSandbox

 

vue 게시판

 

상위 컴포넌트 SimplePagination.vue

<template>
  <div>
    <h1>TABLE PAGINATION</h1>
    몇 개씩 표시: <input type="number" v-model.number="divice" maxlength="6" />
    <template v-if="loading">
      <h1>로딩중</h1>
    </template>
    <paginated-list :list-array="pageArray" :page-size="divice" v-else />
    <div></div>
  </div>
</template>
 
<script>
import axios from "axios";
import PaginatedList from "./PaginatedList";
export default {
  name: "simple-pagination",
  components: {
    PaginatedList
  },
  data() {
    return {
      pageArray: [], //담을곳
      divice: 2, //기본 출력수
      loading: false
    };
  },
 
  async created() {
    try {
      this.loading = true;
      const res = await axios.get("https://reqres.in/api/users?page=1");
      this.pageArray = res.data.data;
      this.loading = false;
      return res;
    } catch (err) {
      console.log(err);
    }
  }
};
</script>
 
<style>
h1 {
  color: #454545;
  text-align: center;
}
</style>
 

 

하위 컴포넌트 PaginatedList.vue

<template>
  <div>
    <table>
      <tr>
        <th>NO</th>
        <th>Name</th>
        <th>Email</th>
        <th>Avatar</th>
        <th>Option</th>
      </tr>
      <tr v-for="(p, index) in paginatedData" :key="p.no">
        <td>{{ p.id }}</td>
        <td>{{ p.first_name }}</td>
        <td>{{ p.email }}</td>
        <td><img :src="p.avatar" alt="" /></td>
        <td><a href="javascript:;" @click="remove(index)">삭제</a></td>
      </tr>
    </table>
 
    <div class="btn-cover">
      <button :disabled="pageNum === 0" @click="prevPage" class="page-btn">
        이전
      </button>
      <span class="page-count">{{ pageNum + 1 }} / {{ pageCount }} 페이지</span>
      <button
        :disabled="pageNum >= pageCount - 1"
        @click="nextPage"
        class="page-btn"
      >
        다음
      </button>
    </div>
  </div>
</template>
 
<script>
export default {
  name: "paginated-list",
  data() {
    return {
      pageNum: 0 //현재페이지수 기본값은0
    };
  },
  props: {
    listArray: {
      type: Array,
      required: true
    },
    pageSize: {
      type: Number,
      required: false,
      default: 3 //props로 내려온 값이 없으면 기본 3
    }
  },
  methods: {
    nextPage() {
      this.pageNum += 1;
    },
    prevPage() {
      this.pageNum -= 1;
    },
    remove(index) {
      this.listArray.splice(index, 1);
    }
  },
  computed: {
    halfWidth: {
      get: function() {
        return this.width / 2;
      },
      // halfWidth를 2 배수한 숫자를 width에 할당하기
      set: function(val) {
        this.width = val * 2;
      }
    },
    pageCount() {
      let listLeng = this.listArray.length, //전체아이템수
        listSize = this.pageSize, //원하는 출력 수
        page = Math.floor(listLeng / listSize); //페이지수 = 전체아이템수/원하는출력개수
      if (listLeng % listSize > 0) page += 1;
 
      /*
      아니면 page = Math.floor((listLeng - 1) / listSize) + 1;
      이런식으로 if 문 없이 고칠 수도 있다!
      */
      return page;
    },
    paginatedData() {
      const start = this.pageNum * this.pageSize, //시작 = 현재페이지수*원하는 출력수
        end = start + this.pageSize; //끝 = 시작 + 원하는 출력수
      return this.listArray.slice(start, end);
    }
  }
};
</script>
 
<style>
table {
  width: 100%;
  border-collapse: collapse;
}
table th {
  font-size: 1.2rem;
}
table tr {
  height: 2rem;
  text-align: center;
  border-bottom: 1px solid #505050;
}
table tr:first-of-type {
  border-top: 2px solid #404040;
}
table tr td {
  padding: 1rem 0;
  font-size: 1.1rem;
}
.btn-cover {
  margin-top: 1.5rem;
  text-align: center;
}
.btn-cover .page-btn {
  width: 5rem;
  height: 2rem;
  letter-spacing: 0.5px;
}
.btn-cover .page-count {
  padding: 0 1rem;
}
</style>