基于 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'）