vue3-easy-data-table이 출시됩니다

소개

vue3-easy-data-table는 Vue.js 3.x로 만든 사용자 지정 가능하고 사용하기 쉬운 데이터 테이블 구성 요소입니다. vue3-easy-data-table는 multiple selecting , single field sorting 및 searching 과 같은 많은 기본 기능을 제공합니다. 게다가 이 문서에서 확인할 수 있는 고도로 사용자 정의 가능한 많은 기능을 제공합니다.

두 가지 모드

vue3-easy-data-table는 클라이언트 측 또는 server-side mode에서 사용할 수 있습니다. 클라이언트측 모드는 모든 데이터가 이미 로드된 경우를 위한 모드입니다. 즉, 초기 호출은 서버의 모든 페이지를 요청하는 것입니다. server-side mode에서는 새 페이지로 이동할 때마다 서버에서 제한된 데이터를 요청해야 합니다.

클라이언트 측 모드

서버 측 모드

위의 예에 따르면 server-side mode 에서 새 페이지로 이동하면 로드 애니메이션이 표시되는 새 요청이 전송되는 것을 볼 수 있습니다.

고도로 사용자 정의 가능

색상 사용자 정의

vue3-easy-data-table에서 제공하는 color related props을 사용합니다. 테이블의 다양한 요소에 대한 배경색, 글꼴 색, 테두리 색을 사용자 정의할 수 있습니다.

아이템 슬롯

Vue.js의 slots 기능을 사용하면 다음과 같이 특정 열만 사용자 지정할 수 있습니다.

<EasyDataTable :headers="headers" :items="items">
    <template #team="{ teamName, teamUrl }">
        <a :href="teamUrl">{{ teamName }}</a>
    </template>
</EasyDataTable>

로딩 슬롯

마찬가지로 Vue.js의 slots 기능을 사용하여 다음과 같이 로딩 효과를 사용자 정의할 수 있습니다.

<EasyDataTable :headers="headers" :items="items">
    <template #loading>
      <img src="https://i.pinimg.com/originals/94/fd/2b/94fd2bf50097ade743220761f41693d5.gif" style="width: 100px;height: 80px;"/>
    </template>
</EasyDataTable>

바닥글 맞춤설정

vue3-easy-data-table는 vue3-easy-data-table 외부에서 자신의 바닥글을 사용자 정의할 수 있는 일부 footer related variables and functions을 노출합니다.

주의: hide-footer 소품을 사용하여 vue3-easy-data-table 의 기본 바닥글을 숨기는 것을 잊지 마십시오.

고정 열

헤더 항목에서 fixed 속성을 true로 설정하기만 하면 특정 열을 왼쪽으로 고정할 수 있습니다. here을 클릭하시면 사용방법을 확인하실 수 있습니다.

시작하기

설치

npm install vue3-easy-data-table
// or
yarn add vue3-easy-data-table

전 세계적으로 등록

import Vue3EasyDataTable from 'vue3-easy-data-table';
import 'vue3-easy-data-table/dist/style.css';

const app = createApp(App);
app.component('EasyDataTable', Vue3EasyDataTable);

용법

<template>
  <EasyDataTable
    :headers="headers"
    :items="items"
  />
</template>

<script lang="ts" setup>
import type { Header, Item } from "vue3-easy-data-table";

const headers: Header[] = [
  { text: "PLAYER", value: "player" },
  { text: "TEAM", value: "team"},
  { text: "NUMBER", value: "number"},
  { text: "POSITION", value: "position"},
  { text: "HEIGHT", value: "height"},
  { text: "WEIGHT (lbs)", value: "weight", sortable: true},
  { text: "LAST ATTENDED", value: "lastAttended"},
  { text: "COUNTRY", value: "country"},
];

const items: Item[] = [
  { "player": "Stephen Curry", "avator": "https://cdn.nba.com/headshots/nba/latest/260x190/201939.png", "team": "GSW", "number": 30, "position": 'G', "height": '6-2', "weight": 185, "lastAttended": "Davidson", "country": "USA"},
  { "player": "Lebron James", "avator": "https://cdn.nba.com/headshots/nba/latest/260x190/2544.png", "team": "LAL", "number": 6, "position": 'F', "height": '6-9', "weight": 250, "lastAttended": "St. Vincent-St. Mary HS (OH)", "country": "USA"},
  { "player": "Kevin Durant", "avator": "https://cdn.nba.com/headshots/nba/latest/260x190/201142.png", "team": "BKN", "number": 7, "position": 'F', "height": '6-10', "weight": 240, "lastAttended": "Texas-Austin", "country": "USA"},
  { "player": "Giannis Antetokounmpo", "avator": "https://cdn.nba.com/headshots/nba/latest/260x190/203507.png", "team": "MIL", "number": 34, "position": 'F', "height": '6-11', "weight": 242, "lastAttended": "Filathlitikos", "country": "Greece"},
];
</script>

선적 서류 비치

자세한 내용은 여기 링크를 확인하십시오: https://hc200ok.github.io/vue3-easy-data-table-doc/

저장소 링크

버그를 발견하거나 다른 기능을 요구하는 경우 문제를 보고하여 알려주십시오. 여기 리포지토리 링크가 있습니다: https://github.com/HC200ok/vue3-easy-data-table/ , 저를 지원해 주신 Github ⭐를 제공해 주시면 매우 기쁩니다.