el-tree 树形结构 怎么添加下级菜单??-灵析社区

PunkMaccccc

element中el-tree组件,无限制增加下级菜单 为避免一次性请求接口返回数据太多,每次请求接口只能返回该层下一级数据,不会返回下级多层数据 {{ node.label }} 添加 Delete export default { data() { return { defaultProps: { children: 'sub_point_list', label: 'name', isLeaf: (data) => data.has_child === 0 }, } }, methods: { //添加下级菜单 append(data) { console.log('data', data) this.$set(data, 'sub_point_list', []) const newChild = { id: id++, name: 'testtest', isEgdit: true, sub_point_list: [] } if (!data.sub_point_list) { data.sub_point_list = [] } data.sub_point_list.push(newChild) // 强制更新视图 this.$forceUpdate(); // 展开当前节点 node.expand(); this.$nextTick(() => { this.$refs.inputVal.focus(); }) // this.dataSource = [...this.dataSource] }, } } 当有下级菜单时,点击箭头展开下级菜单,在点击添加按钮,能正常显示输入框添加菜单 如下图 ![1.jpg](https://wmprod.oss-cn-shanghai.aliyuncs.com/c/user/20240919/86ee0ba562549906e18a13c954521f15.png) 但是没有下级菜单时,即前边没有小箭头,点击添加按钮,数据也能打印出来,但是却显示不出来输入框,如下图 这里出错的原因在哪里呢? 还有就是当有数据时,点击添加按钮 怎么能直接展开下级并显示出输入框呢?现在是只有点击前边的小箭头展开下级后再点击添加按钮才能显示输入框,求教 ![2.jpg](https://wmprod.oss-cn-shanghai.aliyuncs.com/c/user/20240919/ed305418c06a4635ed3296f008fd8704.png)

阅读量:156

点赞量:0

问AI
不太清楚你使用的 "element-ui" 还是 "element-plus"。但是原理是类似的,把你当前添加元素节点的 "leaf" 设置为 "false" 就行了。 也就是说在你点击添加按钮的事件上面把对应的 "node" 节点上面的 "isLeaf" 属性调整为 "false"。 "Element Plus Playground" (https://link.segmentfault.com/?enc=9tguw7QEV0xKeBZvnKBDpA%3D%3D.6oCzxcKwLcEw4b6bqH2HhIukBG5bNrfIeAMZ1b4L7Km77Vgh8S0kvfzoq%2BRsikALf1kJ%2BExHv1YXBVsaKCGhHhTOz9G%2BZcqVhgtzlLCevfp07yBb1QjD0O43RDT6BDz1nHjyLvqfIjivVu%2FWdufghD0chp40GUIeBxXsJ%2FXtGLlW3p5rGadR3hkl6KaqMx4Ojwnwn1Gbk5LqRxFxVtlWCqsBpzMBwjFd5UVcjOg7zmCad9JS9UHewbV4ZASGcFM%2Fz8%2FYMJZPIsH1Vv7Kvw1K%2B32cHA2HuFZL8sCSdtgntzBy2GOy1JPhW13vWhkyvaGQzJBpXGiOseBD6HwGoRw9cGEb66WoBLKSRIWZiEVgCbmwwmY0VkN5gfYs5i7xIaUxJB6bWl7u%2F58sdEnV3zwR9pbu8A36gN4E9ZZd0cOtoFAe4a8Txm%2BDTS%2FZv5iXJnSQ1QCFmaqM%2BIS%2Fi57XUN2wLTAzFLSxwn52fO47Mn%2BSs5uGO9FG7gjiSEbh4hq5PSg%2FdmjGCZVkbpI0NeI7N7pwp7Vm%2B1sjJhDjSiSM8VxgYJ3ZI4EwcCWoUUK9odLSl8RP6twybBK0wz41LY96CdOzcq36jbn05mvFGLGH4z%2FZW%2FJIER%2Bq6pwowyKRazh2fvL2RSwc6AdbaB0MigIbMGFlRRkVgqbW1azmZqY85ouLJR37dPLmeYeUhpQ6Q1li5WC2vUdUNHh7DP%2BIr2NfNZ9ubCprLqui4ZO%2BnvOltKLY2PgLC1uwjkM5y6jW0HyWjw6hrf%2B9N8hlE6CgO0HIVR498z2nlsMajOEk4%2FMMo0mA5dmIlvvQCTsFQTBlAC3I3JnSzc8sEV7m6OH1O6r2hM8Gr%2FrbdAbA2CBfdCf2rgBgbh81mlXSejbgtBKBHSpJqr4%2FvIh61D8dAGcrHbfbZSkYXakFTGOjRioWy0QgIomNs9iRgZDCgf3gPJIrZa95jT1%2BoRXBnaLuz2gdC%2FwwZ1TR5I6F4OKVlaOOLQGez7wJjCStP%2BXnldu5QrIb5Bc4Cb%2BYN1fDPwr1khskdHzXiqlhW%2BXrzB%2BobvUPy5GF4zkrvT5YIC1fEf390z4%2FjHiz6RNjjkZJhS13fBnkjoGnkYuHfmp5JzX1MrDmexdpiHJZkd%2FTDBD1A9KrVRWONynR3SqPslbjYX5FGxcQHqKD6zMgGv7tLbKqHctpiylvxNNRzRzONBHb7cbAwmL11TIvFQnSknR099%2BTKWmoJLKSM5ko9kWbVI2yddJ2m25kT11mPe7AxX32TIT0Mq1Tx%2FePQK%2B2%2BnAdZPaK5zSO4CGFuM2zDCOKaI0dLpuuR4wtpHsFzenqAT7MFMQ9%2Ft5HXEzmzGYWZENzs2KQl2z0ijMriC71pOa92etoutSyWl3rUd37NyTb9mjMgsdwTnva%2FYryYz%2FzurOxxHUTv0mKGWn%2FjJAofabHkcOpoqzdbGJlhVRILqvrBDAqgkSWOpEeUnwJG5eJc5icCS9wvQGm63xnPjkkPI%2F%2B2hSXqYB5q3czakXENsBOBBo77AoDvxJzA643pWVsQx%2F4X4VGLda%2FRDVmzw7DB94n7kONkZVVVHNfFvmEvNs50w6CSKapZr2TmMsG9I9sJObHfRqjvnQ2SXgem9hynjTkO50hoOrbO1MKu70cdiwt0GR%2FUofxqz1g8wz%2Bn8bBy%2FDsqoG4BJK1S108aTVQTsPX5nJsDjmbIfe4yqi2eLFjtBBixu08iZDJLZ6UQWt1nK3RRgLjTi2Pk3RhKArjePvrjzWHTbgfSTm8IQY%2FYydl6N0jSXPjrPf%2B3uVZsnK8E8A5Klxgh2f1ubw0T4uhZcSO1T7BNLTnSHQLN1j5wL4Axh%2F7s6MCa3aXwSRUIwVMwVvh6PfKhAl5PqmtQ6yFiUrrRAoa17zm%2FzlU38%2FOLJDS1WwXwp%2F1pCMfNv3juCCm4A77nUgFKnXypgihyz0XxgXBpkQ7NhRuGCpEfjnin8erbkEBhWQbnsdLDa%2Bk5kyJWVkHCVrT1UVEJ8E7h2c5ZVxl%2BjSFMitb3Y9707zl4oyS1b1Kn8hRRSNUrTmlz5VStb5djgHjKDgsO3HIyoVSsVUMKFNhIvhg6XzShU%2FZzljTAVWwxKUPx56eWZQgLCQYMWTCF2MoMiK7qwgc6HoeLNUY4zifZpydoEFeBqOQWAlOtO1nSmLZ6dtM%2BLD1mDHaSUftQYQUdCnPpc%2F%2FH6ZnUUF2ofeUJgZpw521%2BoERoYVf6Jt5RFg8e%2Blk0R4L%2FtnqgyfqJSU9KqnHlCy8UroeCkbp%2BgrNS6m4tvY4yf8lp71LxG3SaI4ETAmSbPuL%2Br5f4p7VhOxwlUc5lQ8FqRIp8KfsMQbJTDddCwxEvxyMTpKbLSgs75DLlS2uzwvaE1A%2BPQLs%2BqA885WzKfRrE5kuPUg7wxZmSaPwV7u89ZK0fKi8oTEBYEoDQzjblJCalE6jlo0j%2FZujcBoaaDExP63WsGPuKbUFp%2FBYJPY0rGcalsJPsyUmL3uxDeFDGDNPnfv7MLmHr9QNr7DpxYlXxaMAkSKirw13%2BFNCFf3XfqIQ3iuh9ZIPKXNei7JFtoqOoVxW6Y9FS1staD7OmPohPAHVZmXrCCVVJ4JX5Xn6RNXfiAfMPz%2BtX8FQQT6DX11B7O5vDAXveBt0ewXFW3TlvQsD2ixOJ16iZrWO8Gf2IbguZcTjfJ8AVKuEUGxcxANNVsMJixhjQyqJkGxp6WY3XjMpUsMk%2BlD8%2FG1PMxxSjtxY75vAikDC2JcAs6VwEtqTIEKgQ%2F6lP4Yr%2B48iDOiozrxrExn83qh7Yht7M7n%2BULRxUUgLS1cTCU%2B0QRC37b%2BnAsl0h8aMd90eHrLZIFx8UEUgm7F1PJiWKJ%2FuC0c5%2FLOY%2FlOJqMISPWRbkztLeB0bb2w4fiVrYMDF7YLrqakxTCNHJpB5pZ996YjsegenY7p7kvCLDRvGcsYZxT9jJclU1bskQ%2BeurubmOJKeaPzjbhAMHoNrFQkdejmK%2FIbmE5srXCI0et4CFWtqJHWIivtdqpBTpz2Dtx364CIXeayaWEC33XgCs2H7X%2FftSAqc6HycekEW04E8g2uDlIXkxWEngXpPm%2FrdkHPDCnC5B00dtdXZeuWzkj8uuIaqwitiOLsVQ3dgl7Z9BA3XJ3n6MQfITQgLF%2FGKEH2ZYew%2FkD68T025R6WfYMmaryKCjuY0MNFPcs7Sjh4HvNL%2BJuhizMFGU9dR5PGANNQRxeQn9hi7LJGDSS9ZUQXb4ekPgu9AywZwKqRc8Rea3xLbmbxKZ%2Fgc3vXsEOqVALwy8UxDOdr5L56ddBaY18dBeJHvWEUK0wNj65q4fwD66Hoouec8uZMpf9N6DbjjrmhifZ4ok2Ylaqz3K%2BXGPXa15iVXMyoAfis23R30j8jjljbdh60QTlt2TCWCJrckUa6igm6G7oBabiq0ZX4y735m3DB7Y3e87XOupZ8E0MuyBZqL4k7pefsCLs8Mp5fPstsomGlkLMoVWz4sDTKT07UZvD0eo7kC1ksTHNAj1OXbGQPbBBOqefcfLZqTAh7AXw6wfYzC8yS63340J%2F%2Fc9SF%2BlLiMtozlCjBIQ%2B6NKvYOS3SjYlur9apWpK6%2FZ018%2BiZZYFfjCDfg7Ku%2B3M5TT7s605hT8UvZOCs%2FeIrLnMPRvTneDoxu5N5PbpDY847h6Kk4WY2B2PF5FeRPJJoFe3XVATxurIEJLE4ZPPO2tMCd0FwUxhTRq7pqIdQVRaKztAdsk6l6itBkBqD1%2F2mM0W9SdlddVEikbuywoHeg1%2BKljjEShCu6zz4%2Fy3CkrBrlb1zL9Pg4C8mrXP%2FK9WTHIySwhK6%2ByIRSh3CKRjDoUg8sHuYoGu9NuVL%2FdZwyQuAYkLKOqf9ALrYl9vuuETPouH%2FcmPovEMJ%2FHMzoKOyV5cTDNlj5r9V16RvkkgYwA5xgMFKqNmIMnQhMiRqibRrTRCbuswZyz%2BbKnoT9ZyMTvDGrv2z%2BXWSVWluBnlo8pzdZaWx9ncvwojYWHqqCFLLfeXihrCpUDFTUXiHErUsX4jwll9RUKRVhDq%2BZyR0vPejnKU%2FrxCxkv%2Bn24OibboJMQIyoSaXJhNmnEDG65KH4QQgUzjyzauaGSdAI6wqxkTFSTMcR39%2BWzHiv07k5Yi5meDlVVDAiTRZX097WSCLzPon%2F1tGF8zTVCzdramvkKRUzuyMDzYK8GIh61ivrOdbuFgtpXrmrngrCBdcetLKGE1XVdp%2F1ePmlhanyGa2DasC6CwTHkYP9l6FYnkoyP%2BhpAIb9EgXL5%2BOVygOczpeN4MyA1i%2FvJdgF7SxvmGAZxzXREy%2Bmk1skGyHR1nXA%2BF2dQX4Oqrd5KWnrr971UY1zI6TCORKTFA1f8sa5gIA8H0sTPDsTYc%2Feq4vjh2MZmP%2BZks4BGrs7JygteuM6yKLeU%2BX%2F%2BaGeGYaKpjIWhRYta%2F2uF6enNt%2FXAWxmWdZ0rNMY1m02uVrsdNm2oSsdHdyhmMSPDwF%2BEKCVwayA%2BHScPC6FrwQPGAU1tziFFHsCZSFwNEv8IK2k7e4QErFr6ZFQswd685RjqjNxgFH3eljZulM8Mk5takM7KawBwgT3sSaK1TcNCpA4%2FxyQwrsI%2FwyPA%2FwqsCuyCNzZI6W%2BbR0ScEiavHqbExvQLK22Rzb4UdY4ntanWEEcj7MOWx2EUAmCCePzymOihaK6%2BNfaHXuKmlKWFTJWPQ31a%2Bfw1%2F%2B7ud8Q%2FBZQK90lhXAAjRK1gq88UTplVIgTIdiL8boFvf6%2B%2FmgoQACcRkkZRvjPk1iwucPFsIjViJ7IfkVw5PAANXi%2FBJSZ6kIXgfdlc%2B8dMZ7hWvnpa7KGRT2WE%2F3Myxn9I2%2F%2FtP6dC91tIP5CqWF8nQPPsHWv6UXf5NFc3GpB4GxxD08AjATDGHNLJ%2Buxoh84sTHOuVb1r4VEqEA%2Bc9Ti5%2FXpe%2Bl0WwvBMo242vn341F2HnJVuyHJj7Jb29VVW%2B%2BhiVOAwR7pASev3OlsHfpNMRsSy%2Byp8vvmMKjjicQsNB70BMRGGkyN3Bh9DTJTI%2FLLmczyZHc%2FOFejL6RTSgjASUAHYTW56u%2BFYCB%2BKYXF8%2FQwqDfphjeonYx4%2BRjeLH%2BbSZjNRhkjsEZ4j9BelKRMLsIkJC4WIeZBIKsTZSc2LdyXY%2FPOqTW1ZVL20mrVGLiOcrMJiYgKT4GOEgs%2F5bAELLjtRH%2F2%2BznFGInMgeMIolKj7dgFr3oXGKCLI3%2F2oeYDtepqE0XtktHP%2BvkfmteYrv9II0EybOAKSPE98MTMvIWbDi6BoRlx4TFZyn2x2X%2Bpvg%3D%3D)