• 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>

  • 相关阅读:
    Jmeter redis连接测试
    Go--切片,append
    IO学习系列之使用read和write复制文件内容
    vue3使用Swiper实现简单轮播图
    C++ 小游戏 视频及资料集(六)
    table多行表头渲染时出现位置错乱问题
    Toward Fast, Flexible, and Robust Low-Light Image Enhancement
    bat批处理脚本大全
    Swift爬虫程序
    华为云HECS云服务器docker环境下安装nginx
  • 原文地址:https://blog.csdn.net/xiaoming4965/article/details/134506265