VUE利用tree-transfer插件实现角色菜单动态设置

参考列子:

Git示例及说明

1、说明:菜单为多级菜单的父子级结构,Element里边的transfer只涉及到一级列表展现,不太符合预期,然后就百度,发现有人写了tree-transfer插件,刚好是我想要的效果,然后就往这个方向去实现,但是网上的列子吧,和git上的示例代码基本一样,要真正实现一个动态的完整功能,还是需要一步一步来的!

2、npm下载插件,请参考Git示例

3、页面引用

<template>
    <div class="widget-content">
        <tree-transfer :title="title"
                       :from_data='fromData'
                       :to_data='toData'
                       :defaultProps="{label:'label',value:'id'}"
                       @addBtn='add'
                       @removeBtn='remove'
                       @change="changeMode"
                       :mode='mode' height='640px' filter openAll>
        </tree-transfer>
    <el-button type="primary" size="mini" @click="save" style="margin-left:30%;">保存</el-button>
    </div>
</template>
import treeTransfer from 'el-tree-transfer' // 引入

别忘了export引入组件

export default {
        components: {
            treeTransfer
        },
…………其他代码此处忽略
}

script所有代码:

<script>
    import treeTransfer from 'el-tree-transfer' // 引入

    export default {
        components: {
            treeTransfer
        },
        data(){
            return{
                roleId:"",
                title:["已有菜单权限","可选菜单权限"],
                mode: "transfer", // transfer addressList
                    fromData:[],
                    toData:[]
            }
        },
        methods:{
            //初始化数据
            dataInitialization(id){
                let that = this;
                that.roleId = id;
                that.axios
                    .get(
                        "/qsmonitor/menu/getMenuByRole?roleId="+id
                    )
                    .then(res => {
                        that.fromData = res.data.data.fromData;
                        that.toData = res.data.data.toData;
      
                        that.$notify({
                            title: "成功",
                            message: res.data.message,
                            type: "success"
                        });
                    })
                    .catch(err => {
                        that.$notify.error({
                            title: "错误",
                            message: err
                        });
                        console.log(err);
                    });
            },
            // 切换模式 现有树形穿梭框模式transfer 和通讯录模式addressList
            changeMode() {
                if (this.mode == "transfer") {
                    this.mode = "addressList";
                } else {
                    this.mode = "transfer";
                }
            },
            // 减少权限设置
            add(fromData,toData,obj){
                this.fromData = fromData;
                this.toData = toData;
            },
            // 增加权限设置
            remove(fromData,toData,obj){
                this.fromData = fromData;
                this.toData = toData;
            },
            save(){
                let addIds = "";
                this.fromData.forEach((item,i)=>{
                    addIds += item.id+",";
                });
                this.axios
                    .put(
                        "/qsmonitor/menu/setMenu?roleId="+this.roleId+"&addIds="+addIds
                    )
                    .then(res => {
                        if (res.data.data) {
                            this.loading = false;
                        }
                        this.dataInitialization(this.roleId);
                        this.$notify({
                            title: "成功",
                            message: res.data.message,
                            type: "success"
                        });
                    })
                    .catch(err => {
                        console.info(err);
                        this.$notify.error({
                            title: "错误",
                            message: "系统异常"
                        });
                        console.log(err);
                    });
            }
        }
    }
</script>

个人思路:

1、数据初始化,后台是查询到已拥有的权限list(赋值给fromData)和未拥有的菜单list(赋值给toData)

2、在点击保存按钮时,遍历到已拥有的菜单id并且拼接逗号连接的字符串返回给后台

后续完整功能:请参考VUE弹窗加载另一个VUE页面

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
要在Vue3中使用Element Tree Transfer,需要先安装和引入Element和Vue3: 1. 安装Element和Vue3: ```bash npm install element-plus vue@next ``` 2. 在main.js中引入Element和Vue3: ```js import { createApp } from 'vue' import ElementPlus from 'element-plus' import 'element-plus/lib/theme-chalk/index.css' import App from './App.vue' const app = createApp(App) app.use(ElementPlus) app.mount('#app') ``` 3. 在组件中使用Element Tree Transfer: ```vue <template> <el-tree-transfer :data="data" :titles="['Source', 'Target']" :render-content="renderContent" @change="handleChange" /> </template> <script> export default { data() { return { data: [ { id: 1, label: 'Node 1', children: [ { id: 2, label: 'Node 1-1' }, { id: 3, label: 'Node 1-2' } ] }, { id: 4, label: 'Node 2' }, { id: 5, label: 'Node 3', children: [ { id: 6, label: 'Node 3-1' } ] } ], selectedKeys: [] } }, methods: { renderContent(h, { node, data, store }) { return ( <span class="custom-tree-node"> <span>{node.label}</span> <span> <el-button size="mini" onClick={() => this.handleEdit(data)}>Edit</el-button> </span> </span> ) }, handleChange(targetKeys, direction, moveKeys) { console.log(targetKeys, direction, moveKeys) } } } </script> ``` 在上面的例子中,我们创建了一个包含Tree Transfer的组件。我们定义了一个data属性,用于渲染树形结构。我们还定义了一个renderContent函数,用于自定义每个节点的内容。最后,我们定义了一个handleChange方法,用于处理转移事件。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

菜鸟茜

随多随少随你心意^-^

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值