view的穿梭框使用

   <div class="modal-content">
      <Transfer
        v-model="selectData"
        :data="dataList"
        :target-keys="targetKeys1"
        @on-change="handleChange1"
        :list-style="listStyle"
        filterable
        :titles="['待选', '已选']"
      >
      </Transfer>
    </div>

 data() {
    return {
      listStyle: {
        width: '300px',
        height: '500px'
      },
      dataList: [], //数据源
      targetKeys1: [], //显示在右侧框数据的key集合
      selectData: [] //选中的数据
    };
  },

 watch: {
    modalFlage(val) {
      if (val) {
        this.getEntityList();
      }
    }
  },
   created() {
    this.list();
  },

在这里插入代码methods: {
    // //数据源列表
    list() {
      let param = { itemType: 2 };
      let url = this.severUrl.zhhb_zhcjc_service_dataitems_getlist;
      this.$store.commit('loginTrue');
      this.$https.post(url, param).then(res => {
        this.$store.commit('loginFalse');
        if (res.data.result == 1) {
          let resData = res.data.data;
          this.forData(resData);
        }
      });
    },
    forData(e) {
      let arr = [];
      e.forEach(item => {
        let obj = {
          key: item.id,
          label: item.itemName
        };
        arr.push(obj);
      });
      this.dataList = arr;
    },

    //获取设置设备
    getEntityList() {
      let param = {
        equipmentId: this.parentObj.id
      };
      let url = this.severUrl.zhhb_zhcjc_service_equipmentitemrel_getEntityList;
      this.$store.commit('loginTrue');
      this.$https.post(url, param).then(res => {
        this.$store.commit('loginFalse');
        if (res.data.result == 1) {
          let resData = res.data.data;
          let arr = [];
          resData.forEach(item => {
            arr.push(item.dataItemId);
          });
          this.targetKeys1 = arr;
        }
      });
    },

    // 选项在两栏之间转移时的回调函数
    handleChange1(newTargetKeys, direction, moveKeys) {
      this.targetKeys1 = newTargetKeys;
    },

    //保存提交设置设备
    submit() {
      this.prohibit = true;
      let url = this.severUrl.zhhb_zhcjc_service_equipmentitemrel_saveIteam;
      let params = {
        equipmentId: this.parentObj.id,
        dataItemId: this.targetKeys1.join(',')
      };
      this.$store.commit('loginTrue');
      this.$https.post(url, params).then(res => {
        this.$store.commit('loginFalse');
        this.prohibit = false;
        if (res.data.result == 1) {
          this.$Message.success('保存成功');
          this.cancel();
        } else {
          this.$Message.error(res.data.message);
        }
      });
    },
 /**
     *
     * 取消模态框  // 记得清空
     */
    cancel() {
      if (!this.prohibit) {
        this.$emit('funFlag', false);
        this.$nextTick(() => {
          this.targetKeys1 = [];
        });
      }
    }