用于后台管理基于iview，vue的穿梭框

引入文件：

<link rel="stylesheet" type="text/css" href="http://unpkg.com/iview/dist/styles/iview.css">
<script type="text/javascript" src="http://vuejs.org/js/vue.min.js"></script>
<script type="text/javascript" src="http://unpkg.com/iview/dist/iview.min.js"></script>

html：

<div id="iviewTrasnsfer">
    <transfer
            :titles="titles"
            :data="data_"
            :target-keys="targetKeys1"
            :render-format="render"
            @on-change="handleChange"></transfer>
</div>

<script>
    var Main = {
        data() {
            return {
                titles: ['源列表', '目的列表'],
                data_: this.getMockData(),
                targetKeys1: this.getTargetKeys(),
            }
        },

        methods: {
            getMockData() {//源列表数据
                let mockData = [];
                let arr = [
                    {id: "1", sort: "首页"},
                    {id: "2", sort: "用户"},
                    {id: "3", sort: "充值"},
                    {id: "4", sort: "游戏"},
                    {id: "5", sort: "推广员"},
                    {id: "6", sort: "统计"},
                    {id: "7", sort: "站点"},
                    {id: "8", sort: "系统"},
                    {id: "9", sort: "扩展"},
                    {id: "10", sort: "主题"},
                    {id: "11", sort: "官网"},
                    {id: "12", sort: "退出"},
                ];

                for (let i = 0; i < arr.length; i++) {
                    mockData.push({
                        key: arr[i].id,
                        label: arr[i].sort
                    });
                }
                return mockData;
            },
            getTargetKeys() {//目的列表数据,根据key筛选;
                return this.getMockData()
                    .filter((item) => item.key > 8)  //随机设定条件，根据实际业务进行筛选
                    .map(item => item.key);

            },
            render(item) {
                return item.label;
            },
            handleChange(newTargetKeys, direction, moveKeys) {//移动元素key,目的列表key,移动方向;  important:根据key获得移动的元素，目的列表数据；
                let originalEle = [];
                let targetEle = [];
                function arr_dive(aArr,bArr){ //第一个数组减去第二个数组
                    if(bArr.length==0){return aArr}
                    var diff=[];
                    var str=bArr.join("&quot;&quot;");
                    for(var e in aArr){
                        if(str.indexOf(aArr[e])==-1){
                            diff.push(aArr[e]);
                        }
                    }
                    return diff;
                }

                for (let i = 0; i < this.data_.length; i++) {
                    originalEle.push(this.data_[i].label);
                    //移动元素
                    if (this.data_[i].key == moveKeys)
                    {
                        console.log("移动元素：", this.data_[i].label);
                    }

                    //目标列表数据
                    for (var j = 0; j < newTargetKeys.length; j++)
                    {
                        if (this.data_[i].key == newTargetKeys[j])
                        {
                            targetEle.push(this.data_[i].label);
                        }
                    }
                }
                originalEle=arr_dive(originalEle,targetEle);
                console.log("源列表元素：", originalEle);
                console.log("目标列表元素：", targetEle);
                this.targetKeys1 = newTargetKeys;
            }
        }
    };

    var Component = Vue.extend(Main)
    new Component().$mount('#iviewTrasnsfer');



</script>

注：
　　1.基于vue;
　　2.根据key获取源列表数据，目标列表数据；
　　3.例子中可以获得移动的元素，移动的方向，列表数据，目标列表数据，

转载于:https://www.cnblogs.com/HONGYE1994/p/8376334.html