@sinoyd/transfer-three

基于 element-ui 组件 el-transfer 的三段式穿梭框

gitlab

npmjs

安装

npm install @sinoyd/transfer-three

使用

<script>
import TransferThree from '@sinoyd/transfer-three';

export default {
  components: {
    TransferThree,
  },
  data() {
    return {
      // 数据源
      data: [],
      // 左侧数据
      leftValue: [],
      // 右侧数据
      rightValue: [],
    };
  },
}
</script>

<template>
  <div style="height: 500px">
    <TransferThree
      mode="copy"
      filterable
      filter-placeholder="请输入"
      :data="data"
      :left-value.sync="leftValue"
      :right-value.sync="rightValue"
      :titles="['left', 'source', 'right']"
      :props="{ key: 'key', label: 'label' }"
      @change="onChange"
    ></TransferThree>
  </div>
</template>

props

参数	说明	类型	默认值
mode	默认，为copy时，则移动时保留数据源	string	''
filterable	是否开启检索	boolean	false
filter-placeholder	检索占位文本	string	请输入搜索内容
titles	自定义列表标题	string[]	['列表 1', '列表 2', '列表 3']
left-value	左侧绑定值	array
right-value	右侧绑定值	array
data	数据源	array[{ key, label, disabled }]	[ ]
props	数据源的字段别名	object{key, label, disabled}

event

事件名称	说明	回调参数
change	列表元素变化时触发	当前值[left, right]、数据移动的方向（'left' / 'right'）