vue transfer 使用

直接上代码：

<template>
    <div>
        <div class="transfer-selection">
            <a-popover>
                <template slot="content">
                    左边为数据源，右侧为要提交的数据
                </template>
                <span  style="color:yellowgreen" ></span>温馨提示 </span><a-icon type="question-circle" />
            </a-popover>
        </div>
        <div >
            <a-transfer
            :data-source="mockData"
            show-search
            :list-style="{
              width: '45%',
              height: '600px',
            }"
          
            :target-keys="targetKeys"
            :render="item => `${item.title}-${item.description}`"
            @change="handleChange"
          >
      
            <span slot="notFoundContent">
              没数据
            </span>
          </a-transfer>
        </div>
    </div>

  </template>
  <script>
  export default {
    data() {
      return {
        mockData: [],
        targetKeys: [],
      };
    },
    mounted() {
      this.getMock();
    },
    methods: {
        getMock() {
        const targetKeys = [];
        const mockData =[{'key':1,'title':"xxxx1",description:"desc1"},{'key':2,'title':"xxxx2",description:"desc1"}];
        this.mockData = mockData;
        this.targetKeys = targetKeys;
    },

      handleChange(targetKeys, direction, moveKeys) {
        console.log(targetKeys, direction, moveKeys);
        this.targetKeys = targetKeys;
        for (let item of moveKeys){
            if (targetKeys.indexOf(item) == -1)
            targetKeys.push(moveKeys)
        }
        
      },
    },
  };
  </script>



<style lang="less">

.transfer-selection{

    margin-bottom:30px ;
}
</style>

标签：vue,description,title,transfer,使用,moveKeys,item,mockData,targetKeys
来源： https://www.cnblogs.com/SunshineKimi/p/15109814.html