el-table ，数据更新，但是里面的 el-table-column 下的template，无法更新

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];

最终结果如下图：

标签：el,redata,...,listData,更新,视图,数组,table
来源： https://www.cnblogs.com/moguzi12345/p/14087079.html