vue jsx table
1.0.0
문서화 예시
Element-Table의 2차 개발을 바탕으로 실제 업무를 기반으로 자주 사용되는 기능을 캡슐화하고, 구성을 통해 테이블을 생성하며, 다단계 헤더 확장 항목, 커스텀 헤더 기능 등을 구현하는 컴포넌트입니다.
사용하기 전에 Element-ui를 프로젝트에 도입해야 합니다.
npm i vue - jsx - table
import 'vue-jsx-table/dist/vue-jsx-table.css'
import vueJsxTable from 'vue-jsx-table'
Vue . use ( vueJsxTable ) <!-- 引入样式 -->
< link
rel = "stylesheet"
href = "https://unpkg.com/vue-jsx-table/dist/vue-jsx-table.css"
/>
< ! -- 引入组件库 -- >
< script src = "https://unpkg.com/vue-jsx-table/dist/vue-jsx-table.umd.min.js" > </ script > 테이블 구성에는 columns 및 tableData 옵션이 필요합니다.
< vue-jsx-table
: columns = "columns"
: tableData = "tableData"
border
@ selection - change = "selectionChange"
: total = "100"
>
< / vue-jsx-table >
data() {
return {
columns : [
{
type : 'selection' ,
fixed : 'left' ,
selectable : this . rowSelectableHandle ,
} ,
{
label : '年龄' ,
prop : 'age' ,
width : 300 ,
sortable : true ,
} ,
{
label : '学校' ,
prop : 'school' ,
width : 200 ,
} ,
{
label : '学费' ,
prop : 'fee' ,
width : 200 ,
} ,
{
label : '编辑' ,
prop : 'edit' ,
slot : 'edit' ,
fixed : 'right' ,
width : 200 ,
} ,
] ,
tableData : [ ]
} ;
} ,하위 항목을 열로 설정하면 그룹 헤더가 렌더링될 수 있습니다.
{
label : '多级表头' ,
children : [
{
label : '年级' ,
prop : 'grade' ,
width : 120 ,
} ,
{
label : '班级' ,
prop : 'class' ,
} ,
] ,
} , 열, 함수(행, 열, $index)에 대한 렌더링 옵션 설정
{
label : 'render' ,
prop : 'render' ,
width : 200 ,
render : ( row , column , $index ) => {
return (
< div onClick = { ( ) => this . cellClick ( row , column , $index ) } >
测试render
</ div >
) ;
} ,
} , 열 구성 항목에 대해 유형:확장만 설정하면 됩니다. 확장된 콘텐츠는 슬롯이나 렌더링을 사용할 수 있습니다. 슬롯과 렌더링을 동시에 구성하면 슬롯이 무시됩니다.
{
type : 'expand' ,
slot : 'expand' ,
} , 컬럼 구성 항목에 solt:''만 설정하면 되며, 슬롯은 슬롯의 이름입니다.
{
label : '编辑' ,
prop : 'edit' ,
slot : 'edit' ,
fixed : 'right' ,
width : 200 ,
} , 열 구성 항목에 대해 renderHeader만 설정하면 됩니다. renderHeader는 element-ui의 기본 구성입니다. (공식적으로는 열에 render-header 기능을 사용하는 것을 권장하지 않습니다. 슬롯을 사용하는 것이 좋습니다!! 콘솔에 프롬프트가 표시됩니다. 당황스럽 습니다 .) SlotHeader 항목을 구성하여 슬롯을 사용할 수도 있습니다. 슬롯 이름은 반복될 수 없습니다. 정의 슬롯 구성이 템플릿 선언에 정의되어 있습니다.
{
label : '自定义表头' ,
prop : 'name' ,
width : 120 ,
sortable : true ,
renderHeader : ( column , scope ) => {
console . log ( 'scope' , scope ) ;
return < span class = "cell-header-red-star" > { column . label } </ span > ;
} ,
} , {
label : '姓名' ,
prop : 'name' ,
slotHeader : 'slotHeader' ,
} ,
<!-- 插槽表头 -->
< template v-slot : slotHeader = "{ column }" >
<!-- {{ scope.column.label }} -->
< span >插槽表头： { { column . label } } </ span >
</ template > < vue-jsx-table
@ page-change = "pageChangeHandle"
: currentPage . sync = "paginationParams.pageNo"
: total = "100"
>
</ vue-jsx-table >
pageChangeHandle ( val ) {
this . paginationParams . pageNo = val . currentPage ;
this . paginationParams . pageSize = val . pageSize ;
} , 솔트 슬롯을 통해 렌더링 기능을 사용하여 구성 요소를 렌더링할 수도 있습니다.
< template v-slot : edit = "{ row }" >
< el-input v-model = "row.name" > </ el-input >
</ template >모든 테이블 속성은 추가 테이블 속성인 v-bind="$attrs"를 통해 구현됩니다.
| 매개변수 | 설명하다 | 유형 | 기본값 |
|---|---|---|---|
| 기둥 | 테이블 열 | 정렬 | [] |
| 열키 이름 | 컬럼의 키 필터 변경 이벤트를 사용해야 하는 경우 필터 조건이 어떤 컬럼인지 식별하기 위해 이 속성이 필요합니다(테이블-열 속성의 컬럼-키). | 끈 | - |
| 맞추다 | 조정 | 끈 | 왼쪽 |
| showPagination | 페이징 컨트롤 표시 여부 | 부울 | 진실 |
| 현재 페이지 | 현재 페이징 컨트롤의 현재 페이지 | 숫자 | 1 |
| 페이지 크기 | 페이징 컨트롤의 페이지 크기 | 정렬 | [10, 20, 30, 50] |
| 페이지 크기 | 페이징 제어의 페이지 크기 | 정렬 | [] |
| 공들여 나열한 것 | 페이징 컨트롤의 레이아웃 | 끈 | '크기, 이전, 호출기, 다음, 전체' |
| 총 | 총 페이징 제어 | 숫자 | 0 |
| 페이지 매김 스타일 | 페이징 컨트롤의 스타일 | 물체 | - |
| showOverflow도구 설명 | 내용이 너무 길어서 숨겨져 있을 때 툴팁을 표시합니다. showOverflowTooltip으로 컬럼을 별도로 구성하지 않은 경우 기본값은 true입니다. | 부울 | 진실 |
| showTableSetting | 테이블 설정 표시 | 부울 | 거짓 |
| hideColumns | 숨겨야 하는 열 및 레이블 이름 일부 시나리오에서는 일부 조건에 따라 숨겨진 열을 표시해야 합니다. | 정렬 | [] |
| 맞춤 클래스 | 맞춤 스타일 클래스 | 정렬 | ['vue-jsx-테이블 래퍼'] |
모든 테이블 이벤트는 v-on="$listeners", 추가 테이블 이벤트를 통해 구현됩니다.
| 매개변수 | 설명하다 | 유형 | 기본값 |
|---|---|---|---|
| 사이즈 변화 | 이 이벤트는 페이지 변경 및 현재 변경에 의해 트리거됩니다. 페이징 변경을 용이하게 하기 위해 추가됩니다. | 기능 | '함수({페이지 크기: 10,현재페이지: 1,}) {}' |
| 사이즈 변화 | pageSize가 변경되면 실행됩니다. | - | - |
| 현재 변화 | currentPage가 변경되면 실행됩니다. | - | - |
| 매개변수 | 설명하다 | 유형 | 기본값 |
|---|---|---|---|
| 소품 | 열 내용에 해당하는 필드 이름 | 끈 | - |
| 슬롯 | 컬럼의 슬롯 이름(테이블이 중첩된 경우 슬롯 이름은 중복될 수 없음, 슬롯 범위({ row, $index })) | 끈 | - |
| 상표 | 표시된 제목 | 끈 | - |
| 너비 | 해당 열 너비 | 숫자 | - |
| showOverflow도구 설명 | 콘텐츠가 너무 길어서 숨겨져 있는 경우 도구 설명 표시 | 부울 | - |
| 결정된 | 열이 왼쪽 또는 오른쪽에 고정되는지 여부(true, 왼쪽, 오른쪽), true는 왼쪽에 고정됨을 의미합니다. | 문자열, 부울 | - |
| 세우다 | jsx 렌더링 기능 | 기능 | 렌더링(행, 열, $인덱스) |
| 유형 | 선택/색인/확장 | 끈 | - |
| 렌더헤더 | 테이블 헤더, 열 제목 레이블 영역 렌더링에 사용되는 기능 | 함수(열, 범위 }), 열은 구성 항목이고 범위는 네이티브 구성 요소의 범위입니다. (이 속성은 기본 매개변수가 아닙니다.) | - |
| 셀레드스타 | 헤더 텍스트 앞에 빨간색 별표를 넣을지 여부 | 부울 | 거짓 |
| 정렬 가능 | 해당 컬럼의 정렬 가능 여부. 'custom'으로 설정하면 사용자가 원격으로 정렬을 원하며 테이블의 정렬 변경 이벤트를 수신해야 함을 의미합니다. | 부울, 문자열(true, false, '사용자 정의') | 거짓 |
| 포맷터 | 콘텐츠 형식을 지정하는 데 사용됩니다(element-ui 원본 속성). | 함수(행, 열, 셀 값, 인덱스) | - |
| 선택 가능 | type=selection인 열에만 유효합니다. 유형은 Function입니다. Function의 반환 값은 이 행의 CheckBox를 확인할 수 있는지 여부를 결정하는 데 사용됩니다. | 함수(행, 인덱스) | - |
| showHeader도구 설명 | 테이블 헤더로 마우스 이동 시 복사 프롬프트 정보 표시 여부 | 부울 | - |
| 헤더도구 설명텍스트 | 헤더에는 복사 정보 내용이 표시됩니다. | 끈 | - |
