el table draggable

엘 테이블 드래그 가능

중국어(중국어)

el-table이 sortable.js를 지원하도록 하세요.

데모 페이지

특징

• sortablejs 의 거의 모든 옵션을 지원합니다.
• 한 테이블에서 다른 테이블로 드래그 지원
• 지원 트리 테이블
• 지원하다
• 이동 지원
• 빈 el-table 로 드래그 지원

데모에서 볼 수 있습니다

• 행 드래그
• 컬럼 드래그(>1.1.0)
• 드래그 트리(>1.2.0)
• onMove(>1.3.0)를 설정하여 이동을 비활성화합니다.
• 드래그용 핸들 설정
• 그룹 설정
• ...sortable.js의 다른 옵션
• 이벤트 입력, 모두 변경 후

설치하다

npm이나 원사를 사용하세요

yarn add el-table-draggable

npm i -S el-table-draggable

용법

 import ElTableDraggable from "el-table-draggable" ;

export default {
  components : {
    ElTableDraggable ,
  } ,
} ;

주형

 < template >
  < el-table-draggable >
    < el-table row-key > </ el-table >
  </ el-table-draggable >
</ template >

소품

꼬리표

el-table의 래퍼 태그, 기본값은 div 입니다.

열

드래그 컬럼 지원

이동 중

onMove 콜백 설정

 onMove : function ( /**Event*/ evt , /**Event*/ originalEvent , domInfo ) {
   // Example: https://jsbin.com/nawahef/edit?js,output
   evt . dragged ; // dragged HTMLElement
   evt . draggedRect ; // DOMRect {left, top, right, bottom}
   evt . related ; // HTMLElement on which have guided
   evt . relatedRect ; // DOMRect
   evt . willInsertAfter ; // Boolean that is true if Sortable will insert drag element after target by default
   originalEvent . clientY ; // mouse position
   
   domInfo . dragged // the origin dom info of dragged tr, like parent domInfo, level, data, and it's index
   domInfo . related // like dragged
   
   // return false; — for cancel
   // return -1; — insert before target
   // return 1; — insert after target
} , 

다른

sortablejs의 옵션

이벤트

입력

변경 후 데이터 또는 클라우드

다른

sortablejs의 옵션, 옵션은 on 으로 시작합니다. 예 onSort => @sort

할 일

• 트리 테이블

기부

나한테는 커피 한 잔