ge-transfer v1.0.0
ge-transfer
transfer components by table
该组件适用用vue1.x-2.x版本(主要适用在2.x)
安装说明
npm: npm install ge-transfer yarn: yarn add ge-transfer
在局部组件上使用
import geTransfer from 'ge-transfer'
在main.js全局中配置
import geTransfer from 'ge-transfer' Vue.use(geTransfer) 然后在其他.vue文件里面,直接使用组件 即可
使用说明以及参数说明
/** 参数说明: searchHolder: 搜索框提示的内容 receiveData: 接收到的数据-待选列表 hasSearch: 是否需要搜索功能 tableKey: 字段名 isCheckValue: 用于初始化数据时,数据在已选的右边table中-已选列表 dispatchData: 发送右边已选table中的数据到父组件事件 * 使用模板 <ge-transfer ref="gTransferRef" :hasSearch="true" :isCheckValue="exportFieldVlue" :searchHolder="pSearchHolder" :receiveData="exportFieldData" @dispatchData="getCurrentNodeTransfer" :tableKey="tableKey"> //------父组件绑定的属性值以及方法 begin----------- exportFieldVlue : [],//已选 exportFieldData : [],//待选 pSearchHolder:'请输入需要搜索的内容',
/** 获取当前页面选中树节点后,transfer右边被选中的值 **/
getCurrentNodeTransfer(value){
// console.log("获取到初始化transfer右边数据="+value);
},
//------父组件绑定的属性值以及方法 end-----------
*
* tableKey: [{
name: '日期',
value: 'date',
label: 100
},{
name: '姓名',
value: 'name',
label: 100
},{
name: '地址',
value: 'address',
label: 100
}],
*
* 数据异步加载需要在使用该组件时加v-if
* 确保异步加载完再显示组件,这样才能把初始数据赋值到组件上
* 异步获取数据中的Key要跟tableKey中的value值一样
*
* $emit提交到父组件上的值是右边table框中该条的完整数据字段,若想只要某个字段需要在父组件中操作
*
* 修改记录:
* 2018年8月3日11:15:00
* ge.libin
* 1.初始化赋值等操作原先在created钩子上赋值,现在改为用watch监听方式。同时原先界面有用v-if的方式去掉
* 2.删除搜索、重置按钮功能,改为输入框实时检索待选列表数据
*
* * 2018年12月18日11:15:00
* linych
* 1.解决第一次右移删除问题 对象引用原因
* 2.新增清除搜索条件方法 调用类似this.$refs['gTransferRef'].clearSearch();
*
* 2018年12月20日09:46:59
* ge.libin
* 1.在watch->isCheckedValue时恢复早先的$emit功能,为了解决初始化都没操作时提交的已有数据
* */
2 years ago