element-mini-tree-transfer v1.0.2

插件说明

• 该插件是在vue2和element环境下的简易树穿梭框组件

• 安装：npm i element-mini-tree-transfer

• 使用方法如下案例

<template>
    <tree-transfer
        ref="treeTransfer"
        :title="treeTitle"
        :from_data.sync="fromData"
        :right_data.sync="toData"
        :defaultProps="{ label: 'label' }"
        @add-btn="add"
        @remove-btn="remove"
        @left-check-change="handleLeftCheckChange"
        height="540px"
        filter
        openAll
        :defaultCheckedKeys="defaultValue"
        :rightOptions="rightOptions"
        :isRadio="isRadio"
    ></tree-transfer>
</template>

<script>
    import treeTransfer from 'element-mini-tree-transfer'
    export default {
        name: 'DemoTreeTransfer',
        components: {
            treeTransfer
        },
        props: {},
        data() {
            return {
                isRadio: false, //树穿梭框是否单选
                //树穿梭框的参数
                fromData: [
                    {
                        label: '数据中心',
                        deptCode: '200',
                        deptName: '数据中心',
                        id: '1',
                        children: [
                            {
                                label: '小红',
                                children: [],
                                id: '1-1',
                                nickName: '小红',
                                supCode: '200',
                                userId: '1-1',
                            },
                            {
                                label: '小明',
                                children: [],
                                id: '1-2',
                                nickName: '小明',
                                supCode: '200',
                                userId: '1-2',
                            },
                            {
                                label: '小王',
                                children: [],
                                id: '1-3',
                                nickName: '小王',
                                supCode: '200',
                                userId: '1-3',
                            },
                        ],
                    },
                    {
                        label: '开发中心',
                        deptCode: '201',
                        deptName: '开发中心',
                        id: '2',
                        children: [
                            {
                                label: '小绿',
                                children: [],
                                id: '2-1',
                                nickName: '小绿',
                                supCode: '201',
                                userId: '2-1',
                            },
                            {
                                label: '小黄',
                                children: [],
                                id: '2-2',
                                nickName: '小黄',
                                supCode: '201',
                                userId: '2-2',
                            },
                            {
                                label: '小蓝',
                                children: [],
                                id: '2-3',
                                nickName: '小蓝',
                                supCode: '201',
                                userId: '2-3',
                            },
                        ],
                    },
                ],
                toData: [],
                defaultValue: [],

                rightOptions: { suffix: '', connector: '' },
                treeTitle: ['人员选择', '已有人员'],
            }
        },
        computed: {},
        watch: {},
        created() {},
        mounted() {
            this.getChoosePeople()
        },
        methods: {
            //获取已选人
            getChoosePeople() {
                let list = JSON.parse(JSON.stringify(this.fromData))
                this.toData = [
                    {
                        deptCode: '200',
                        deptName: '数据中心',
                        phone: '18953249201',
                        userId: '1-2',
                        nickName: '小明',
                        label: '小明',
                        id: '1-2',
                    },
                ]
                this.defaultValue = this.toData.map(item => item.id)
                if (this.isRadio && this.toData.length > 0) {
                    //回显判断如果是单选，左侧树全部disable
                    this.$refs.treeTransfer.setDisable(list)
                    this.fromData = list
                } else if (!this.isRadio && this.toData.length > 0) {
                    //回显判断如果是多选，选择的disable
                    this.$refs.treeTransfer.chooseDisable(
                        this.defaultValue,
                        list,
                    )
                    this.fromData = list
                }
            },

            // 监听穿梭框组件添加
            add(fromData) {
                console.log('add:', fromData)
            },
            // 监听穿梭框组件移除
            remove(fromData) {
                console.log('remove:', fromData)
            },
              // 左侧树选项改变
            handleLeftCheckChange(fromData) {
                console.log('handleLeftCheckChange:', fromData)
            }
            
        },
    }
</script>

<style scoped></style>

:::

基础属性

事件

方法

如果觉得有帮到你，可以点一个 star🌟 支持一下～