el table plus 다운로드 - el table plus 소스 코드 다운로드

el table plus

기타 카테고리

1.0.0

다운로드

엘 테이블 플러스

El-table을 기반으로 구성 가능한 구성 요소

배경: el-table 요소를 사용할 때 너무 많은 템플릿 코드를 작성해야 하므로 페이지에 너무 많은 HTML 코드가 생성됩니다. 애플리케이션 레이어에서 요소 컴포넌트 라이브러리를 살펴보면 API 디자인이 매우 유연하지만 사용하기가 매우 번거롭습니다. 따라서 관련 구성을 단순화하려면 el-table을 패키징해야 합니다.

애플리케이션 레이어 API 디자인은 상대적으로 좋습니다. el-table-plus API 디자인은 기본 렌더링에서 여전히 element-ui 테이블 구성 요소를 사용합니다. 동시에 모든 속성/이벤트는 원본 API를 파괴하지 않는 원본 요소 테이블 구성 요소를 지원합니다(침입 없음). 또한 맞춤을 달성하기 위해 세 가지 방법으로 열 데이터 렌더링을 사용자 정의하는 슬롯/jsx/h 기능도 지원합니다. 비즈니스 로직 렌더링도 통합되어 있습니다. 일반적으로 사용되는 페이지 매김 구성 요소와 확장된 API는 일반적인 비즈니스를 편리하게 처리하는 데 도움이 됩니다.

온라인 사례

https://lq782655835.github.io/el-table-plus

특징

간단한 사용법, 두 가지 속성 데이터와 열만 지원하면 됩니다.
전체 상속, element-ui 전체 속성/이벤트 상속
확장성이 뛰어나고 세 가지 방식으로 렌더링 열 데이터를 사용자 정의할 수 있는 슬롯/jsx/h 기능을 지원합니다.
더욱 편리해진 스크롤 이벤트 확장, 페이지 매김 컴포넌트, fn 빠른 포맷팅

설치 및 소개

설치하다

yarn add @springleo/el-table-plus

소개하다

이 구성 요소는 element-ui의 el-table 구성 요소에 종속되며 직접 소개해야 합니다.

 import ElementUI from "element-ui" ;
import "element-ui/lib/theme-chalk/index.css" ;
Vue . use ( ElementUI ) ;

import ElTablePlus from '@springleo/el-table-plus'
Vue . use ( ElTablePlus )

기본 사용

 < template >
    < el-table-plus
      :data =" list "
      :columns =" [
        { label: 'ID', value: 'id', width: '80px' },
        { label: '存储卷名', value: 'name' },
        { label: '总容量', value: 'storage', fn: val => `${val}G` },
        { label: '创建人', value: 'member.userId' },
        { label: '邮箱', value: 'member.email' },
        { label: '创建时间', value: 'gmtCreate' }
      ] "
    />
</ template >

API

el-table-plus 속성

el-table의 모든 원래 속성을 지원하고 다음 API를 확장합니다.

매개변수	유형	기본값	설명하다
로드 중	부울	거짓	애니메이션 로딩
데이터	정렬	[]	데이터 나열
기둥	정렬	[]	열 항목 구성 목록, 자세한 내용은 아래 열 속성을 참조하세요.
쪽수 매기기	물체		페이지 터너 구성은 기본적으로 설정되어 있지 않으며 페이지 터너가 표시되지 않습니다. 관련 API는 el-pagination에서 확인하실 수 있습니다.
총	숫자	0	총 페이지 터너 수

엘테이블플러스 이벤트

el-table의 모든 원본 이벤트를 지원하고 다음 API를 확장합니다.

이벤트 이름	설명하다	설명
스크롤	테이블 스크롤바 이벤트	이자형
페이지 변경	페이지 터너 변경 이벤트	{ 페이지 크기, 현재 페이지 }

열 속성

el-table-column의 모든 원본 속성과 범위 지정 슬롯을 지원하고 다음 API를 확장합니다.

속성	유형	설명
상표	끈	열 이름
소품	끈	열 데이터 필드는 user.email.prefix와 같은 다중 레벨 객체 중첩을 지원합니다.
숨겨진	부울	이 열을 숨길지 여부입니다. 제안은 반응형 표시 및 숨기기를 가능하게 하는 계산된 제안입니다.
커스텀렌더	기능	사용자 정의 열 데이터 렌더링. 함수 매개변수(값, 행, 열, $index, h), jsx 및 h 함수 지원
맞춤 제목	기능	사용자 정의 열 헤더 렌더링. 함수 매개변수(column, $index, h), jsx 및 h 함수 지원
범위가 지정된 슬롯	물체	렌더링을 사용자 정의하고 customRender/customTitle 함수를 대체하려면 슬롯 모드를 사용하십시오 . 예: { customRender: 'slotName1', customTitle: 'slotName2' }

Vue 플러그인 시리즈

플러그인	상태	설명
@springleo/el-dialog-helper		Vue에서 대화를 약속하세요!
@springleo/el-table-plus		El-table을 기반으로 구성 가능한 구성 요소
@springleo/el-form-plus		element-ui 형식을 기반으로 한 스키마 형식
@springleo/가상 스크롤 테이블		무한 드롭다운 가상 스크롤 테이블 구성 요소