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

1、如图所示,数据已经更新,但是视图没有改变:

数据如下:

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

视图如下:

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

解决方法:

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-table ,数据更新,但是里面的 el-table-column 下的template,无法更新

 

上一篇:vue 指定数据后插一条广告数据


下一篇:Android 原生的跑马灯 MarqueeTextView