VUE中通过改变key去更新局部dom

在使用Elemen-UI中el-select时

代码如下↓

1 2 3 4 5 6 7 8 9 10 11 12 13

<!-- 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

1 2 3

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

　　在vue的机制里当key变化时dom会被刷新，问题也就解决了

good！