• el-select与el-tree的联动,切换勾选保存回显功能(全部代码)


     

    1. <template>
    2. <div class="system-role-dialog-container">
    3. <el-dialog draggable :title="title" v-model="isShowDialog" width="30%">
    4. <el-form :model="menuRoleForm" label-width="100px">
    5. <el-row :gutter="35">
    6. <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
    7. <el-form-item label="应用名称 :">
    8. <el-select v-model="menuRoleForm.appList">
    9. <el-option v-for="item in menuOptions" :key="item.label" :label="item.label" :value="item.value" />
    10. el-select>
    11. el-form-item>
    12. el-col>
    13. <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
    14. <el-form-item label="菜单权限 :">
    15. <div v-for="(item, index) in treeMenu.appList" :key="index">
    16. <div v-if="item.appCode">
    17. <el-tree :data="allTreeData[item.appCode]" ref="treeEle" :label="'title'" node-key="id"
    18. :code="item.appCode" :props="treeProps" :current-node-key="currentKey"
    19. :default-checked-keys="selectedNode[item.appCode]" @check="changeCheck"
    20. v-show="menuRoleForm.appList === item.appCode" show-checkbox>
    21. el-tree>
    22. div>
    23. div>
    24. el-form-item>
    25. el-col>
    26. el-row>
    27. el-form>
    28. <template #footer>
    29. <span class="dialog-footer">
    30. <el-button @click="onCancel" size="default">取 消el-button>
    31. <el-button type="primary" @click="onSubmit" size="default">确定el-button>
    32. span>
    33. template>
    34. el-dialog>
    35. div>
    36. template>
    1. <style scoped lang="scss">
    2. .system-role-dialog-container {
    3. .menu-data-tree {
    4. width: 100%;
    5. border: 1px solid var(--el-border-color);
    6. border-radius: var(--el-input-border-radius, var(--el-border-radius-base));
    7. padding: 5px;
    8. }
    9. }
    10. style>

  • 相关阅读:
    文盘Rust -- 把程序作为守护进程启动
    WEB前端常规技术面试题之HTML+CSS基础
    【正点原子STM32连载】 第三十章 DMA实验 摘自【正点原子】MiniPro STM32H750 开发指南_V1.1
    K8S之prometheus-operator监控
    740 · 零钱兑换 2
    Docker可视化—Portainer安装
    iconfont
    『CV学习笔记』文本识别算法CRNN&SVTR介绍
    数据结构——单链表的实现
    零基础入行软件测试必看,10年测试老鸟的良心建议(共15条)
  • 原文地址:https://blog.csdn.net/xiaoming4965/article/details/134506265