element ui table cell-style 动态变化单元格样式不稳定

Question

问题描述

使用element ui table cell-style 动态变化单元格样式不稳定, 代码如下。

input改变，v-model的值随之改变，对应的样式变化，背景色改变。但我的问题是需要打开下f12才能看到变化的结果，然后多试几个单元格，有时会直接变化，有时又不会，又得开下f12。 求解。

问题主要在于我修改input内值后，有时会触发finalCellStyle:function，有时不会。无语。

同时，我另外一个table却没这个问题，两者不同在于el-input-number => el-select

问题出现的环境背景及自己尝试过哪些方法

单元格内

相关代码

// 请把代码文本粘贴到下方（请勿用图片代替代码）

<el-table :data="data" :cell-style="finalCellStyle">

<el-table-column prop="value" label="调整值" align="center">
    <template slot-scope="scope"> 
      <el-input-number  v-model="scope.row['value']" ></el-input-number>
    </template>
  </el-table-column>

finalCellStyle:function({row, column, rowIndex, columnIndex}){
  if (row['value'] != row['valueInit']) {
        return {
            background: '#f7b1b180'
        }
    }else{
      return {
            background: ''
        }
    } 
},

你期待的结果是什么？实际看到的错误信息又是什么？

**

**

Answer 1

当数据层次太多，就会出现没有触发render函数进行自动更新的情况（有下一步操作才会更新，比如按f12、修改另一个input的值），当你改变了el-input的值后可以执行这个：（参考https://blog.csdn.net/xiasohu...）

this.$forceUpdate();//对象层次过多时，VUE没有触发render函数进行自动更新，需要手动强制更新

另外附上自己写的一个例子：利用el-table的cell-style属性实现动态修改表格的值，其单元格样式随之动态变化。

<el-table
                    :data="testCases"
                    stripe
                    border
                    size="small"
                    row-key="id"
                    :max-height="maxHeight"
                    @selection-change="selectionChange"
                    @filter-change="filterChange"
                    :cell-style="cellStyle"
                    ref="table">
               <el-table-column
                        show-overflow-tooltip
                        width="100"
                        label="测试结果"
                        prop="testResult"
                        sortable>
                    <template slot-scope="scope">
                        <input class="custom_input" v-if="scope.row.id===idFocused" v-model="scope.row.testResult"
                               @blur="idFocused=''" @keyup.enter="idFocused = ''">
                        <span v-else>{{scope.row.testResult}}</span>
                    </template>
                </el-table-column>

 cellStyle({row, column, rowIndex, columnIndex}) {//根据测试结果动态调整单元格样式，成功-绿色，失败-红色，不支持-黄色
                let cellStyle;
                switch (row.testResult) {
                    case '成功':
                        cellStyle = 'background: green;color:white';
                        break;
                    case '失败':
                        cellStyle = 'background: red;color:white';
                        break;
                    case '不支持':
                        cellStyle = 'background: #aaa;color:white';
                        break;
                    default:
                        cellStyle = '';
                }
                if (column.label == '测试结果')
                    return cellStyle;
            }

实现效果：(点击手动输入测试结果，用户可以输入成功、失败等结果，输入完成后样式随之变化)