vue + element-ui 穿梭框+上下移动、置顶置底功能-Toy模板网

这篇具有很好参考价值的文章主要介绍了vue + element-ui 穿梭框+上下移动、置顶置底功能。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

预览效果：

vue + element-ui 穿梭框+上下移动、置顶置底功能

代码：文章来源地址https://www.toymoban.com/news/detail-506519.html

<template>
    <el-dialog
        title="字段显示与排序设置（提示：位置越靠上的越靠近列表左侧）"
        :visible.sync="dialogShow"
        width="850px"
    >
        <div class="transform-box">
            <el-transfer
                v-model="chooseColumn"
                filterable
                :props="{
                    key: 'key',
                    label: 'label'
                }"
                :titles="['隐藏字段', '显示字段']"
                :format="{
                    noChecked: '${total}',
                    hasChecked: '${checked}/${total}'
                }"
                target-order="push"
                :data="optionsList"
                @right-check-change="choose"
            >
                <el-button
                    v-for="btn in btnList"
                    :key="btn.key"
                    class="transer-footer"
                    slot="right-footer"
                    size="mini"
                    @click="handleChange(btn.key)"
                    >{{ btn.label }}</el-button
                >
            </el-transfer>
        </div>
        <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="submit" size="mini"
                >确 定</el-button
            >
        </span>
    </el-dialog>
</template>
<script>
import _ from "lodash";

export default {
    props: {
        initList: {
            type: Array,
            default: () => []
        }
    },
    watch: {
        initList(val) {
            this.getList(val);
        },
        dialogShow(val) {
            val && this.getList();
        }
    },
    data() {
        return {
            optionsList: [],
            chooseColumn: [],
            chooseItem: [],
            dialogShow: false,
            btnList: [
                {
                    label: "上移",
                    key: "up"
                },
                {
                    label: "下移",
                    key: "down"
                },
                {
                    label: "置顶",
                    key: "top"
                },
                {
                    label: "置底",
                    key: "bottom"
                }
            ]
        };
    },
    methods: {
        getList(list) {
            this.optionsList = [];
            const data = [];
            const dataList = list || this.initList || [];
            _.forEach(dataList, (item, index) => {
                data.push(_.assign({}, { key: index }, item));
            });
            this.optionsList = data;
        },
        isShowDialog() {
            this.dialogShow = !this.dialogShow;
        },
        //右侧选中
        choose(value) {
            this.chooseItem = value;
        },
        // 位移
        handleChange(type) {
            let index = 0;
            if (
                _.isArray(this.chooseItem) &&
                _.isArray(this.chooseColumn) &&
                this.chooseItem.length == 1
            ) {
                _.find(this.chooseColumn, (val, idx) => {
                    if (val == this.chooseItem) {
                        index = idx;
                    }
                });
                let isCanChange = true;
                if ((type === "top" || type === "up") && index == 0) {
                    this.$message("没有上移的空间了");
                    isCanChange = false;
                } else if (
                    (type === "bottom" || type === "down") &&
                    index == this.chooseColumn.length - 1
                ) {
                    this.$message("没有下移的空间了");
                    isCanChange = false;
                }
                if (isCanChange) {
                    const changeIndex = type === "up" ? index - 1 : index;
                    let changeItem = _.cloneDeep(
                        this.chooseColumn[changeIndex]
                    );
                    this.chooseColumn.splice(changeIndex, 1);
                    switch (type) {
                        case "top":
                            this.chooseColumn.splice(0, 0, changeItem);
                            break;
                        case "bottom":
                            this.chooseColumn.splice(
                                this.chooseColumn.length,
                                0,
                                changeItem
                            );
                            break;
                        case "up":
                            this.chooseColumn.splice(index, 0, changeItem);
                            break;
                        case "down":
                            this.chooseColumn.splice(index + 1, 0, changeItem);
                            break;
                    }
                }
            } else {
                this.$message.error("只能选择一条数据进行上下移动");
                return;
            }
        },
        submit() {
            console.log(this.chooseColumn);
        }
    }
};
</script>

<style>
.el-transfer-panel {
    width: 300px;
    padding-bottom: 50px;
}
</style>

到了这里，关于vue + element-ui 穿梭框+上下移动、置顶置底功能的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！