From 8c1b5ce5749fabf1bbce3179b4dd047d552a2da8 Mon Sep 17 00:00:00 2001
From: lss <81438234@qq.com>
Date: Wed, 12 May 2021 17:41:36 +0800
Subject: [PATCH] =?UTF-8?q?=E5=8E=BB=E6=8E=89this.$set=E8=AF=AD=E6=B3=95?=
 =?UTF-8?q?=EF=BC=88=E8=AF=AD=E6=B3=95=E6=8A=A5=E9=94=99=EF=BC=89=EF=BC=8C?=
 =?UTF-8?q?=E5=9C=A83.0=E5=B7=B2=E5=BA=9F=E5=BC=83=EF=BC=8C=E7=94=A8=20pro?=
 =?UTF-8?q?xy=20=E5=AE=9E=E7=8E=B0=E5=8F=8C=E5=90=91=E7=BB=91=E5=AE=9A?=
 =?UTF-8?q?=E4=B8=8D=E4=BC=9A=E5=87=BA=E7=8E=B0=E4=B8=8D=E6=9B=B4=E6=96=B0?=
 =?UTF-8?q?=E7=9A=84=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/BaseTable.vue | 239 ++++++++++++++++++++--------------------
 1 file changed, 121 insertions(+), 118 deletions(-)

diff --git a/src/views/BaseTable.vue b/src/views/BaseTable.vue
index 37eca1a..e93ae59 100644
--- a/src/views/BaseTable.vue
+++ b/src/views/BaseTable.vue
@@ -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
             },
@@ -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(() => {});
@@ -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 = [];
@@ -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();
         }
     }