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

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

3.目前存在的問(wèn)題， 第一次選中2個(gè)節(jié)點(diǎn)，點(diǎn)擊預(yù)覽，沒(méi)有問(wèn)題，顯示2行信息
第二次再選中2個(gè)節(jié)點(diǎn)，點(diǎn)擊預(yù)覽，顯示了6行，即第一次點(diǎn)擊按鈕時(shí)生成的html和第二次生成的四個(gè)html都在頁(yè)面上，這樣之后再選會(huì)再次疊加，怎么點(diǎn)擊預(yù)覽時(shí)強(qiáng)制清空一下右側(cè)的內(nèi)容，然后重新生成新數(shù)據(jù)
checkedNodes 和 leafCheckedNodes預(yù)先在data中定義了



html:

<div class="new-container">
           <div class="placetext" v-show="placetext">
             預(yù)覽指標(biāo)
           </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)
    },