ele easy table
1.0.0
npm install ele-easy-table -S
import 'ele-easy-table'
<ele-easy-table :form="form" :table="table" :formData.sync="formData" @getList="handleSearch"></ele-easy-table>
자세한 내용은 데모 소스 코드를 참조하세요.
element-ui에 따라 프로젝트에서 element-ui를 설치해야 합니다.
소스 코드에서 사용되는 Element-ui 버전
"element-ui": "^2.4.5"
재산 | 설명하다 | 유형 | 기본값 |
---|---|---|---|
형태 | 테이블 쿼리 조건 영역 | 물체 | {} |
테이블 | 테이블 표시 영역 | 물체 | {} |
formData.sync | 양식 쿼리 필드 | 물체 | {} |
쪽수 매기기 | 페이징 영역 표시 여부 | [부울,객체] | 진실 |
다른 속성 | el-table 기본 속성 | el-table 기본 속성을 참조하세요. | - |
재산 | 설명하다 | 유형 | 기본값 | 주목 |
---|---|---|---|---|
수업 | 테이블 쿼리 조건 영역 스타일 설정 | 물체 | - | - |
스타일 | 테이블 쿼리 조건 영역 인라인 스타일 설정 | 물체 | - | - |
접기 수 | 쿼리 조건이 너무 많으면 테이블이 축소됩니다. | 숫자 | - | 이 매개변수가 없으면 모두 표시됩니다. |
목록 | 테이블 쿼리 조건 목록 | 정렬 | - | 자세한 내용은 데모 소스 코드를 참조하세요. |
재산 | 설명하다 | 유형 | 기본값 | 주목 |
---|---|---|---|---|
목록 | 테이블 데이터 목록 | 정렬 | - | - |
기둥 | 테이블 헤더 목록 | 정렬 | - | 자세한 내용은 데모 소스 코드를 참조하세요. |
로드 중 | 테이블 로딩 애니메이션 표시 여부 | 부울 | - | |
쇼인덱스 | 일련번호 열 표시 여부 | 부울 | 진실 | |
인덱스고정 | 일련번호 열 수정 여부 | 부울 | 거짓 | |
indexLabel | 일련번호 목록의 헤더 텍스트를 사용자 정의하세요. | 끈 | 일련번호 | |
선택 | 다중 선택 구성 양식 | 물체 | {} |
재산 | 설명하다 | 유형 | 기본값 | 주목 |
---|---|---|---|---|
구성 | 다중 선택 속성 형성 | 물체 | - | - |
el-pagination 기본 속성
페이지 번호가 바뀌거나 각 페이지에 표시되는 번호가 변경될 때 실행되어 데이터를 가져온 후 table.list에 할당하여 목록을 업데이트합니다.
el-table 기본 이벤트(예: @selection-change="handleSelectionChange") 자세한 내용은 데모 소스 코드를 참조하세요.
이벤트 | 설명하다 | 매개변수 |
---|---|---|
핸들확장 | 조건부 접기 후 콜백 이벤트 | isExpand |
테이블에는 새로운 인라인 스타일 오버플로가 있습니다. visible; 테이블 헤더의 고정 레이아웃을 구현하려면 다음 스타일을 추가하면 됩니다.
참고: 범위가 지정된 스타일인 경우 >>> 연산자를 사용해야 합니다(자세한 내용은 문서 CSS 범위 참조).
/* 全局样式 */
. el-table__header-wrapper {
position : sticky;
top : 0 ;
z-index : 999 ;
}
/* scoped 局部样式 */
. ele-easy-table-demo > > > . el-table__header-wrapper {
position : sticky;
top : 0 ;
z-index : 999 ;
}
자세한 내용은 데모 소스 코드를 참조하세요.
참고: 열 고정과 동시에 사용할 수 없습니다. 동시에 사용하려면 요소 기본 테이블 속성을 사용하여 테이블 높이를 설정할 필요가 없습니다.