hoc element table

@hoc-요소/테이블

? Webpack 5를 기반으로 table Vue 3으로 <el-xxx> . 더 높은 자유도를 달성하는 것은 반복 작업을 줄이고 개발 효율성을 높이는 것을 목표로 합니다.

이 구성 요소 라이브러리는 학습, 참조 및 보조 개발에 사용할 수 있습니다.

라이브 데모

버전

• Vue 3.x 버전 | Vue 2.x 버전

스크린샷

환경지원

• 뷰 3.2.x

설치하다

npm install @hoc-element/table

# or

pnpm add @hoc-element/table

빠른 시작

• 사용하기 전에 element-plus를 설치하세요.

 import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import HocElTable from '@hoc-element/table'
import App from './App.vue'

createApp ( App )
  . use ( ElementPlus )
  . use ( HocElTable )
  . mount ( '#app' ) 

변경 내역

각 릴리스에 대한 자세한 변경 사항은 릴리스 노트에 문서화되어 있습니다.

특징

• Webpack 5를 기반으로 구축
• Vue 3에 대한 완벽한 지원
• JSON 직렬화된 테이블의 빠른 구성 지원
• Pagination 내장되어 있습니다.
• 맞춤 prop 열 이름 지원
• 셀 내용의 사용자 정의 렌더링을 지원합니다. [셀 렌더링 구성 지침 참조]
• 사용자 정의 셀 style 지원
• 바인딩 사용자 directives 지원
• element-plus 네이티브 Table 의 바인딩 Events 및 Methods 지원
• Header 및 Pagination 의 표시 및 숨김 제어 지원

셀 렌더링 구성 지침

방법	설명하다	장면
---	셀의 attrs.prop에 해당하는 키 값을 렌더링합니다.	prop의 값을 직접적으로 표시하는데 적합
세우다	렌더링 문자열	기본 prop 값에 대해 일부 마이크로프로세싱이 수행되는 시나리오에 적합합니다.
렌더링HTML	지정된 DOM 요소를 렌더링합니다.	일반적으로 마지막 열에 사용되는 작업 표시에 적합합니다. (현재는 el 버튼 렌더링만 지원합니다. 자세한 내용은 예를 참조하세요.)
렌더컴포넌트	렌더링 구성 요소	복잡한 콘텐츠를 셀에 표시해야 하는 시나리오에 적합합니다. 자세한 내용은 예를 참조하세요.

예

이는 API의 거의 모든 용도를 다루는 비교적 완전한 예입니다. 소스 코드는 다음과 같습니다.

배포

저장소를 참조하세요.