Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

去掉this.$set语法（语法报错），在3.0已废弃，用 proxy 实现双向绑定不会出现不更新的问题 #283

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

去掉this.$set语法（语法报错），在3.0已废弃，用 proxy 实现双向绑定不会出现不更新的问题 #283

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
239 changes: 121 additions & 118 deletions src/views/BaseTable.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,123 +1,123 @@
<template>
<div>
<div class="crumbs">
<el-breadcrumb separator="/">
<el-breadcrumb-item>
<i class="el-icon-lx-cascades"></i> 基础表格
</el-breadcrumb-item>
</el-breadcrumb>
</div>
<div class="container">
<div class="handle-box">
<el-button
type="primary"
icon="el-icon-delete"
class="handle-del mr10"
@click="delAllSelection"
>批量删除</el-button>
<el-select v-model="query.address" placeholder="地址" class="handle-select mr10">
<el-option key="1" label="广东省" value="广东省"></el-option>
<el-option key="2" label="湖南省" value="湖南省"></el-option>
</el-select>
<el-input v-model="query.name" placeholder="用户名" class="handle-input mr10"></el-input>
<el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
</div>
<el-table
:data="tableData"
border
class="table"
ref="multipleTable"
header-cell-class-name="table-header"
@selection-change="handleSelectionChange"
>
<el-table-column type="selection" width="55" align="center"></el-table-column>
<el-table-column prop="id" label="ID" width="55" align="center"></el-table-column>
<el-table-column prop="name" label="用户名"></el-table-column>
<el-table-column label="账户余额">
<template #default="scope">￥{{ scope.row.money }}</template>
</el-table-column>
<el-table-column label="头像(查看大图)" align="center">
<template #default="scope">
<el-image
class="table-td-thumb"
:src="scope.row.thumb"
:preview-src-list="[scope.row.thumb]"
></el-image>
</template>
</el-table-column>
<el-table-column prop="address" label="地址"></el-table-column>
<el-table-column label="状态" align="center">
<template #default="scope">
<el-tag
:type="
scope.row.state === '成功'
? 'success'
: scope.row.state === '失败'
? 'danger'
: ''
"
>{{ scope.row.state }}</el-tag>
</template>
</el-table-column>
<div>
<div class="crumbs">
<el-breadcrumb separator="/">
<el-breadcrumb-item>
<i class="el-icon-lx-cascades"></i> 基础表格
</el-breadcrumb-item>
</el-breadcrumb>
</div>
<div class="container">
<div class="handle-box">
<el-button
type="primary"
icon="el-icon-delete"
class="handle-del mr10"
@click="delAllSelection"
>批量删除</el-button>
<el-select v-model="query.address" placeholder="地址" class="handle-select mr10">
<el-option key="1" label="广东省" value="广东省"></el-option>
<el-option key="2" label="湖南省" value="湖南省"></el-option>
</el-select>
<el-input v-model="query.name" placeholder="用户名" class="handle-input mr10"></el-input>
<el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
</div>
<el-table
:data="tableData"
border
class="table"
ref="multipleTable"
header-cell-class-name="table-header"
@selection-change="handleSelectionChange"
>
<el-table-column type="selection" width="55" align="center"></el-table-column>
<el-table-column prop="id" label="ID" width="55" align="center"></el-table-column>
<el-table-column prop="name" label="用户名"></el-table-column>
<el-table-column label="账户余额">
<template #default="scope">￥{{ scope.row.money }}</template>
</el-table-column>
<el-table-column label="头像(查看大图)" align="center">
<template #default="scope">
<el-image
class="table-td-thumb"
:src="scope.row.thumb"
:preview-src-list="[scope.row.thumb]"
></el-image>
</template>
</el-table-column>
<el-table-column prop="address" label="地址"></el-table-column>
<el-table-column label="状态" align="center">
<template #default="scope">
<el-tag
:type="
scope.row.state === '成功'
? 'success'
: scope.row.state === '失败'
? 'danger'
: ''
"
>{{ scope.row.state }}</el-tag>
</template>
</el-table-column>

<el-table-column prop="date" label="注册时间"></el-table-column>
<el-table-column label="操作" width="180" align="center">
<template #default="scope">
<el-button
type="text"
icon="el-icon-edit"
@click="handleEdit(scope.$index, scope.row)"
>编辑</el-button>
<el-button
type="text"
icon="el-icon-delete"
class="red"
@click="handleDelete(scope.$index, scope.row)"
>删除</el-button>
</template>
</el-table-column>
</el-table>
<div class="pagination">
<el-pagination
background
layout="total, prev, pager, next"
:current-page="query.pageIndex"
:page-size="query.pageSize"
:total="pageTotal"
@current-change="handlePageChange"
></el-pagination>
</div>
</div>
<el-table-column prop="date" label="注册时间"></el-table-column>
<el-table-column label="操作" width="180" align="center">
<template #default="scope">
<el-button
type="text"
icon="el-icon-edit"
@click="handleEdit(scope.$index, scope.row)"
>编辑</el-button>
<el-button
type="text"
icon="el-icon-delete"
class="red"
@click="handleDelete(scope.$index, scope.row)"
>删除</el-button>
</template>
</el-table-column>
</el-table>
<div class="pagination">
<el-pagination
background
layout="total, prev, pager, next"
:current-page="query.pageIndex"
:page-size="query.pageSize"
:total="pageTotal"
@current-change="handlePageChange"
></el-pagination>
</div>
</div>

<!-- 编辑弹出框 -->
<el-dialog title="编辑" v-model="editVisible" width="30%">
<el-form ref="form" :model="form" label-width="70px">
<el-form-item label="用户名">
<el-input v-model="form.name"></el-input>
</el-form-item>
<el-form-item label="地址">
<el-input v-model="form.address"></el-input>
</el-form-item>
</el-form>
<template #footer>
<span class="dialog-footer">
<el-button @click="editVisible = false">取 消</el-button>
<el-button type="primary" @click="saveEdit">确 定</el-button>
</span>
</template>
</el-dialog>
</div>
<!-- 编辑弹出框 -->
<el-dialog title="编辑" v-model="editVisible" width="30%">
<el-form ref="form" :model="form" label-width="70px">
<el-form-item label="用户名">
<el-input v-model="form.name"></el-input>
</el-form-item>
<el-form-item label="地址">
<el-input v-model="form.address"></el-input>
</el-form-item>
</el-form>
<template #footer>
<span class="dialog-footer">
<el-button @click="editVisible = false">取 消</el-button>
<el-button type="primary" @click="saveEdit">确 定</el-button>
</span>
</template>
</el-dialog>
</div>
</template>

<script>
import { fetchData } from "../api/index";
import { fetchData } from '../api/index';
export default {
name: "basetable",
name: 'basetable',
data() {
return {
query: {
address: "",
name: "",
address: '',
name: '',
pageIndex: 1,
pageSize: 10
},
Expand Down Expand Up @@ -145,17 +145,18 @@ export default {
},
// 触发搜索按钮
handleSearch() {
this.$set(this.query, "pageIndex", 1);
// this.$set(this.query, "pageIndex", 1); // this.$set在3.0已废弃。用 proxy 实现双向绑定不会出现不更新的问题
this.query.pageIndex = 1;
this.getData();
},
// 删除操作
handleDelete(index) {
// 二次确认删除
this.$confirm("确定要删除吗？", "提示", {
type: "warning"
this.$confirm('确定要删除吗？', '提示', {
type: 'warning'
})
.then(() => {
this.$message.success("删除成功");
this.$message.success('删除成功');
this.tableData.splice(index, 1);
})
.catch(() => {});
Expand All @@ -166,10 +167,10 @@ export default {
},
delAllSelection() {
const length = this.multipleSelection.length;
let str = "";
let str = '';
this.delList = this.delList.concat(this.multipleSelection);
for (let i = 0; i < length; i++) {
str += this.multipleSelection[i].name + " ";
str += this.multipleSelection[i].name + ' ';
}
this.$message.error(`删除了${str}`);
this.multipleSelection = [];
Expand All @@ -184,11 +185,13 @@ export default {
saveEdit() {
this.editVisible = false;
this.$message.success(`修改第 ${this.idx + 1} 行成功`);
this.$set(this.tableData, this.idx, this.form);
// this.$set(this.tableData, this.idx, this.form);
this.tableData[this.idx] = this.form;
},
// 分页导航
handlePageChange(val) {
this.$set(this.query, "pageIndex", val);
// this.$set(this.query, "pageIndex", val);
this.query.pageIndex = val;
this.getData();
}
}
Expand Down