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

joeyFuck
  • 42

问题描述

使用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: ''
        }
    } 
},

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

**
clipboard.png
**

clipboard.png

回复
阅读 17.6k
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;
            }

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

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏