vue free table

뷰 프리 테이블

요소 ui 테이블의 2차 캡슐화를 기반으로 원본 테이블의 거의 모든 기능을 지원합니다.

문서 사용법

데모 미리보기

특성

• 코드 양을 줄이기 위해 element-ui 테이블을 기반으로 한 보조 캡슐화
• element-ui 테이블 구성요소의 매개변수 및 이벤트 상속
• 렌더링 렌더링 지원
• 지원 슬롯 슬롯
• 지원 구성 요소 소개
• 지원 트리 데이터
• 페이징 기능 지원

문서

재산	설명하다	유형	기본
data	테이블의 data 속성	Array	[]
column	테이블 열 렌더링을 제어하는 ​​데 사용됩니다.	Array	[]
columns-props	모든 column 공통된 속성을 정의하는 데 사용됩니다.	Object
pagination	페이징 구성 요소를 표시할지 여부에 대한 자세한 내용은 pagination配置열을 참조하세요.	Boolean	false

요소 테이블에 레이어를 캡슐화할 뿐입니다. 테이블에 원래 설정된 소품, 이벤트 청취 및 설정은 구성 요소에 직접 바인딩될 수 있습니다. 요소 테이블 문서를 참조하세요.

열 구성 열은 테이블의 열 동작을 제어하는 ​​데 사용됩니다. 설정 예:

 const column = [
  { label : '日期' , prop : 'date' , width : 100 } ,
  { label : '姓名' , prop : 'name' } ,
  { label : '邮编' , prop : 'zip' } ,
  {
    label : '地址' ,
    prop : 'address' ,
    render : ( h , scope ) => {
      return ( < el-tag > { scope . row . address } < el-tag > )
    }
  } ,
  {
    label : '组件' ,
    prop : 'cmp' ,
    component : EditBtn ,
    listeners : {
      'row-edit' ( row ) {
        console . log ( 'row-edit' , row )
      }
    }
  }
]

columns-props 구성 columns-props는 열의 각 열에 대한 기본 props 속성을 구성하는 데 사용됩니다.

 const columnsProps = {
  align : 'left' ,
  minWidth : 120
}

페이지 매김 구성 페이지 매김은 페이징 구성 요소의 표시를 제어하는 ​​데 사용됩니다. 페이지 매김 구성 요소는 오픈 소스 프로젝트의 vue-element-admin 구성 요소 라이브러리에 있는 페이징 구성 요소에서 파생됩니다.

매개변수	설명하다	유형	기본값
total	총 항목 수	Number	/
page	현재 페이지 번호는 .sync 수정자를 지원합니다.	Number	1
limit	.sync 수정자를 지원하여 페이지당 항목 수를 표시합니다.	Number	20
page-sizes	페이지당 숫자 선택기 옵션 설정 표시	Number[]	[10, 20, 30, 50]
hidden	숨길지 말지	Boolean	false
auto-scroll	페이지 매김 후 자동으로 맨 위로 스크롤할지 여부	Boolean	true

또한 다른 요소의 el-pagination에서 지원되는 모든 속성을 지원합니다. 자세한 내용은 설명서를 참조하세요.

예

 < template >
  < free-table border stripe : data = "data" : column = "column" > </ free-table >
</ template >

< script >
import FreeTable from '@/components/FreeTable'

export default {
  components : {
    FreeTable
  } ,
  data ( ) {
    return {
      column : [
        { label : '日期' , prop : 'date' } ,
        { label : '姓名' , prop : 'name' } ,
        { label : '省份' , prop : 'province' } ,
        { label : '市区' , prop : 'city' } ,
        { label : '地址' , prop : 'address' }
      ] ,
      data : [
        {
          date : '2016-05-03' ,
          name : '王小虎' ,
          province : '上海' ,
          city : '普陀区' ,
          address : '上海市普陀区金沙江路 1518 弄'
        } ,
        {
          date : '2016-05-02' ,
          name : '王小虎' ,
          province : '上海' ,
          city : '普陀区' ,
          address : '上海市普陀区金沙江路 1518 弄'
        }
      ]
    }
  }
}
< / script>

빌드 명령

 # 安装依赖包
npm install

# 启动开发环境
npm run serve

# 构建生产环境
npm run build

# 启动unit测试
npm run test:unit

# 启动unit end-to-end 测试
npm run test:e2e

# 检查修复代码
npm run lint