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！