【求助】vue element 数据表格中使用搜索遇到的问题

Question

补充：
大家可能看不明白，我在重新描述下

页面是：用户列表页面

几个数据获取的地方是这样的：
1、打开页面时,mounted生命周期时，请求获取用户列表数据

mounted() {
    this.getTableDate();
}

2、getTableDate方法获取用户列表数据后，赋值给tableData，el-table组件去渲染tableData中的数据
3、需要用到搜索功能，搜索某个用户时，onSearch方法获取用户列表数据后，也是赋值给tableData，el-table组件去渲染tableData中的数据

遇到的问题：
1、我点搜索后，对搜索出来的某个用户进行编辑并保存，就会触发getTableDate方法，导致搜索结果变成了默认的用户列表数据了
2、如果编辑并保存，去触发onSearch方法的话，会导致（没有点击搜索的情况下）编辑用户后，也是触发onSearch方法，因为子组件编辑用户后调用都是同一个方法来重新刷新页面上的列表数据。

附上动图：

求助：搜索后结果进行编辑并保存，如何能避免重新刷新搜索后的结果？

---

问题描述：
1、数据表格中使用搜索，因为默认列表数据和搜索出来的数据都是赋值到tableData中去；
2、默认列表数据和搜索出来的数据都会有编辑功能
3、现在的问题是搜索出来的数据编辑后，数据列表就会刷新默认的列表数据
4、请问该如何解决，能把搜索出来的数据，编辑保存后，数据列表就会刷新搜索条件的数据

---

怕问题描述的不清楚，附上图片

图1：默认列表数据

---

图2：搜索后的列表数据

---

最后附上代码：

视图层代码：

<template>
  <div class="app-main">
    <div class="search">
      <el-form :inline="true" :model="searchParam" class="demo-form-inline" size="mini">
        <el-form-item label="姓名">
          <el-input v-model="searchParam.name" placeholder="请输入姓名"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSearch">查询</el-button>
        </el-form-item>
      </el-form>
    </div>

    <div class="table">
      <el-table
        :data="tableData"
        stripe
        v-loading="common.loading"
        :header-cell-style="{background:'#eef1f6',color:'#606266'}"
      >
        <el-table-column fixed prop="id" label="ID" width="60" sortable></el-table-column>
        <el-table-column prop="name" label="姓名" width="100" sortable></el-table-column>
        <el-table-column label="操作" width="150">
          <template slot-scope="scope">
            <el-button size="mini" type="primary" @click="onEdit(scope.row.id)">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

  </div>
</template>

data代码：

    searchParam: {
        name: "",
        mobile:""
      },
      tableData: [], //数据
      //分页
      page: {
        currentPage: 1, //默认当前页为第一页
        total: 0, //数据总数
        pageSize: 10 // 每页的数据条数
      },
      state: {
        editVisible: false //修改组件状态
      },
      common: {
        loading: false, //表格loading动画
        editID: 0
      }

函数代码：

//编辑
    onEdit(id) {
      this.state.editVisible = true;
      this.common.editID = id;
    },
    //搜索
    onSearch() {
      var $vm = this;

      $vm.common.loading = true;

      var paramsData = {
        page: this.page.currentPage,
        limit: this.page.pageSize,
        name: this.searchParam.name,
      };

      this.$get("/user/user_search", paramsData).then(res => {
        if (res.status == 1) {
          $vm.tableData = res.results;
          $vm.page.total = res.total;
          //关闭loading
          $vm.common.loading = false;
        }
      });
    },
    //获取表格数据
    getTableDate() {
      var $vm = this;

      $vm.common.loading = true;

      var paramsData = {
        page: this.page.currentPage,
        limit: this.page.pageSize
      };

      this.$get("/user/user", paramsData).then(res => {
        if (res.status == 1) {
          $vm.tableData = res.results;
          $vm.page.total = res.total;
          //关闭loading
          $vm.common.loading = false;
        }
      });
    },
    //分页组件：改变当前页
    onCurrentChange(currentPage) {
      this.page.currentPage = currentPage;
      this.getTableDate();
    },
    //分页组件：改变条数
    onSizeChange(pageSize) {
      this.page.pageSize = pageSize;
      this.getTableDate();
    }
  },
  components: {
    "edit-dialog": Edit
  },
  mounted() {
    this.getTableDate();
  },

Answer 1

你在编辑完保存的时候，判断input是否输入筛选内容然后再去相对应的使用不同的接口？

Answer 2

不好意思 我努力地读了两遍 还是没明白
1: 你遇到什么问题了?
2: 想要什么效果?

Answer 3

1. 编辑保存后不就调修改接口把数据保存了下来吗、再调一遍获取数据的接口，数据就更新了呗。
2. 不想这么做，就记下被修改数据的id和修改后的结果，再去默认数据里遍历，找到这个id的数据，进行修改。

Answer 4

谢邀，刚才看了两遍你得描述，其实还是感觉有点没有理解你得需求。。
我大概说一说我觉得你遇到的问题和解决办法

• 我看了你得动图和你的两张截图，截图里边说是点击编辑之后就会刷新页面，但是在你的动图里边我并没有看到刷新，我看到的是你点击确定之后，页面明显有一个刷新的过程
• 然后我看了你得描述是会触发一个getTableDate方法，然后我看了下，这个方法里边的请求参数只有分页和条数 没有查询条件，也就是没有带着搜索框里边的查询条件过去，所以说页面变成了默认数据，建议你可以再执行的方法里边打印一下传参

如果有说的不对的，请留言我

Answer 5

拉取列表数据的接口和搜索的接口应该是同一个，只是查询的条件（参数）改变