1、如图所示,数据已经更新,但是视图没有改变:
数据如下:
视图如下:
解决方法:
1、
<el-select v-model="items.currency" placeholder="请选择币种" class="selecet_1" size="mini" @change="cuchange(scope.row, index, items, indexes)" style="width: 90%;margin-top: 5px;text-align: center;"> <el-option value="">--请选择--</el-option> <el-option v-for="item in currency" :key="item.firstValue" :label="item.name" :value="item.firstValue"> </el-option> </el-select>
2、选择币种事件:
cuchange(item, index, items, indexes) { this.$forceUpdate(); let redata = this.listData; //方法二,定义一个空数组,赋值,listData 为页面 table 展示的数组 this.listData = [...redata]; //方法二,数组拷贝、赋值 this.random = Math.random(); //给表格添加随机数,以更新表格内容,详情见方法一 },
方法一:在表头中,添加 :key="Math.random()",使其做出改变,即可达到内容更新
此缺点为:表格每更新一次,页面会回到顶部
<el-table :data="listData" :key="random" :span-method="objectSpanMethod" class="tableArea" style="width: 100%" :header-cell-style="{background:'#F0F2F5',color:'#585858',textAlign: 'center',fontSize: '12px'}" > </el-table>
3、方法二:假设结果数组为 :this.listData, 那么,使用 ... 数组转化,也可更新视图
对象中的扩展运算符(...)用于取出参数对象中的所有可遍历属性,拷贝到当前对象之中
this.$forceUpdate(); let redata = this.listData; this.listData = [...redata];
最终结果如下图: