el-dialog每次重新打開展示不同的內容，滾動條未重新置頂的解決方案。

環境

nuxt3 + vu3 + element-plus-2.3.3

復現原因

假設有5條內容，打開一項內容通過el-dialog進行展示，當出現滾動條後，往下滑動，緊接着通過esc或遮罩進行關閉，打開另一項內容，這時候滾動條並未進行置頂。

解決方法

參考就行了。

js部分

const data = reactive({
  newsDialog: {
    show: false,
    currentNews: null,
  }
})

const refNewsDialog = ref(null);
watchEffect( ()=> {
  if(data.newsDialog.currentNews !== null){
    console.log("打開對話框", data.newsDialog.currentNews)
    data.newsDialog.show = true;
    nextTick(() => {
      // 滾動條重置
      ==refNewsDialog.value.dialogContentRef.$el.parentElement.scroll(0,0);==
    })
  }
})

模板部分

    <client-only>
      <el-dialog
          destroy-on-close ref="refNewsDialog" v-model="data.newsDialog.show" :show-close="true" @closed="data.newsDialog.currentNews = null" width="80%" class="news-dialog">
        <template #header="{ close, titleId, titleClass }">
          <div class="header">
            <h4 :id="titleId" :class="titleClass" v-text="data.newsDialog.currentNews.title"></h4>
          </div>
        </template>
        <div class="news-content" v-html="data.newsDialog.currentNews.content"></div>
      </el-dialog>
    </client-only>

總結

vue3因爲對組件有更精細的控制暴露出的對象信息，這導致了element-plus2版本暴露出的有用對象太少了。真是太難了。