VUE3 개발 기본 사항: Vue.js 플러그인을 사용하여 데이터 테이블 구성 요소 캡슐화

Vue3 개발에서 데이터 테이블은 가장 기본적이고 일반적으로 사용되는 구성 요소 중 하나입니다. 실제 애플리케이션 개발에서는 많은 양의 데이터를 처리하고 표시해야 하는 경우가 많습니다. 데이터 테이블 구성 요소는 데이터 시각화 표시 요구 사항을 충족하기 위해 데이터 형식에 따라 데이터에 대한 우아한 페이징, 정렬, 필터링 및 기타 작업을 수행할 수 있습니다.

Vue.js는 인기 있는 프런트 엔드 프레임워크로서 많은 실용적인 구성 요소와 API를 제공합니다. 그러나 비즈니스 요구 사항이 계속 증가함에 따라 수요를 충족할 수 없는 상황이 발생할 수 있습니다. 현재 Vue.js 플러그인 메커니즘을 사용하여 특별한 비즈니스 요구 사항을 충족하기 위한 일부 맞춤형 구성 요소를 개발할 수 있습니다.

다음으로 이 기사에서는 Vue.js 플러그인 메커니즘을 사용하여 데이터 테이블 구성 요소를 캡슐화하고 다음 기능을 구현하는 방법을 소개합니다.

1. 페이지에 데이터 표시
2. 테이블 데이터 정렬
3. 테이블 데이터 필터링
4. 페이지 단위로 데이터 표시

많은 양의 데이터를 표시할 경우 모든 데이터를 한 번에 렌더링하면 페이지 로딩 속도가 느려지고 성능이 저하됩니다. 따라서 데이터를 페이지 단위로 표시해야 합니다. 여기서는 Vue.js 플러그인인 "vuejs-paginate"를 사용할 수 있습니다. 이 플러그인은 지정된 페이징 매개변수에 따라 배열 데이터를 분할할 수 있으며 데이터 표시 및 페이지 전환 기능을 제공합니다.

"vuejs-paginate" 플러그인을 설치한 후 초기화해야 합니다. 구체적인 구성은 다음과 같습니다.

import Vue from 'vue'
import Paginate from 'vuejs-paginate'

// 全局注册分页组件
Vue.component('paginate', Paginate);

// 分页参数配置
var options = {
  perPage: 10,
  perPageValues: [10, 20, 50],
  containerClass: 'pagination',
  infoClass: 'pagination__info',
  paginationClass: 'pagination__list',
  itemClass: 'pagination__item',
  linkClass: 'pagination__link'
}

// 定义分页组件
Vue.component('my-paginate', {
  components: {
    Paginate
  },
  props: {
    items: {
      type: Array, // 数据类型为数组
      required: true // 验证数据必传
    }
  },
  data() {
    return {
      currentPage: 1, // 当前页码
      options: options // 分页参数
    }
  },
  computed: {
    // 分页处理后的数据
    paginatedItems() {
      var start = (this.currentPage - 1) * this.options.perPage;
      var end = start + this.options.perPage;
      return this.items.slice(start, end);
    }
  }
})

위 코드를 사용하면 "my-paginate"라는 사용자 정의 페이징 구성 요소를 정의하고 "vuejs-paginate" 플러그인을 전역적으로 등록할 수 있습니다. 이 페이징 구성 요소에 필요한 매개 변수는 배열 유형의 데이터입니다. 내부적으로는 모든 데이터를 한 번에 렌더링하는 대신 계산된 속성을 사용하여 배열 데이터의 페이지를 매깁니다.

2. 테이블 데이터 정렬

테이블의 데이터를 정렬하려면 가장 간단한 방법은 배열 데이터를 정렬한 다음 테이블에 렌더링하는 것입니다. Vue3은 데이터를 정렬하고 자동으로 데이터 변경 사항을 모니터링하고 다시 렌더링할 수 있는 "계산" 기능을 제공합니다.

테이블 데이터를 정렬하고 오름차순, 내림차순 전환 기능을 구현하는 컴포넌트를 정의해 보겠습니다.

Vue.component('my-sorter', {
  props: {
    data: {
      type: Array,
      required: true
    },
    sortIndex: {
      type: Number, // 数字类型
      required: true
    }
  },
  data() {
    return { 
      direction: true // 排序切换方向
    }
  },
  computed: {
    sortedData() { // 数据排序处理
      var copyData = Object.assign([], this.data); // 浅拷贝数组
      var direction = this.direction ? 1 : -1; // 升序或降序
      copyData.sort(function(a, b) {
        if (a[this.sortIndex] < b[this.sortIndex]) return -1 * direction;
        if (a[this.sortIndex] > b[this.sortIndex]) return direction;
        return 0
      }.bind(this))
      return copyData;
    }
  },
  methods: {
    // 点击表头，切换排序方向
    toggle() {
      this.direction = !this.direction;
    }
  },
  template: `
    <th @click="toggle">
      {{ $slots.default[0].text }} 
      <i v-if="direction" class="glyphicon glyphicon-chevron-up"></i>
      <i v-else class="glyphicon glyphicon-chevron-down"></i>
    </th>
  `
})

3. 테이블 데이터 필터링

테이블에 검색 상자를 추가하여 키워드를 기준으로 테이블 데이터를 필터링할 수 있습니다. Vue3은 데이터 필터링에 매우 유용한 기능인 "계산"을 제공합니다.

Vue.component('my-filter', {
  props: {
    data: {
      type: Array,
      required: true
    }
  },
  data() {
    return {
      search: ''
    }
  },
  computed: {
    filteredData() {
      var searchKey = this.search.toLowerCase();
      return this.data.filter(item => {
        // 遍历数组内的每一项，如果包含搜索关键词，就保留这一项数据
        return Object.keys(item).some(key => {
          return String(item[key]).toLowerCase().indexOf(searchKey) > -1
        })
      })
    }
  },
  template: `
    <div>
      <input v-model="search" class="form-control" type="text" placeholder="搜索...">
      <table class="table table-bordered">
      <thead>
        <slot name="thead"></slot>
      </thead>
      <tbody>
        <tr v-for="item in filteredData">
          <slot name="tbody" :item="item"></slot>
        </tr>
      </tbody>
      </table>
    </div>
  `
})

위 코드는 간단한 필터 구성요소입니다. 계산된 계산 함수와 v-model의 양방향 바인딩을 통해 입력 키워드를 필터링하고 필터링된 테이블 표시 효과를 실시간으로 새로 고칠 수 있습니다.

요약:

위의 예를 통해 Vue3 플러그인 개발 방법을 간략하게 소개했으며 플러그인 메커니즘을 사용하여 데이터 테이블 구성 요소를 캡슐화했습니다. 동시에 계산된 계산 함수, v-모델 바인딩, 슬롯 등을 통해 테이블 ​​데이터 페이징, 정렬, 필터링 등의 데이터 처리 기능을 구현하는 방법도 보여주었습니다. 이 플러그인 개발 방식은 코드 구조를 더욱 명확하게 하고 구성 요소의 재사용성을 높여주며 프로젝트 유지 관리 및 업그레이드에도 긍정적인 역할을 합니다.

위 내용은 VUE3 개발 기본 사항: Vue.js 플러그인을 사용하여 데이터 테이블 구성 요소 캡슐화의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!