1.0.0 • Published 2 years ago

ge-transfer v1.0.0

Weekly downloads
-
License
MIT
Repository
-
Last release
2 years ago

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功能,为了解决初始化都没操作时提交的已有数据
* */