elementUi el-table添加，修改页面不刷新。this.$set简单用法

最新推荐文章于 2024-07-24 15:35:51 发布

lbchenxy

最新推荐文章于 2024-07-24 15:35:51 发布

阅读量8k

点赞数

分类专栏： elementUI 文章标签： elementUi el-table页面不更新 vue for 和 foreach

本文链接：https://blog.csdn.net/lbchenxy/article/details/108286094

版权

本文介绍了在使用ElementUI的el-table组件时遇到的数据添加和删除导致页面不更新的问题，以及解决方案。问题包括：1) 添加数据时页面未实时更新；2) 增加的数据总是与新增行相邻的数据相同。原因分析为数组赋值无法触发Vue的响应式更新。解决方法是利用this.$set方法确保数据更新，并修正循环逻辑以避免数据重复。

摘要由CSDN通过智能技术生成

项目场景：

elementUI
在这里插入图片描述
描述：点击+在对应的下一行增加一个空行，点击-删除当前行。看起来so eazy，实际情况相反，也可能是我的技术能力有限。主要遇到了2个问题

问题描述：

1.删除很简单实现了，增加的时候出现添加的数据更新，但是页面不更新的情况；
2.增加的时候增加的数据总是重复我点加号的下一行数据。
3.关于el-table不更新有的帖子说增加：key，实际没有作用，下边我将有问题的和解决后的代码提供给大家

原因分析：

1.页面不更新，el-table绑定的是数组，数组直接赋值不能被 Object.defineProperty 检测到,所以我们采用this.$set方法强制进行数据的更新操作
2.增加的数据总是跟+的下一行重复，说明可能是我们的循环写的不对

解决方案：

html没啥好说的

 <el-table
            :data="formdata.FAMILYJSON"
            style="width: 100%"
            align="center"
            :key="Math.random()"
          >
            <el-table-column label="姓名">
              <template slot-scope="scope"
                ><el-input
                  v-model="scope.row.NAME"
                  :maxlength="20"
                  :disabled="!editable"
                ></el-input
              ></template>
            </el-table-column>
            <el-table-column label="与本人关系">
              <template slot-scope="scope"
                ><el-select
                  v-model="scope.row.RELATION"
                  filterable
                  :clearable="editable"
                  :disabled="!editable"
                  :readonly="!editable"
                  placeholder="请选择与本人关系"
                >
                  <el-option
                    v-for="item in dicts.RELATIONTYPE"
                    :key="item.NODECODE"
                    :label="item.NODEDESC"
                    :value="item.NODECODE"