el-table을 사용하여 vue2에서 테이블 그룹화, 드래그 앤 드롭 정렬을 구현하는 방법은 무엇입니까?

vue2 el-table과 결합하여 테이블 그룹화, 드래그 앤 드롭 정렬

이 기사에서는 EL-TABLE 구성 요소를 사용하여 VUE2 프로젝트에서 테이블 그룹화, 드래그 앤 드롭 분류 기능을 구현하는 방법을 소개합니다. 테이블 데이터가 "Topped"와 "Non-Topped"의 두 그룹으로 나누어졌으며 그룹의 데이터를 드래그하여 정렬 할 수 있지만 그룹간에 드래그 할 수는 없습니다.

장면 설명

이 프로젝트는 vue2 및 요소 UI의 el-table 구성 요소를 사용합니다. 테이블 데이터는 다음과 같습니다.

• 상단 영역 : 데이터 번호 1, 2, 3
• 비 탑 영역 : 데이터 번호 4, 5, 6

목표:

1. 최상위 영역 데이터 (1, 2, 3)는 서로 정렬 할 수 있습니다.
2. 비 탑 영역 데이터 (4, 5, 6)는 서로 정렬 할 수 있습니다.
3. 상단과 비 탑승 영역 (예 : 1 및 4) 사이의 데이터는 서로 드래그하여 떨어질 수 없습니다.

구현 계획

vuedraggable 라이브러리를 사용하여 드래그 앤 드롭 기능을 구현하십시오.

1. vuedraggable 설치 :

    NPM veudRaggable을 설치하십시오

2. vuedraggable 소개 :

   VUE 구성 요소 :

    'veudRaggable'에서 draggable 가져 오기

3. 데이터 구조 조정 :

   테이블 데이터를 두 배열로 나눕니다.

    데이터 () {
     반품 {
       TopData : [{id : 1, content : 'top 1'}, {id : 2, content : 'top 2'}, {id : 3, content : 'top 3'}],
       normaldata : [{id : 4, content : 'normal 4'}, {id : 5, content : 'normal 5'}, {id : 6, content : 'normal 6'}]
     };
   },
   구성 요소 : {
     드래그 가능
   }

4. vuedraggable 사용하여 드래그 앤 드롭을 구현하십시오.

   템플릿에서 :

   <template>
     <div>
       <h3 id="최고-지역">최고 지역</h3>
       <draggable group="top" v-model="topData">
         <el-table :data="topData" style="width: 100%">
           <el-table-column label="内容" prop="content"></el-table-column>
         </el-table>
       </draggable>
       <h3 id="비-탑-된-지역">비 탑 된 지역</h3>
       <draggable group="normal" v-model="normalData">
         <el-table :data="normalData" style="width: 100%">
           <el-table-column label="内容" prop="content"></el-table-column>
         </el-table>
       </draggable>
     </div>
   </template>

5. 드래그 앤 드롭 엔드 이벤트 처리 :

   방법 :

    방법 : {
     onend () {
       Console.log ( '상위 데이터 :', this.topdata);
       Console.log ( '비 구독 데이터 :', this.normaldata);
       // 데이터 추가 또는 기타 업데이트 로직 추가}
   }

위의 단계를 통해 EL-TABLE 테이블의 그룹 드래그 앤 드롭 순서를 실현할 수 있으며 그룹 간 데이터를 드래그하고 삭제할 수 없습니다. 필요에 따라 실제 애플리케이션에서 데이터 지속성 및 기타 작업을 개선해야합니다.

위 내용은 el-table을 사용하여 vue2에서 테이블 그룹화, 드래그 앤 드롭 정렬을 구현하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!