場景還原

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

寫了一個demo，來還原一下bug出現(xiàn)的場景：

<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傳遞給組件使用。

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

解決方法

（1）給el-table加上一個 :key=tableKeyValue

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

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

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

出現(xiàn)原因

這就得先說說，Vue的渲染機制：虛擬DOM+diff算法

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

因為表格的DOM沒有變化，數(shù)據(jù)改變后，修改后的DOM與原來的DOM一致，無法重新渲染表格。雖然我們能打印出數(shù)據(jù)的變化，但是無法將數(shù)據(jù)傳入組件。

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

似乎也可以將key值，加在引入組件的單元格上，沒有真正寫過，下次遇到這類問題可以試試

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

最新評論