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！