vue element ui 的tree組件，選中節(jié)點并實時顯示

1. element ui的數(shù)組件，需要實現(xiàn)的功能是，選中節(jié)點，點擊“預覽”按鈕，在右側(cè)顯示葉子節(jié)點的信息
2. 使用的getCheckedNodes()方法獲得選中節(jié)點，然后把節(jié)點存在一個變量里，遍歷節(jié)點，只留下葉子節(jié)點的名稱，在右側(cè)展示

3.目前存在的問題， 第一次選中2個節(jié)點，點擊預覽，沒有問題，顯示2行信息
第二次再選中2個節(jié)點，點擊預覽，顯示了6行，即第一次點擊按鈕時生成的html和第二次生成的四個html都在頁面上，這樣之后再選會再次疊加，怎么點擊預覽時強制清空一下右側(cè)的內(nèi)容，然后重新生成新數(shù)據(jù)
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)
    },