vue-transfer-order

基于vue和element ui(el-row / el-col / el-input / el-tree / el-tag / el-button)实现的仿微信的按顺序选择文件的穿梭框。

功能

• 点击按顺序选择文件，再次点击取消选择
• 右侧按照顺序展示选择的文件，点击标签右侧按钮删除选择的成员
• 支持按字搜索列表名，支持设置最多选择人数

调用方式

• 在main.js中引入组件 import VueTransfer from 'vue-transfer-order'

Vue.use(VueTransfer);

• 使用组件 <vue-transfer @selectNodes="selectNodes">

支持属性

• placeholder:String 搜索框placeholder
• initIds:Array 数据回显，已经选择的数据,
• tagArr:Array 左侧tag标签的label，数组格式按顺序展示
• maxSelectCount:Number 最多选择人数
• overMaxMsg:String 超出最多选择人数的提示
• datas:Array 数据源 默认数据格式：[{ "code": "101", "id": "101", "name": "一级机构1", "parentCode": "1", "subList": [{ "code": "10101", "id": "10101", "name": "二级机构1", "parentCode": "101", "userList": [{ "belongUnit": "10101", "name": "用户1", "sex": "男", "status": "1", "userId": "20210001" }, { "belongUnit": "10101", "name": "用户2", "sex": "男", "status": "1", "userId": "20210002" }] }, { "code": "10102", "id": "10102", "name": "二级机构2", "parentCode": "101", "userList": [{ "belongUnit": "10102", "name": "用户3", "sex": "男", "status": "1", "userId": "20210003" }, { "belongUnit": "10102", "name": "用户4", "sex": "男", "status": "1", "userId": "20210004" }] }] }]

事件

• selectNodes 触发事件，传参选择的ids数组