vue element ui 的tree组件，选中节点并实时显示

Question

1. element ui的数组件，需要实现的功能是，选中节点，点击“预览”按钮，在右侧显示叶子节点的信息
2. 使用的getCheckedNodes()方法获得选中节点，然后把节点存在一个变量里，遍历节点，只留下叶子节点的名称，在右侧展示

3.目前存在的问题， 第一次选中2个节点，点击预览，没有问题，显示2行信息
第二次再选中2个节点，点击预览，显示了6行，即第一次点击按钮时生成的html和第二次生成的四个html都在页面上，这样之后再选会再次叠加，怎么点击预览时强制清空一下右侧的内容，然后重新生成新数据
checkedNodes 和 leafCheckedNodes预先在data中定义了



html:

<div class="new-container">
           <div class="placetext" v-show="placetext">
             预览指标
           </div>
           <h2>{{modelName}}</h2>
           <div class="new-wrapper">
              <div class="new-item" v-for="(item, index) in leafCheckedNodes">
              {{index+1}}. {{item.indexName}}
              </div>
           </div>
         </div>

部分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)
    },

Answer 1

preSystem(){

 this.leafCheckedNodes = []
 ...
}

每次执行的时候清空就好了