Vue Element Transfer 穿梭框使用

实现效果图
主要希望能在点击左右交换的时候，能够监听事件，并即时提交至后台

首先，使用组件

 		    <h5 class="title">关联菜单元素管理</h5>
            <div class="block menu-element-block">
              <el-transfer
                v-model="menuelementvalue"
                :data="elementdata"
                :titles="['已关联菜单元素', '未关联菜单元素']"
                :button-texts="['绑定', '解绑']"
                @change="transferChange"
                ></el-transfer>
            </div>

data return 初始数据

		menuelementvalue: [],
        elementdata: []

js部分

			Arr.forEach(item => {
              let obj = {}
              this.$set(obj, 'key', this.elementdata.length)
              this.$set(obj, 'label', item.name)
              this.$set(obj, 'id', item.id)
              this.elementdata.push(obj)
            })

change监听事件

/** 穿梭框数据改变时**/
      transferChange(value, direction, keyArr) {
      //value为选中值，direction为方向left or right，keyArr为右边框的key数组
        switch (direction) {
          case 'left':
            keyArr.forEach((item, index) => {
              //你的提交后台事件，elementdata[index].id即为选中的其中一个元素的id，循环获得所有。
            })
          break
          case 'right':
            keyArr.forEach((item, index) => {
              //你的提交后台事件事件
            })
          break
        }
      },