vue willtable 다운로드 - vue willtable 소스 코드 다운로드

vue willtable

기타 카테고리

1.0.0

다운로드

vue-willtable 편집 가능한 테이블 구성 요소

영문 문서

Vue에 적합한 편집 가능한 테이블 구성 요소는 여러 단축키 작업을 지원하고 Excel 작업 경험을 시뮬레이션합니다.

여기 데모: https://demo.willwuwei.com/willtable/

이 구성 요소를 기반으로 구현된 여러 사람의 실시간 공유 및 편집 양식 시스템은 다음과 같습니다.

방문 URL

프런트엔드 프로젝트 주소

백엔드 프로젝트 주소

스크린샷

특성

테이블 너비 조정
테이블 열이 고정됨
데이터 필터링 및 정렬
줄 다중 선택
일괄삭제 및 복사-붙여넣기
Excel로 복사하여 붙여넣기
데이터 드롭다운 사본
셀을 복사하거나 다중 선택하기 위해 아래로 당기면 테이블이 자동으로 스크롤될 수 있습니다.
변경된 데이터 행 가져오기
다양한 데이터 유형 확인
사용자 정의 규칙 데이터 검증 지원
불법 검증으로 데이터 행 가져오기
실행 취소 및 다시 실행 지원
각 셀 스타일과 클래스 이름을 사용자 정의할 수 있습니다.
로컬 렌더링을 사용하여 더 많은 양의 데이터 표시 지원

설치하다

 npm install vue-willtable --save

산

전 세계적으로 마운트됨

 import Vue from 'vue'
import VueWilltable from 'vue-willtable'

// require styles
import 'vue-willtable/dist/vue-willtable.min.css'

Vue . component ( 'VueWilltable' , VueWilltable )

구성요소에 장착됨

 import VueWilltable from 'vue-willtable'

// require styles
import 'vue-willtable/dist/vue-willtable.min.css'

export default {
  components : {
    VueWilltable
  }
}

사용 예

< template >
  < willtable
    ref = " willtable "
    :columns = " columns "
    v-model = " data "
    maxHeight = " 800 " />
</ template >

< script >
export default {
  data () {
    return {
      columns : [
        {
          type : ' selection ' ,
          width : 40 ,
          fixed : true ,
        },
        {
          title : '序号' ,
          key : ' sid ' ,
          fixed : true ,
          type : ' number ' ,
          width : 100 ,
        },
        {
          title : '姓名' ,
          key : ' name ' ,
          fixed : true ,
          width : 120 ,
        },
        {
          title : '日期' ,
          key : ' date ' ,
          type : ' date ' ,
          width : 100 ,
        },
        {
          title : '工作岗位' ,
          key : ' email ' ,
          width : 300 ,
          type : ' select ' ,
          options : [
            {
              value : ' Web前端开发' ,
              label : ' Web前端开发' ,
            },
            {
              value : ' Java开发' ,
              label : ' Java开发' ,
            },
            {
              value : ' Python开发' ,
              label : ' Python开发' ,
            },
            {
              value : ' Php开发' ,
              label : ' Php开发' ,
            },
          ],
        },
        {
          title : '月份' ,
          key : ' month ' ,
          type : ' month ' ,
          width : 100 ,
        },
        {
          title : '地址' ,
          key : ' address ' ,
          width : 200 ,
        },
        {
          title : '标题' ,
          key : ' title ' ,
          width : 300 ,
        },
        {
          title : '内容' ,
          key : ' paragraph ' ,
          width : 300 ,
        },
        {
          title : '链接' ,
          key : ' url ' ,
          width : 200 ,
        },
        {
          title : ' ip ' ,
          key : ' ip ' ,
          width : 200 ,
          validate : ( value ) => {
            const pattern = / ((2(5 [ 0-5 ] | [ 0-4 ] d )) | [ 0-1 ] ? d {1,2} )( . ((2(5 [ 0-5 ] | [ 0-4 ] d )) | [ 0-1 ] ? d {1,2} )) {3} / g ;
            return pattern . test (value);
          },
        },
        {
          title : '总金额' ,
          key : ' sum ' ,
          width : 200 ,
        },
        {
          title : ' ID ' ,
          key : ' id ' ,
          width : 200 ,
        },
        {
          title : '色值' ,
          key : ' color ' ,
          width : 200 ,
        },
      ],
      data : [],
    },
  },
  mounted () {
    this . getData ();
  },
  methods : {
    getData () {
      const data = [];
      this . $refs . willtable . setData (data);
    },
  },
};
</ script >

데이터

this.$refs.willtable은 setData 메소드를 호출하여 전체 테이블 데이터를 업데이트하고 기록 데이터 레코드를 재설정합니다.

this.$refs.willtable은 getData 메소드를 호출하여 전체 테이블 데이터를 얻습니다.

v-model 값을 바인딩합니다.

재산

매개변수	설명하다	유형	선택적 값	기본값
기둥	테이블 열의 구성 설명	정렬	——	[]
최대 높이	테이블 최대 높이	문자열/숫자	——	——
행높이	각 행의 높이	문자열/숫자	——	——
장애가 있는	편집금지	부울	——	진실
표시아이콘	헤더 유형 아이콘 표시	부울	——	거짓
셀 스타일	셀 스타일의 콜백 방법	함수({행, 열, 행 인덱스, 열 인덱스})	——	——
셀클래스이름	셀 className의 콜백 메소드	함수({행, 열, 행 인덱스, 열 인덱스})	——	——
비활성화된 셀	셀 비활성화	함수({행, 열, 행 인덱스, 열 인덱스}) => 부울	——	() => 거짓
showAddRow	행 추가 기능 표시	부울	——	거짓
addRowAndCopy	행을 추가할 때 이전 데이터 행 복사	부울	——	거짓

이벤트

이벤트 이름	설명하다	콜백 매개변수
선택-변경	이 이벤트는 선택 항목이 변경될 때 트리거됩니다.	선택

방법

메소드 이름	설명하다	매개변수
데이터 가져오기	데이터를 얻고 현재 테이블 데이터를 반환하는 데 사용됩니다.	——
데이터 세트	데이터 설정 및 기록 재설정에 사용됩니다.	데이터
getChangeData	변경된 데이터 행 가져오기	——
getErrorRows	확인 오류가 있는 데이터 및 색인 가져오기	——
항목 추가	하단에 데이터 행 추가	목
행 추가	행 추가	rowIndex, copyRow, customData
항목 제거	일괄삭제의 경우 파라미터 키는 id 등 각 행의 고유식별속성이며, 값은 식별속성의 배열이다.	키, 값
setCellData	셀 데이터 설정	rowIndex, 컬럼 인덱스, 값
전체 화면	전체 화면 표시	——
전체 화면 종료	전체 화면 종료	——

열 속성

매개변수	설명하다	유형	선택적 값	기본값
열쇠	열 내용에 해당하는 필드 이름	끈	——	——
제목	열 헤더 표시 텍스트	끈	——	——
너비	열 너비	문자열/숫자	——	——
유형	열 유형	끈	선택/번호/날짜/선택/월	——
체재	천 기호 형식(숫자 유형의 경우)	부울	——	진실
옵션	드롭다운 옵션 선택	정렬	{ 값: '값', 라벨: '표시 텍스트' }	——
결정된	왼쪽에 고정되어 있나요?	부울	——	거짓
행동	필터링 및 정렬 활성화 여부	부울	——	거짓
장애가 있는	편집 금지 여부	부울	——	거짓
noVerify	검증 비활성화 여부	부울	——	거짓
검증하다	맞춤 검증	기능(값)	——	——
맞춤 입력	맞춤 입력	함수({행, 열, rowIndex, columnIndex, 값 })	——	——

단축키

단축키	설명하다
화살표 키	편집 상자 이동
Ctrl + C	반죽
Ctrl+V	복사
Ctrl+A	모든 셀 선택
Ctrl+Z	취소
Ctrl+Y	다시 하다
입력하다	셀 편집/셀 편집 완료
삭제, 백스페이스	삭제