穿梭框

某厂面试归来，发现自己落伍了！>>>

// 多选设置栏位
<template>
    <div class="multipleTransfer">
        <el-transfer v-model="rightData" @change="rightChange" @right-check-change="rightCheckChange"
            :data="data" :titles="$attrs.titles" target-order="push"></el-transfer>
        <div class="option-container">
            <div class="option_item" :class="(isDisabled === 'up' || isDisabled === 'all') ? 'disabled' : ''" @click="changeSort('up')"><i class="el-icon-arrow-up"></i></div>
            <div class="option_item" :class="(isDisabled === 'down' || isDisabled === 'all') ? 'disabled' : ''" @click="changeSort('down')"><i class="el-icon-arrow-down"></i></div>
        </div>
        <span slot="footer" class="dialog-footer">
            <el-button @click="closeDialog">{{ lang.cancel }}</el-button>
            <el-button type="primary" @click="confirmSelect(rightData)">{{ lang.confirm }}</el-button>
        </span>
    </div>
</template>
<script>
export default {
    name: 'multipleTransfer',
    inheritAttrs: false,
    data() {
        return {
            ...this.$attrs,
            isDisabled: 'all',
            rightCheck: null
        };
    },
    computed: {
        lang() {
            return this.$t(`${'lmes.commonLang'}`);
        },
        data() {
            const leftData = this.leftData;
            console.log('leftData', leftData);
            console.log('this.rightCheck', this.rightCheck);

            leftData.forEach(obj => {
                const lang = obj.lang || obj.label;
                obj.label = this.$t(`${'lmes.commonLang'}`)[lang];
            });
            return leftData;
        }
    },
    methods: {
        // 右侧栏变化事件
        rightChange(arr, direction) {
            console.log('arr, direction', arr, direction);

            if (direction === 'left') this.rightCheck = null;
            this.rightCheckChange();
        },

        // 右侧栏点击取消变化事件
        rightCheckChange(arr) {
            console.log('this.rightData', this.rightData);

            const rightCheck = this.rightCheck;
            const rightData = this.rightData;
            if (!arr && rightCheck) arr = [rightCheck];
            if (arr && rightData && arr.length === 1 && rightData.length > 1) {
                const key = arr[0];
                const maxIndex = rightData.length - 1;
                const index = rightData.indexOf(key);
                this.rightCheck = key;
                switch (index) {
                case 0:
                    this.isDisabled = 'up';
                    break;
                case maxIndex:
                    this.isDisabled = 'down';
                    break;
                default:
                    this.isDisabled = '';
                    break;
                }
            } else if (arr && rightData && arr.length === 1 && rightData.length === 1) {
                this.isDisabled = 'all';
                this.rightCheck = arr[0];
            } else {
                this.isDisabled = 'all';
                this.rightCheck = null;
            }
        },

        // 设置上下移动
        changeSort(direction) {
            const isDisabled = this.isDisabled;
            const rightData = this.rightData;
            const key = this.rightCheck;
            if (isDisabled !== 'all' && direction !== isDisabled && key !== null) {
                const index = rightData.indexOf(key);
                if (direction === 'up') {
                    this.rightData.splice(index, 1);
                    this.rightData.splice(index - 1, 0, key);
                } else {
                    this.rightData.splice(index, 1);
                    this.rightData.splice(index + 1, 0, key);
                }
            }
            this.rightCheckChange();
        },

        // 设置栏位确定按钮
        confirmSelect() {
            this.$listeners.confirmSelect(this.rightData);
        },

        // 点击 取消按钮
        closeDialog() {
            this.$listeners.closeDialog();
        }
    }
};
</script>
<style lang="less" scoped>
.option-container {
    float: left;
    margin-right: 32px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: absolute;
    right: 0;
    top: 220px;
    transform: translate(0, -50%);
    .option_item {
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 50%;
        color: #fff;
        background-color: #00BCBF;
        border: 1px solid #00BCBF;
        width: 34px;
        height: 34px;
        line-height: 35x;
        text-align: center;
        cursor: pointer;
        margin-bottom: 9px;
        i {
            width: 14px;
            height: 14px;
            padding: 7px;
            font-size: 14px;
        }
    }
    .option_item.disabled {
        cursor: not-allowed;
        border: 1px solid #dcdfe6;
        background-color: #f5f7fa;
        color: #c0c4cc;
    }
}
.dialog-footer {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-top: 5px;
}
</style>

 

来源：oschina

链接：https://my.oschina.net/u/4207546/blog/3196790