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

Z时代
2024-01-10
分类：技术分享

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

页面是：用户列表页面

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

mounted() {
this.getTableDate();}

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

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

附上动图：
【Vue】【求助】vue element 数据表格中使用搜索遇到的问题

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

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

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

图1：默认列表数据
【Vue】【求助】vue element 数据表格中使用搜索遇到的问题

图2：搜索后的列表数据
【Vue】【求助】vue element 数据表格中使用搜索遇到的问题

最后附上代码：

视图层代码：

<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();},