VUE中通過改變key去更新局部dom

在使用Elemen-UI中el-select時

代碼如下↓

<!-- selected -->
<el-select
    v-if="item.columnType === 'selected'"
    :key="updates"
    v-model="scope.row[Object.keys(item)[0]]"
    placeholder="請選擇">
    <el-option
        v-for="v in selectData[Object.keys(item)[0]]"
        :key="v.value"
        :label="v.name"
        :value="v.value">
    </el-option>
</el-select>

　　因為項目需求這是嵌套在表格里的動態渲染的組件，option也是動態的，當<el-option>中的for循環selectData[Object.keys(item)[0]]賦上值之后，點擊下拉並不會出現選項

其實已經有值了，但是dom沒更新，所以下拉框就沒有值

這個時候，我在el-select上加了個key並給個初始值updates，當我給<el-option>中的for循環selectData[Object.keys(item)[0]]賦上值之后，改變updates的值，這時候vue就會去更新dom

this.selectData[item.columnName] = res;
 // 強制刷新select下拉dom
this.updates = this.updates++;

　　在vue的機制里當key變化時dom會被刷新，問題也就解決了

good！