1.0.12 • Published 2 years ago
vue-transfer-order v1.0.12
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数组