본문으로 바로가기 본문 바로가기
WIKI 기술 지식 베이스

Transfer

원문 보기 위키 갱신

Transfer (이동 선택 상자)

두 열 사이에서 항목을 이동시켜 선택을 완료하는 컴포넌트예요.

출처: 문서

본문

언제 사용하나요

여러 선택지 중에서 다중 선택이 필요할 때 사용해요. Transfer는 두 열 사이에서 데이터를 직관적인 방식으로 이동시켜 선택 작업을 완료하게 도와줘요. 왼쪽 열은 source, 오른쪽 열은 target이고, 최종적으로는 오른쪽 열의 데이터가 개발자에게 전달돼요.

기본 사용법

Transfer의 기본 사용법이에요. :::demo

<template>
  <d-transfer
    :source-default-checked="sourceDefaultChecked"
    :target-default-checked="targetDefaultChecked"
    v-model="selectValue"
    :titles="titles"
    :data="source"
    @change="changeFun"
  >
  </d-transfer>
</template>
<script>
import { defineComponent, reactive, ref } from 'vue';

export default defineComponent({
  setup() {
    const originSource = ref([
      {
        value: '1',
        name: '北京',
        disabled: false,
      },
      {
        value: '2',
        name: '上海',
        disabled: true,
      },
      {
        value: '3',
        name: '广州',
        disabled: false,
      },
      {
        value: '4',
        name: '深圳',
        disabled: false,
      },
      {
        value: '5',
        name: '成都',
        disabled: false,
      },
      {
        value: '6',
        name: '杭州',
        disabled: true,
      },
      {
        value: '7',
        name: '重庆',
        disabled: false,
      },
      {
        value: '8',
        name: '西安',
        disabled: false,
      },
      {
        value: '9',
        name: '苏州',
        disabled: false,
      },
      {
        value: '10',
        name: '武汉',
        disabled: false,
      },
    ]);
    const selectValue = ref(['1', '2']);
    const changeFun = (value, direction, arr) => {
      console.log(value, direction, arr);
    };

    return {
      selectValue,
      titles: ['sourceHeader', 'targetHeader'],
      source: originSource,
      sourceDefaultChecked: ['2', '5', '28'],
      targetDefaultChecked: ['12', '23'],
      changeFun,
    };
  },
});
</script>

:::

검색 가능한 Transfer

데이터가 많을 때는 검색과 필터링으로 원하는 항목을 찾을 수 있어요. :::demo

<template>
  <div class="mb-1">默认搜索</div>
  <d-transfer
    :source-default-checked="sourceDefaultChecked"
    :target-default-checked="targetDefaultChecked"
    :titles="titles"
    :data="source"
    :filter="filter"
    placeholder="请输入"
    v-model="checkedValues1"
    class="mb-3"
  >
  </d-transfer>
  <div class="mb-1">自定义搜索方法</div>
  <d-transfer
    :source-default-checked="sourceDefaultChecked"
    :target-default-checked="targetDefaultChecked"
    :titles="titles"
    :data="source"
    :filter="filterFun"
    v-model="checkedValues2"
    class="mb-3"
  >
  </d-transfer>
</template>
<script>
import { defineComponent, reactive, ref } from 'vue';

export default defineComponent({
  setup() {
    const originSource = [
      {
        value: '1',
        name: '北京',
        disabled: false,
      },
      {
        value: '2',
        name: '上海',
        disabled: true,
      },
      {
        value: '3',
        name: '广州',
        disabled: false,
      },
      {
        value: '4',
        name: '深圳',
        disabled: false,
      },
      {
        value: '5',
        name: '成都',
        disabled: false,
      },
      {
        value: '6',
        name: '杭州',
        disabled: true,
      },
      {
        value: '7',
        name: '重庆',
        disabled: false,
      },
      {
        value: '8',
        name: '西安',
        disabled: false,
      },
      {
        value: '9',
        name: '苏州',
        disabled: false,
      },
      {
        value: '10',
        name: '武汉',
        disabled: false,
      },
    ];

    const filterFun = (item, key) => {
      return item.value.includes(key);
    };
    const checkedValues1 = ref(['2']);
    const checkedValues2 = ref([]);

    return {
      checkedValues1,
      checkedValues2,
      titles: ['sourceHeader', 'targetHeader'],
      source: originSource,
      sourceDefaultChecked: ['5', '7'],
      targetDefaultChecked: ['12', '2'],
      filter: true,
      filterFun,
    };
  },
});
</script>

:::

사용자 정렬 Transfer

source와 target 양쪽의 데이터를 원하는 방식으로 직접 정렬할 수 있어요. :::demo

<template>
  <d-transfer
    :source-default-checked="sourceDefaultChecked"
    :target-default-checked="targetDefaultChecked"
    :titles="titles"
    :data="source"
    :sortMethods="sourceSortMethodsHandle"
  >
  </d-transfer>
</template>
<script>
import { defineComponent, reactive, ref } from 'vue';

export default defineComponent({
  setup() {
    const source = ref([
      {
        value: '1',
        name: '北京',
        disabled: false,
      },
      {
        value: '2',
        name: '上海',
        disabled: true,
      },
      {
        value: '3',
        name: '广州',
        disabled: false,
      },
      {
        value: '4',
        name: '深圳',
        disabled: false,
      },
      {
        value: '5',
        name: '成都',
        disabled: false,
      },
      {
        value: '6',
        name: '杭州',
        disabled: true,
      },
      {
        value: '7',
        name: '重庆',
        disabled: false,
      },
      {
        value: '8',
        name: '西安',
        disabled: false,
      },
      {
        value: '9',
        name: '苏州',
        disabled: false,
      },
      {
        value: '10',
        name: '武汉',
        disabled: false,
      },
    ]);

    return {
      titles: ['sourceHeader', 'targetHeader'],
      source,
      sourceDefaultChecked: ['2', '5', '28'],
      targetDefaultChecked: ['12', '23'],
      sourceSortMethodsHandle: function (data) {
        return data.sort(() => 0.5 - Math.random());
      },
    };
  },
});
</script>

:::

드래그 정렬 Transfer

source와 target 양쪽의 데이터를 드래그로 정렬할 수 있어요. :::demo

<template>
  <d-transfer
    :source-default-checked="sourceDefaultChecked"
    :target-default-checked="targetDefaultChecked"
    :titles="titles"
    :data="source"
    v-model="value"
    :isSourceDrag="sourceDrag"
    :isTargetDrag="sourceDrag"
    :dragstart="dragstartHandle"
    :drop="dropHandle"
    :dragend="dragendHandle"
  >
  </d-transfer>
</template>
<script>
import { defineComponent, reactive, ref } from 'vue';

export default defineComponent({
  setup() {
    const originSource = [
      {
        value: '1',
        name: '北京',
        disabled: false,
      },
      {
        value: '2',
        name: '上海',
        disabled: true,
      },
      {
        value: '3',
        name: '广州',
        disabled: false,
      },
      {
        value: '4',
        name: '深圳',
        disabled: false,
      },
      {
        value: '5',
        name: '成都',
        disabled: false,
      },
      {
        value: '6',
        name: '杭州',
        disabled: true,
      },
      {
        value: '7',
        name: '重庆',
        disabled: false,
      },
      {
        value: '8',
        name: '西安',
        disabled: false,
      },
      {
        value: '9',
        name: '苏州',
        disabled: false,
      },
      {
        value: '10',
        name: '武汉',
        disabled: false,
      },
    ];
    const value = ref([]);

    return {
      value,
      titles: ['sourceHeader', 'targetHeader'],
      source: originSource,
      sourceDefaultChecked: ['2', '5', '28'],
      targetDefaultChecked: ['12', '23'],
      sourceDrag: true,
      dragstartHandle: (event, item) => {
        console.log(item, 'dragstartHandle');
      },
      dropHandle: (event, item) => {
        console.log(item, 'dropHandle');
      },
      dragendHandle: (event, item) => {
        console.log(item, 'dragendHandle');
      },
    };
  },
});
</script>

:::

렌더링 내용 커스터마이즈

항목을 원하는 형태로 직접 렌더링할 수 있어요. :::demo

<template>
  <d-transfer
    :source-default-checked="sourceDefaultChecked"
    :target-default-checked="targetDefaultChecked"
    v-model="selectValue"
    :titles="titles"
    :data="source"
    :render-content="renderContent"
  >
  </d-transfer>
</template>
<script>
import { defineComponent, reactive, ref } from 'vue';

export default defineComponent({
  setup() {
    const originSource = ref([
      {
        value: '1',
        name: '北京',
        disabled: false,
      },
      {
        value: '2',
        name: '上海',
        disabled: true,
      },
      {
        value: '3',
        name: '广州',
        disabled: false,
      },
      {
        value: '4',
        name: '深圳',
        disabled: false,
      },
      {
        value: '5',
        name: '成都',
        disabled: false,
      },
      {
        value: '6',
        name: '杭州',
        disabled: true,
      },
      {
        value: '7',
        name: '重庆',
        disabled: false,
      },
      {
        value: '8',
        name: '西安',
        disabled: false,
      },
      {
        value: '9',
        name: '苏州',
        disabled: false,
      },
      {
        value: '10',
        name: '武汉',
        disabled: false,
      },
    ]);
    const selectValue = ref(['1', '2']);

    const renderContent = (h, option) => {
      return h('span', { style: { color: '#5e7ce0' } }, [option.name]);
    };

    return {
      selectValue,
      titles: ['sourceHeader', 'targetHeader'],
      source: originSource,
      sourceDefaultChecked: ['2', '5', '28'],
      targetDefaultChecked: ['12', '23'],
      renderContent,
    };
  },
});
</script>

:::

Transfer 파라미터

파라미터 타입 기본값 설명 Demo 링크
v-model Array [] 선택 파라미터, 선택 항목 바인딩 값. 오른쪽 트랜스퍼 옵션에 대응 기본 사용법
data Array[{value,name,disabled}] [] 선택 파라미터, 트랜스퍼 소스 데이터 기본 사용법
titles Array [] 선택 파라미터, 트랜스퍼 제목 기본 사용법
height Array 320px 선택 파라미터, 트랜스퍼 높이 기본 사용법
filter boolean | function false 선택 파라미터, 검색 가능 여부. 함수이면 커스텀 필터 메서드 검색 트랜스퍼
render-content function(h,option) -- 선택 파라미터, 데이터 항목 렌더링 함수 커스텀 커스텀 렌더링 콘텐츠
placeholder string 검색 키워드를 입력하세요 선택 파라미터, 검색창 플레이스홀더 검색 트랜스퍼

Transfer 이벤트

이벤트 타입 설명 Demo 링크
change EventEmitter<{value, direction, 이동 배열}> 오른쪽 리스트 변경 시 트리거. 현재 값, 데이터 이동 방향(source, target), 이동된 데이터 배열 기본 사용법
source-drag-end Function(data: Array) 왼쪽 리스트 드래그 종료 트리거 이벤트. 드래그 완료 후 데이터 반환
target-drag-end Function(data: Array) 오른쪽 리스트 드래그 종료 트리거 이벤트. 드래그 완료 후 데이터 반환

더 알아보기 (Learn more)

검색, 정렬, 드래그, 커스텀 렌더링까지 폭넓게 지원해요. 파라미터 표의 타입과 기본값을 참고해 프로젝트에 맞게 조합해 보세요.