elementui的table表格数据不变化原因

在这里插入图片描述
项目需求是输入某值,去后端获取新值,计算出表格右边两列。使用elementui的表格组件,发现数据更新没有响应,即使用了计算属性。解决方法如下:

1、首先页面初始化的时候,增加上右边两列的键名。只是滞空而已(例如我的项目就是steam_4滞空)
2、在表格上绑定Key属性 (其他属性自己看情况加)

<el-table :data="tableData" :key="tableData.steam_4">
        <el-table-column align="head" width="150"> </el-table-column>
</el-table>

3、在input组件上绑定点击事件,点击后更新tableData的值,使用this.$set让数据变为响应式,可以直接触发页面更新

search() {
    
    
      axios({
    
    
        url: "https:xxxxx",
        methods: "get"
      }).then((res) => {
    
    
        this.$set(res.data)
      })
    }

猜你喜欢

转载自blog.csdn.net/qq_44718932/article/details/126430912