• 16 el-tree 保存树的 选择状态, 展开状态

    前言

    需求 来自于一些实际的场景 

    这里 仅仅是一个 样例来实现 这一部分需求 

    这部分 处理也相对比较简单, 就直接 展示 代码了 

    1. 节点 增删改查 的实现(一种基于模型的实现, 一种基于 el-tree api 的实现)

    2. 保存 el-tree 的 选择状态 

    3. 保存 el-tree 的 展开状态 

    样例代码

    如下 增删改查两种实现方式, 注释掉的是基于 el-tree 的 api 的使用 

    1. <template>
    2.  
    3.   <div>
    4.     <div style="width: 20%; float: left;">
    5.       （\#-_-)\┯━┯
    6.     </div>
    7.  
    8.     <div style="width: 20%; float: left;">
    9.       <el-tree
    10.         ref="treeRef"
    11.         :data="tree.nodeList"
    12.         show-checkbox
    13.         node-key="id"
    14.         :default-checked-keys="tree.defaultCheckedKeys"
    15.         :default-expanded-keys="tree.defaultExpandedKeys"
    16.         :check-on-click-node="true"
    17.         :props="tree.defaultProps"
    18.         @node-expand="handleNodeExpand"
    19.         @node-collapse="handleNodeCollapse"
    20.       />
    21.     </div>
    22.  
    23.     <div style="width: 15%; float: left;">
    24.       <span> 新增 </span>
    25.       <el-select v-model="newNode.parentId" filterable placeholder="请选择父节点">
    26.         <el-option v-for="item in treeNodeList" :key="item.id" :label="item.name" :value="item.id"/>
    27.       </el-select>
    28.       <el-input placeholder="please input id" v-model="newNode.id">
    29.         <template slot="prepend">key</template>
    30.       </el-input>
    31.       <el-input placeholder="please input name" v-model="newNode.name">
    32.         <template slot="prepend">name</template>
    33.       </el-input>
    34.       <el-button @click="handleNewNode">提交</el-button>
    35.     </div>
    36.  
    37.     <div style="width: 15%; float: left;">
    38.       <span> 更新 </span>
    39.       <el-select v-model="updateNode.id" filterable placeholder="请选择节点">
    40.         <el-option v-for="item in treeNodeList" :key="item.id" :label="item.name" :value="item.id"/>
    41.       </el-select>
    42.       <el-input placeholder="please input name" v-model="updateNode.name">
    43.         <template slot="prepend">name</template>
    44.       </el-input>
    45.       <el-button @click="handleUpdateNode">提交</el-button>
    46.     </div>
    47.  
    48.     <div style="width: 15%; float: left;">
    49.       <span> 移除 </span>
    50.       <el-select v-model="removeNode.id" filterable placeholder="请选择节点">
    51.         <el-option v-for="item in treeNodeList" :key="item.id" :label="item.name" :value="item.id"/>
    52.       </el-select>
    53.       <el-button @click="handleRemoveNode">提交</el-button>
    54.     </div>
    55.  
    56.   </div>
    57.  
    58. </template>
    59.  
    60. <script>
    61.  
    62.   export default {
    63.     name: 'ElTreeCrud',
    64.     computed: {
    65.       treeNodeList: function () {
    66.         let collector = []
    67.         this.collectNodeRecursed(this.tree.nodeList, collector)
    68.         return collector
    69.       }
    70.     },
    71.     data () {
    72.       return {
    73.         newNode: {
    74.           parentId: 'backend',
    75.           id: '',
    76.           name: '',
    77.         },
    78.         updateNode: {
    79.           id: 'backend',
    80.           name: '',
    81.         },
    82.         removeNode: {
    83.           id: 'backend',
    84.         },
    85.         tree: {
    86.           nodeList: [{
    87.             id: 'backend',
    88.             name: '后端',
    89.             children: [
    90.               {
    91.                 id: 'backend1',
    92.                 name: '后端1',
    93.                 children: []
    94.               }, {
    95.                 id: 'backend2',
    96.                 name: '后端2',
    97.                 children: []
    98.               }
    99.             ]
    100.           }, {
    101.             id: 'frontend',
    102.             name: '前端',
    103.             children: [
    104.               {
    105.                 id: 'frontend1',
    106.                 name: '前端1',
    107.                 children: []
    108.               }, {
    109.                 id: 'frontend2',
    110.                 name: '前端2',
    111.                 children: []
    112.               }
    113.             ]
    114.           }, {
    115.             id: 'preprocess',
    116.             name: '数据',
    117.             children: [
    118.               {
    119.                 id: 'preprocess1',
    120.                 name: '数据1',
    121.                 children: []
    122.               }, {
    123.                 id: 'preprocess2',
    124.                 name: '数据2',
    125.                 children: []
    126.               }
    127.             ]
    128.           }],
    129.           defaultExpandedKeys: [],
    130.           defaultCheckedKeys: ['backend1', 'preprocess1'],
    131.           defaultProps: {
    132.             children: 'children',
    133.             label: 'name'
    134.           }
    135.         }
    136.       }
    137.     },
    138.     mounted () {
    139.       window.addEventListener('beforeunload', e => this.beforeLeaveFunc(e))
    140.       this.tree.defaultExpandedKeys = this.treeNodeList.map(ele => ele.id)
    141.  
    142.       // check if already stored
    143.       // todo, if defaultCheckedKeys is not blank at data's init, then specified node will always be checked
    144.       let treeNodeCheckedKeysStr = sessionStorage.getItem('treeNodeCheckedKeys')
    145.       if (treeNodeCheckedKeysStr) {
    146.         this.tree.defaultCheckedKeys = JSON.parse(treeNodeCheckedKeysStr)
    147.         // JSON.parse(treeNodeCheckedKeysStr).forEach(ele => this.tree.defaultCheckedKeys.push(ele))
    148.       }
    150.       let expandedKeysStr = sessionStorage.getItem('expandedKeys')
    151.       if (expandedKeysStr) {
    152.         this.tree.defaultExpandedKeys = JSON.parse(expandedKeysStr)
    153.       }
    154.     },
    155.     created () {
    157.     },
    158.     methods: {
    159.       // beforeLeaveFunc
    160.       beforeLeaveFunc () {
    161.         let treeRef = this.$refs.treeRef
    162.         let checkedKeys = treeRef.getCheckedKeys()
    163.         sessionStorage.removeItem('treeNodeCheckedKeys')
    164.         sessionStorage.setItem('treeNodeCheckedKeys_tmp', JSON.stringify(checkedKeys))
    165.         if (checkedKeys.length > 0) {
    166.           sessionStorage.setItem('treeNodeCheckedKeys', JSON.stringify(checkedKeys))
    167.         }
    169.         // let treePropRoot = treeRef.root
    170.         // let expandedKeys = []
    171.         // this.expandedKeys(treePropRoot, expandedKeys)
    172.         // sessionStorage.removeItem('expandedKeys')
    173.         // sessionStorage.setItem('expandedKeys_tmp', JSON.stringify(expandedKeys))
    174.         // if(expandedKeys.length > 0) {
    175.         //   sessionStorage.setItem('expandedKeys', JSON.stringify(expandedKeys))
    176.         // }
    177.       },
    178.       // curd
    179.       handleNewNode () {
    180.         if (!this.newNode.id || !this.newNode.name) {
    181.           this.$message.error('please input id and name')
    182.           return
    183.         }
    184.         let targetNode = this.lookUpNode(this.tree.nodeList, this.newNode.id)
    185.         if (targetNode) {
    186.           this.$message.error('update node\'s with id ' + this.newNode.id + ' already exists')
    187.           return
    188.         }
    189.  
    190.         let newNode = {
    191.           id: this.newNode.id,
    192.           name: this.newNode.name,
    193.           children: []
    194.         }
    195.  
    196.         // let treeRef = this.$refs.treeRef
    197.         // treeRef.append(newNode, treeRef.getNode(this.newNode.parentId))
    198.         // this.$message.success(' add new node ' + this.newNode.name + ' at parentNode ' + this.lookUpNode(this.tree.nodeList, this.newNode.parentId).name + ' success')
    199.  
    200.         let parentNode = this.lookUpNode(this.tree.nodeList, this.newNode.parentId)
    201.         parentNode.children.push(newNode)
    202.       },
    203.       handleUpdateNode () {
    204.         if (!this.updateNode.id || !this.updateNode.name) {
    205.           this.$message.error('please input id and name')
    206.           return
    207.         }
    208.         let targetNode = this.lookUpNode(this.tree.nodeList, this.updateNode.id)
    209.         if (!targetNode) {
    210.           this.$message.error('update node\'s with id ' + this.newNode.id + ' does not exists')
    211.           return
    212.         }
    214.         // let treeRef = this.$refs.treeRef
    215.         // targetNode.name = this.updateNode.name
    216.         // treeRef.updateKeyChildren(this.updateNode.id, targetNode)
    218.         targetNode.name = this.updateNode.name
    219.       },
    220.       handleRemoveNode () {
    221.         // let treeRef = this.$refs.treeRef
    222.         // let targetNode = this.lookUpNode(this.tree.nodeList, this.removeNode.id)
    223.         // if (!targetNode) {
    224.         //   this.$message.error('update node\'s with id ' + this.removeNode.id + ' does not exists')
    225.         //   return
    226.         // }
    227.         // treeRef.remove(targetNode)
    228.  
    229.         let parentNode = this.lookUpParentNode(this.tree.nodeList, null, this.removeNode.parentId)
    230.         let idxOfNode = parentNode.children.map(ele => ele.id).indexOf(this.removeNode.id)
    231.         parentNode.children.splice(idxOfNode, 1)
    232.       },
    233.       handleNodeExpand (node, nodeProp, treeNode) {
    234.         console.log('handleNodeExpand')
    235.         let treeRef = this.$refs.treeRef
    236.         let treePropRoot = treeRef.root
    237.  
    238.         let expandedKeys = []
    239.         this.expandedKeys(treePropRoot, expandedKeys)
    240.         sessionStorage.removeItem('expandedKeys')
    241.         sessionStorage.setItem('expandedKeys_tmp', JSON.stringify(expandedKeys))
    242.         if (expandedKeys.length > 0) {
    243.           sessionStorage.setItem('expandedKeys', JSON.stringify(expandedKeys))
    244.         }
    245.       },
    246.       handleNodeCollapse (node, nodeProp, treeNode) {
    247.         // update current node's expand
    248.         nodeProp.expanded = false
    249.         this.handleNodeExpand(node, nodeProp, treeNode)
    250.       },
    251.       // assist methods
    252.       collectNodeRecursed (nodeList, collector) {
    253.         if (!nodeList) {
    254.           return null
    255.         }
    257.         for (let idx in nodeList) {
    258.           let childNode = nodeList[idx]
    259.           collector.push({id: childNode.id, name: childNode.name})
    261.           if (childNode.children) {
    262.             this.collectNodeRecursed(childNode.children, collector)
    263.           }
    264.         }
    265.       },
    266.       lookUpNode (nodeList, id) {
    267.         if (!nodeList) {
    268.           return null
    269.         }
    271.         for (let idx in nodeList) {
    272.           let childNode = nodeList[idx]
    273.           if (id === childNode.id) {
    274.             return childNode
    275.           }
    277.           if (childNode.children) {
    278.             let result = this.lookUpNode(childNode.children, id)
    279.             if (result) {
    280.               return result
    281.             }
    282.           }
    283.         }
    285.         return null
    286.       },
    287.       lookUpParentNode (nodeList, parentNode, id) {
    288.         if (!nodeList) {
    289.           return null
    290.         }
    292.         for (let idx in nodeList) {
    293.           let childNode = nodeList[idx]
    294.           if (id === childNode.id) {
    295.             if (!parentNode) {
    296.               parentNode = {
    297.                 children : this.tree.nodeList
    298.               }
    299.             }
    300.             return parentNode
    301.           }
    303.           if (childNode.children) {
    304.             let result = this.lookUpParentNode(childNode.children, childNode, id)
    305.             if (result) {
    306.               return result
    307.             }
    308.           }
    309.         }
    311.         return null
    312.       },
    313.       expandedKeys (nodeFromRef, collector) {
    314.         if (nodeFromRef.expanded) {
    315.           collector.push(nodeFromRef.data.id)
    316.         }
    317.         // 如果不是 root 节点, 并且没有展开, 不继续处理
    318.         if ((nodeFromRef.id !== 0) && (!nodeFromRef.expanded)) {
    319.           return
    320.         }
    322.         if (nodeFromRef.childNodes) {
    323.           for (let idx in nodeFromRef.childNodes) {
    324.             let childNode = nodeFromRef.childNodes[idx]
    325.             this.expandedKeys(childNode, collector)
    326.           }
    327.         }
    328.       }
    329.     }
    330.   }

    选中状态, 展开状态 的持久化和初始化 

    刷新页面的时候 保存选中状态 

    节点展开/收缩的时候 保存展开状态 

    初始化的时候 初始化 选中状态, 展开状态 

    展示效果

    增删改查的演示 

    保存 选中状态, 展开状态 

     

    我们看一下 sessionStorage 中存放的 expandedKeys, chekcedKeys 的数据, 是没有问题的

     刷新之后的状态, 可以看到这里 "后端1" 的状态是没有保存下来的, 这是另外的一个问题 

    这个我们下一个文章 再来讲解, 需要 调试到 element 的代码 

    完

  • 相关阅读:
    红酒：红酒保存的理想温度与湿度
    GBase 8c 备份控制函数（四）
    JavaWeb-三大核心组件（Servlet、Filter、Listener）
    26. 删除有序数组中的重复项-遍历数组
    【软件安装】服务器(docker) 安装 jupyter
    【数据结构】链表C语言编写的，它定义了一个链表，并实现了一些基本的链表操作，如创建新节点、插入节点、清空链表、输出链表以及查找节点
    Spring Cloud 系列：Seata 中TCC模式具体实现
    工厂模式相关总结和使用
    ASEMI快恢复二极管ES8JC参数，ES8JC规格，ES8JC封装
    机器学习基础：奇异值分解（SVD）
  • 原文地址：https://blog.csdn.net/u011039332/article/details/126876149