vue如何获取tree当前选中的节点,vue element ui 的tree组件，选中节点并实时显示

element ui的数组件，需要实现的功能是，选中节点，点击“预览”按钮，在右侧显示叶子节点的信息

使用的getCheckedNodes()方法获得选中节点，然后把节点存在一个变量里，遍历节点，只留下叶子节点的名称，在右侧展示

3.目前存在的问题， 第一次选中2个节点，点击预览，没有问题，显示2行信息

第二次再选中2个节点，点击预览，显示了6行，即第一次点击按钮时生成的html和第二次生成的四个html都在页面上，这样之后再选会再次叠加，怎么点击预览时强制清空一下右侧的内容，然后重新生成新数据

checkedNodes 和 leafCheckedNodes预先在data中定义了

html:

预览指标

{{modelName}}

{{index+1}}. {{item.indexName}}

部分js:

getCheckedNodes() {

this.checkedNodes = this.$refs.tree.getCheckedNodes()

},

preSystem(){

// this.checkedNodes = ''

this.getCheckedNodes()

this.placetext = false

// console.log(this.checkedNodes)

for(let i=0;i< this.checkedNodes.length; i++){

if(!this.checkedNodes[i].children || this.checkedNodes[i].children ==''){

this.leafCheckedNodes.push(this.checkedNodes[i])

}

}

console.log(this.leafCheckedNodes)

},