Easy UI

Transfer 穿梭框 ​

Transfer 是一个用于在两个列表之间移动数据的穿梭框组件，支持数据筛选、自定义渲染、多选操作等功能。

引入 ​

js

js
<script type='module'>
  import "./node_modules/easy-component-ui/components/ea-transfer/index.js";
</script>

css

TIP

需要注意的是, 如果需要使用到带有图标的 属性/组件, 需要提前使用 link 标签引入图标文件

html
<link
  rel="stylesheet"
  href="./node_modules/easy-component-ui/components/ea-icon/index.css"
/>

自定义样式 ​

移步到 CSS Part。

基础用法 ​

最基本的穿梭框用法，包含左右两个面板和移动按钮。

html
<div class="demo">
  <ea-transfer id="basicTransfer"></ea-transfer>
</div>
js
const basicExample = {
  transfer: document.querySelector("#basicTransfer"),

  generateData: () => {
    const data = [];
    for (let i = 1; i <= 15; i++) {
      data.push({
        key: i,
        label: `Option ${i}`,
        disabled: i % 4 === 0,
      });
    }
    return data;
  },

  init() {
    const data = this.generateData();
    this.transfer.data = data;
  },
};
basicExample.init();

可搜索过滤 ​

通过设置 filterable 属性启用搜索功能，可以快速筛选数据。

html
<div class="demo">
  <ea-transfer id="filterableTransfer" filterable></ea-transfer>
</div>
js
const filterableExample = {
  transfer: document.querySelector("#filterableTransfer"),

  generateData: () => {
    const data = [];
    for (let i = 1; i <= 15; i++) {
      data.push({
        key: i,
        label: `Option ${i}`,
        disabled: i % 4 === 0,
      });
    }
    return data;
  },

  init() {
    const data = this.generateData();
    this.transfer.data = data;
  },
};
filterableExample.init();

自定义用法 ​

支持自定义面板标题、按钮文本、空状态内容等。

Customize data items using render-content

Operation
Operation
html
<div class="demo">
  <p style="text-align: center; margin: 0 0 20px">
    Customize data items using render-content
  </p>
  <div style="text-align: center">
    <ea-transfer
      id="customTransfer"
      style="text-align: left; display: inline-block"
      filterable
    >
      <div slot="left-footer">
        <ea-button size="small" style="margin-left: 15px; padding: 6px 5px">
          Operation
        </ea-button>
      </div>
      <div slot="right-footer">
        <ea-button size="small" style="margin-left: 15px;padding: 6px 5px">
          Operation
        </ea-button>
      </div>
    </ea-transfer>
  </div>
</div>
js
const customExample = {
  transfer: document.querySelector("#customTransfer"),

  generateData: () => {
    const data = [];
    for (let i = 1; i <= 15; i++) {
      data.push({
        key: i,
        label: `Option ${i}`,
        disabled: i % 4 === 0,
      });
    }
    return data;
  },

  init() {
    const data = this.generateData();

    this.transfer.titles = ["Source", "Target"];
    this.transfer.buttonTexts = ["To right", "To left"];

    this.transfer.data = data;

    this.transfer.value = [1, 2, 3];

    this.transfer.addEventListener("change", event => {
      console.log("Selection changed:", event.detail.value);
    });

    this.transfer.addEventListener("ea-left-check-change", event => {
      console.log("Left check changed:", event.detail);
    });

    this.transfer.addEventListener("ea-right-check-change", event => {
      console.log("Right check changed:", event.detail);
    });
  },
};
customExample.init();

自定义空内容 ​

可以为左右面板分别自定义空状态显示内容。

Customize empty content for both panels

📭
No data
📭
No data
html
<div class="demo">
  <p style="text-align: center; margin: 0 0 20px">
    Customize empty content for both panels
  </p>
  <div style="text-align: center">
    <ea-transfer id="emptyTransfer">
      <div slot="left-empty">
        <div style="text-align: center; padding: 20px; color: #909399">
          <div style="font-size: 60px; margin-bottom: 10px">📭</div>
          <div>No data</div>
        </div>
      </div>
      <div slot="right-empty">
        <div style="text-align: center; padding: 20px; color: #909399">
          <div style="font-size: 60px; margin-bottom: 10px">📭</div>
          <div>No data</div>
        </div>
      </div>
    </ea-transfer>
  </div>
</div>
js
const emptyExample = {
  transfer: document.querySelector("#emptyTransfer"),

  generateData: () => {
    const data = [];
    for (let i = 1; i <= 15; i++) {
      data.push({
        key: i,
        label: `Option ${i}`,
        disabled: i % 4 === 0,
      });
    }
    return data;
  },

  init() {
    this.transfer.data = this.generateData();

    this.transfer.addEventListener("change", event => {
      console.log("Selection changed:", event.detail.value);
    });
  },
};
emptyExample.init();

Transfer API ​

Transfer Attributes ​

参数说明类型可选值默认值
data prop数据源Array-[]
value prop已选中的数据项Array-[]
disabled是否禁用Boolean-false
filterable是否可搜索Boolean-false
filter-placeholder搜索框占位符String-"请输入搜索内容"
dataProps prop数据字段映射配置Object-
titles面板标题Array-[]
buttonTexts prop按钮文本Array-[]
filterMethod prop自定义筛选方法Function-null
leftDefaultChecked prop左侧默认选中项Array-[]
rightDefaultChecked prop右侧默认选中项Array-[]

Transfer Methods ​

方法名说明参数
clearQuery清空搜索关键词which: 'left' | 'right'

Transfer Events ​

事件名说明回调参数(event.detail)
change选中项变化时触发{ value: any[] }
ea-left-check-change左侧面板选中项变化时触发{ value: any[], movedKeys?: any[] }
ea-right-check-change右侧面板选中项变化时触发{ value: any[], movedKeys?: any[] }

Transfer CSS Part ​

用法可参考 MDN ::part()伪类

名称说明
container组件容器
panel面板容器
panel & source-panel左侧面板
panel & target-panel右侧面板
buttons按钮区域
button按钮
button & move-to-right-btn向右移动按钮
button & move-to-left-btn向左移动按钮

Transfer Slot ​

名称说明
left-empty左侧面板空状态内容
right-empty右侧面板空状态内容
left-footer左侧面板底部内容
right-footer右侧面板底部内容

TransferPanel API ​

TransferPanel CSS Part ​

名称说明
container面板容器
header面板头部
checkbox全选复选框
title标题
count计数显示
body面板主体
filter-wrapper搜索框容器
filter搜索框
empty空状态区域
list列表容器
item-checkbox列表项复选框
item-label列表项标签

TransferPanel Slot ​

名称说明
empty空状态内容