Vue+ElementUI el-table增删带确认时视图不刷新如何解决

你遇到的视图不刷新问题完全是写法不符合Vue响应式规则导致的，核心错误有3个：

• 直接修改计算属性返回值：displayData是computed派生的临时结果，本质是只读的派生状态，你对它做splice修改时，没有改动上游的原始响应式数据源this.data，计算属性的依赖没有发生变化，自然不会自动重算更新。之前偶尔能生效只是刚好触发了其他响应式逻辑连带重渲染，不是代码逻辑正确。
• 计算属性内部写副作用：你在displayData计算过程中给this.filtered、this.total外部变量赋值，违反了computed必须为纯函数的要求，会导致依赖追踪混乱，更新时机完全不可控。
• 索引定位错误：你在分页后的displayData里取索引，就算改对了数据源，用这个索引操作原始数组也会定位到错误行。

之前去掉确认弹窗能正常运行，是因为同步代码执行时刚好在同一更新周期连带触发了重渲染，而$confirm是异步微任务，回调执行时没有触发正确的响应式依赖更新，才会出现必须点击其他行碰运气触发重渲染的现象。

所有增删改操作只允许修改原始响应式数据源，不要碰computed返回的结果，computed会自动依赖上游数据变化重算，视图会自动实时刷新。

第一步：重构计算属性，移除所有副作用 #

把过滤、排序、分页、总数统计拆成独立的纯计算逻辑，计算过程中不修改任何外部变量，排序/切片前先浅拷贝数组，避免污染原始数据：

computed: {
  // 过滤后的数据
  filteredData() {
    if (!this.search) return this.data
    return this.data.filter(item => {
      return this.searchBy.some(key => {
        return item[key]
          .toString()
          .toLowerCase()
          .includes(this.search.toLowerCase())
      })
    })
  },
  // 数据总数
  total() {
    return this.filteredData.length
  },
  // 排序后的数据
  sortedData() {
    // 浅拷贝后再排序，不改动原始数组顺序
    const list = [...this.filteredData]
    if (this.order === "+name") {
      return list.sort((a, b) => a.name.localeCompare(b.name))
    }
    if (this.order === "-name") {
      return list.sort((a, b) => -1 * a.name.localeCompare(b.name))
    }
    return list
  },
  // 最终分页展示的数据
  displayData() {
    const start = this.perPage * (this.currentPage - 1)
    const end = start + this.perPage
    return this.sortedData.slice(start, end)
  }
}

第二步：修正增删改方法，只操作原始数据源 #

不要在displayData里找索引、做修改，所有操作直接针对原始数据源this.data，用Vue可监听的方式修改：

methods: {
  handleUpdate(row) {
    this.temp = { ...row } // 浅拷贝行数据作为临时编辑对象
    this.dialogStatus = "update"
    this.dialogFormVisible = true
    this.$nextTick(() => {
      this.$refs["dataForm"].clearValidate()
    })
  },
  updateData() {
    this.$refs["dataForm"].validate((valid) => {
      if (!valid) return
      // 从原始数据源中匹配要修改的行
      const index = this.data.findIndex(v => v.code === this.temp.code)
      if (index !== -1) {
        // 用$set确保响应式更新
        this.$set(this.data, index, { ...this.temp })
      }
      this.dialogFormVisible = false
      this.$notify({
        title: "Success",
        message: "Update Successfully",
        type: "success",
        duration: 1000,
      })
      // 自动处理删改后当前页无数据的分页跳转
      const maxPage = Math.ceil(this.total / this.perPage)
      if (this.currentPage > maxPage && maxPage > 0) {
        this.currentPage = maxPage
      }
    })
  },
  handleDelete(row) {
    this.$confirm(`Are you sure to delete ${row.name}?`, {}).then(() => {
      // 从原始数据源中匹配要删除的行
      const index = this.data.findIndex(v => v.code === row.code)
      if (index !== -1) {
        this.data.splice(index, 1)
      }
      this.$notify({
        title: "Success",
        message: "Delete Successfully",
        type: "success",
        duration: 1000,
      })
      // 自动处理删完后当前页无数据的分页跳转
      const maxPage = Math.ceil(this.total / this.perPage)
      if (this.currentPage > maxPage && maxPage > 0) {
        this.currentPage = maxPage
      }
    })
  }
}

改完后只要原始数据、搜索关键词、排序规则、分页参数任意一个依赖变化，computed会自动重算，表格不需要额外点击就会实时刷新，保留确认弹窗也不会影响更新逻辑。

内容的提问来源于stack exchange，提问作者user19503260