快捷導(dǎo)航

Vue el-table表頭上引入組件不能實(shí)時(shí)傳參解決方法分析

更新時(shí)間：2022年11月30日 09:33:46 作者：@樂(lè)知者@

這篇文章主要介紹了Vue el-table表頭上引入組件不能實(shí)時(shí)傳參解決方法，總的來(lái)說(shuō)這并不是一道難題，那為什么要拿出這道題介紹？拿出這道題真正想要傳達(dá)的是解題的思路，以及不斷優(yōu)化探尋最優(yōu)解的過(guò)程。希望通過(guò)這道題能給你帶來(lái)一種解題優(yōu)化的思路

場(chǎng)景還原

產(chǎn)品要求：點(diǎn)擊表格的表頭，能觸發(fā)一個(gè)下拉的列表，列表能攜帶表格的篩選條件，獲取相應(yīng)的數(shù)據(jù)

寫(xiě)了一個(gè)demo，來(lái)還原一下bug出現(xiàn)的場(chǎng)景：

<div id="demo">
  <el-table
    :data="tableData"
    style="width: 100%"
  >
    <el-table-column
      prop="date"
      label="日期"
      width="180"
    ></el-table-column>
    <el-table-column
      prop="address"
      label="地址"
      width="180"
    >
      <template slot="header">
        <city-component
          :params="paramsData"
        ></city-component>
      </template>
    </el-table-column>
  </el-table>
</div>

data: {
        tableData: [], // 表格數(shù)據(jù)
        paramsData: {} // 傳遞給組件的數(shù)據(jù)
    },
    methods: {
      // 改變paramsData函數(shù)
      changeParamsDataFn() {
        this.paramsData = date.now().getTime();
      }
    }

在el-table表格的表頭中，引入組件 city-component，需要將數(shù)據(jù)paramsData傳遞給組件使用。

第一次進(jìn)入頁(yè)面時(shí)，paramsData第一次被初始化賦值，DOM渲染el-table完成后，是可以正常使用；但若是需要更改paramsData的值，并且同步傳遞給city-component組件使用時(shí)，打印paramsData的值，是可以看到改值的變化，但是組件卻無(wú)法接受到變化后的paramsData的值

解決方法

（1）給el-table加上一個(gè) :key=tableKeyValue

（2）在改變paramsData后，改變 tableKeyValue的值

<el-table
   :key="tableKeyValue"          
>
<!-- 其他跟上面一致 -->
</el-table>

methods: {
    changeParamsDataFn() {
        this.tableKeyValue = "city" + date.noe();
    }
}

出現(xiàn)原因

這就得先說(shuō)說(shuō)，Vue的渲染機(jī)制：虛擬DOM+diff算法

根據(jù)初始DOM生成舊虛擬DOM；所以使用虛擬DOM的缺點(diǎn)之一便是第一次打開(kāi)頁(yè)面，需要更多的時(shí)間
當(dāng)有了修改數(shù)據(jù)的操作時(shí)，便會(huì)生成新的DOM樹(shù)
diff算法就會(huì)比較新/舊DOM樹(shù)，找出變更的DOM
將改動(dòng)的DOM，渲染成真實(shí)的DOM；有個(gè)優(yōu)點(diǎn)便是，每次變更DOM，不需要從頭到尾查詢每一個(gè)DOM，只需要找出變更的地方就可

因?yàn)楸砀竦腄OM沒(méi)有變化，數(shù)據(jù)改變后，修改后的DOM與原來(lái)的DOM一致，無(wú)法重新渲染表格。雖然我們能打印出數(shù)據(jù)的變化，但是無(wú)法將數(shù)據(jù)傳入組件。

加上key值，是為了數(shù)據(jù)改變的同時(shí)，改變table的key值，diff算法就能找出前后表格DOM的不同，就能重新渲染表格，重新把值傳入組件

似乎也可以將key值，加在引入組件的單元格上，沒(méi)有真正寫(xiě)過(guò)，下次遇到這類(lèi)問(wèn)題可以試試

到此這篇關(guān)于Vue el-table表頭上引入組件不能實(shí)時(shí)傳參解決方法分析的文章就介紹到這了,更多相關(guān)Vue el-table引入組件實(shí)時(shí)傳參內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: