tree-transfer传梭框

tree-transfer

github API地址：github.com/hql7/tree-t…

效果图：

此组件依赖于element框架 里面用到了 Input, Button, Checkbox, Tree组件在main.js中引入

import { Input, Button, Checkbox, Tree} from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(Input);
Vue.use(Button);
Vue.use(Checkbox);
Vue.use(Tree);

组件代码

<template>
  <a-modal v-model="visible" title="选择人员" :width="800" @ok="handleOk" @cancel="cancel">
    <div>
      <tree-transfer
        :title="title"
        :from_data='fromData'
        :to_data='toData'
        :defaultProps="{label:'label'}"
        @add-btn='add'
        @remove-btn='remove'
        :mode='mode'
        height='540px'
        filter
        openAll
        @mouseover.native="addTitle"
      >
      </tree-transfer>
    </div>
  </a-modal>
</template>

import treeTransfer from 'el-tree-transfer';

• 数据操作：每次添加数据的时候,调用add方法 此方法中设置了todata数据。每次移除数据的时候会调用remove方法,此方法中重新赋值 todata数据

// 监听穿梭框组件添加
add(fromData,toData,obj){
   // 树形穿梭框模式transfer时，返回参数为左侧树移动后数据、右侧树移动后数据、移动的{keys,nodes,halfKeys,halfNodes}对象
   // 通讯录模式addressList时，返回参数为右侧收件人列表、右侧抄送人列表、右侧密送人列表
   console.log("fromData:", fromData);
   console.log("toData:", toData);
   console.log("obj:", obj);
   this.toData = toData
},

• 确定按钮：点击确定按钮的时候,抵用父页面的parentFunc方法,传递的参数有 todata(选中的数据) formdata（所有的数据）父页面接到数据后,便于todata数据设置form表单对应的字段

// 点击模态弹窗确定按钮
handleOk(){
    this.clearFilter() // 清除组件内搜索条件
    this.$emit('parentFunc',this.toData,this.fromData);
    this.visible = false;
},
// 清除搜索条件方法，注意（不能使用forEach在这里循环，IE11报错不支持forEach对象和属性）
clearFilter(){
   let querySelectorAll = document.querySelectorAll('.filter-tree input')
   for(let i = 0;i<querySelectorAll.length;i++){
       querySelectorAll[i].value = null
   }
},

• 取消按钮：点击取消按钮的时候需要清空todata数据

// 子组件内cancel方法，toDataList空数组
cancel(){
    this.clearFilter()
    this.$emit('cancel',this.toDataList)
    // eventBus.$emit('cancelEventBus')
},
// 给父组件绑定的cancel方法，参会人组件内点击取消调用此方法，防止右边的数据透传，重新赋值
cancel(rightData){
    this.rightData = rightData
},

• 保存：保存数据的时候，除了需要传递form表单的数据还需要额外给后端传递一个数据,已选择的数据用于编辑时数据回显

// 参会人  选择完点击确定后调用此方法
parentFunc(rightData){
        
   // 组件中选择后重新赋值
   this.rightData = rightData;
   this.tableData = [];

   // 表格数据重新赋值逻辑处理
   ......
   if(rightData&&rightData.length!=0){
       // 如单组件涉及多个穿梭框且数据联动效果，这里处理判断下一个传说卡的key值在已选的key数组没有，做后续逻辑处理
       this.affairsTableData.forEach((item,index)=>{
          if(meetingPersonsArr.indexOf(item.key) == -1){
              this.affairsTableData = []
              this.affairsRightData = []
              this.meetingServicePersons = ''
              // this.meetingPersonsArr.splice(index,1)
           }
       })
       this.form.setFieldsValue({
           "meetingPersons": meetingPersonsArr.toString(),
       })
   }else{
       this.form.setFieldsValue({
          "meetingPersons": '',
       })
   }
}

• 编辑：编辑时调用组件initFunc方法,设置对应的todata 数据，后端返回的左侧数据，需去除已选数据之后的

initFunc(rightData,meetingPersons,meetingPersonTab){
        console.log("🚀 ~ file: myselfTransferTree.vue ~ line 78 ~ initFunc ~ rightData", rightData)
        this.visible = true;
        if(rightData){
          if(meetingPersonTab){
          // 调用方法判断文件树返回可选数据
            this.getbzsMeetingTreequeryUserBylist(meetingPersons,meetingPersonTab);
          }else{
            this.getbzsMeetingTreequeryUserBylist(meetingPersons);
          }
          this.toData = rightData;
          this.meetingPersons = meetingPersons;
        }else{
          this.toData = [];
          this.getbzsMeetingTreequeryUserBylist(this.meetingPersons);
        }
      },