2023年6月22日发(作者：)

el-tree修改、（删除）节点后，不刷新整颗树，局部刷新⽗节点1.需求这⾥有个需求就是我要修改⼦节点。修改之后⼜不能刷新整棵树，要记录当前点击的节点，如果刷新了就记不住了，想记录会⽐较⿇烦，⼀般的都是不会刷新整棵树，局部刷新我这⾥的需求是点击这棵树的时候发送请求获取他的⼦节点，把⼦节点添加进去，在template中

⾃动展开哪项 > {{ }} {{ }} {{ }} 在data中：data () { return { defaultShowNodes: [] }}在methods中：handleNodeClick (data, node) { let _this = this _ = data _('xxx/xxx/xxx', {params: params}).then(function (res) { if ( === '0') { // _this.$refs['menuTree'].setCurrentKey(); // en = [] let tree = //

如果已经存在则不添加进去，不存在就添加⼦节点 h(item => { for (let index in en) { if (ode === en[index].classCode) { //

如果已经存在就先删除这个⼦节点，在append新的这个⼦节点进去，达到局部刷新的效果，这有个缺点就是如果⼀直⼀直⼀直点的话就会看到节点被删除掉⼜被添加上去了，这个需要优化，正常看来是没问题的，先放着，以后看还有更好的解决⽅法没有 _this.$(en[index]) // (idnex, 1)

解决不了问题 _this.$(item, data); return false; } } //

如果不存在直接添加 _this.$(item, data); //

保存当前展开的节点 let flag = false _(item => { if (item === ode) { //

判断当前节点是否存在，

存在不做处理 flag = true return true } }) if (!flag) { //

不存在则存到数组⾥ _(ode) } }) } }).catch(function () { }); _yTableData() }, 上⾯优化了⼀下，我不做删除操作，这样影响⽤户体验。还有个办法达到刷新效果。⽐如我们的需求是点击⽗节点获取⼦节点，会调⽤接⼝，这个就好办⼀些了， 1.我获取当前修改、删除的节点： let node = this.$e(data) // data放当前的data对象 2.获取他的⽗级节点，并判断他的⽗级节点是数组还是对象，如果是数组，证明就是第⼀层，如果是对象，证明上⾯还有⼀层 if (uctor === Array) { //

是数组，最外⾯的，第⼀层做什么操作啦 } else if (uctor === Object) { //

如果是对象就点击⽗级，重新发送接⼝，达到局部更新的效果 NodeClick() //

点击他的⽗级节点 this.$rentNode() //

选中、⾼亮⽗级节点。 this.$(data) //

删掉刚刚那条数据，否则会出现修改之前和修改之后的数据 } 获取祖⽗节点、就是⽗亲的⽗亲：还有⼀种⽅法就是，不是点击⽗级节点调⽤接⼝的，这种⽅法调不调接⼝都适⽤，let node = this.$e(data) // data放当前的data对象在⾥⾯有个children[]还是childrenNodes[]的数组en[]打印看下就成如果数据是有唯⼀id标识不重复的数据。找到children[]⾥⾯操作的数据，把当前操作的数据替换掉即可，删除就删掉，修改就替换掉假如我修改了如下图的第⼆级菜单，那么我就把当前操作的这条表单数据替换掉之前children[]数组⾥⾯的数据。如果没有唯⼀标识获取数组重复，那就在操作这条数据之前先给个状态值，⽐如：c = '办公耗材类'g = true //

要替换的状态值，加在⽼数据上，我点击某条数据进⾏操作时，就在那⾥加上此状态.....修改之后，对children[]进⾏循环。找到有h(item => { if (g) { //

如果数据中有这个状态值，就把表单对象数据替换这条数据 item = obj //

假设obj是操作成功后的表单对象数据 }})2.第⼆个⼩问题如果想清掉当前选择的节点和⾼亮状态，直接this.$rentNode(’’)就可以了