---

📋前言

這篇文章介紹一下基于 Vue3 和 ElementPlus 的小 demo ，是一個模擬的聯(lián)系人列表管理后臺的，功能包括了數(shù)據(jù)的展示、編輯功能、刪除功能以及列表分頁功能。這篇文章是為了下一篇做基礎和學習，因此列表的數(shù)據(jù)使用的是死數(shù)據(jù)。下一篇預告 Node.js + Vue3 + ElementPlus 實現(xiàn)聯(lián)系人列表管理后臺。

---

🎯demo 介紹

上面我也說到了，這個聯(lián)系人列表管理后臺的功能包括了數(shù)據(jù)的展示、編輯功能、刪除功能以及列表分頁功能。接下來我們來分析每個功能具體要做什么、以及如何實現(xiàn)。首先我們可以看到最終效果圖如下。

---

🎯功能分析

接下來我們逐步分析這個 demo 要實現(xiàn)的功能。其中包括了數(shù)據(jù)的展示、編輯功能、刪除功能以及列表分頁功能。

🧩數(shù)據(jù)的展示與分頁功能

首先項目運行后展示出的效果如上圖，列表包括了 id 、姓名、電話以及相關操作，操作又包括了編輯功能和刪除功能的按鈕。

注意 id 是從小到大排列，其中數(shù)據(jù)中的 id 是沒有排序的，如下圖。

最后是數(shù)據(jù)列表的分頁，這里用到的是 el-pagination 實現(xiàn)分頁的功能，五條數(shù)據(jù)為一頁。

🧩編輯功能

然后是編輯功能，通過點擊編輯按鈕，然后出現(xiàn)彈窗，對數(shù)據(jù)進行修改和保持，這里使用到了 el-dialog 和 ElMessage 實現(xiàn)窗口的出現(xiàn)、隱藏以及一些交互效果（消息框）。

交互效果包括了取消編輯、保存編輯的內容，通過 ElMessage 來實現(xiàn)交互后的消息框，效果如下圖。

🧩刪除功能

然后是編輯功能，通過點擊刪除按鈕，然后出現(xiàn)是否確認刪除的彈窗，這里使用到了 ElMessageBox 實現(xiàn)彈窗的出現(xiàn)以及確認、取消的交互效果。

點擊確認后數(shù)據(jù)就會被刪除了。然后通過 ElMessage 來實現(xiàn)交互后的消息框，比如刪除成功的消息框。

---

🎯部分代碼分析

首先我們分析一下這個 demo 用的組件，有 el-button 、el-form 、el-card 、el-dialog 、el-table 、el-pagination 等等。

這個 demo 的 template 部分結構很簡單，只包括了數(shù)據(jù)列表和彈窗通過 el-card 、el-table 、el-button 實現(xiàn)數(shù)據(jù)列表，el-dialog 、el-form 、el-button 實現(xiàn)彈窗的部分。

因為這個 demo 的數(shù)據(jù)是寫死的了，沒有后臺數(shù)據(jù)以及 axios 獲取 ，所以通過以下的方法實現(xiàn)數(shù)據(jù)列表的渲染。

其中默認數(shù)據(jù)如下。

彈窗部分的代碼如下

然后還包括一些交互功能的代碼，如彈窗的顯示與隱藏。

然后就是顯示彈窗以后，對應的交互功能，如取消（就是隱藏關閉掉彈窗）、保存的功能。

    // 保存聯(lián)系人信息const saveContact = () => {const index = sortedContactList.value.findIndex((item) => item.id === editForm.value.id);if (index >= 0) {const oldItem = contactList.value.find((item) => item.id === editForm.value.id);contactList.value.splice(contactList.value.indexOf(oldItem), 1, {...oldItem,...editForm.value,});sortedContactList.value.splice(index, 1, {...oldItem,...editForm.value,});displayedData.value.splice(index - pageSize.value * (currentPage.value - 1),1,editForm.value);editFormVisible.value = false;ElMessage({message: "編輯成功！",grouping: true,type: "success",});}};

這里我來分析一下如何實現(xiàn)保存編輯內容的功能。首先這段代碼的運行邏輯是在編輯聯(lián)系人信息時，從 contactList 中找到對應的聯(lián)系人數(shù)據(jù)項，并用 editForm 中的新數(shù)據(jù)來更新它，然后同步更新 sortedContactList 和 displayedData。最后，將編輯框關閉，并提示用戶編輯成功。

具體邏輯如下。

• 首先，通過 findIndex() 方法查找 sortedContactList 中是否存在 id 和 editForm 中的 id 相同的聯(lián)系人數(shù)據(jù)項。（id 是聯(lián)系人對象的唯一標識符）
• 如果能夠找到該聯(lián)系人數(shù)據(jù)，就從 contactList 中找到對應的舊聯(lián)系人數(shù)據(jù)項，并用新的 editForm 數(shù)據(jù)來更新它。同時，也更新 sortedContactList 中對應索引上的數(shù)據(jù)項。
• 接著，根據(jù)當前頁碼和每頁顯示數(shù)量，還需要更新 displayedData 中對應位置的數(shù)據(jù)項。
• 最后，將編輯框的 visible 屬性設置為 false，關閉編輯框。并使用 ElMessage 組件顯示一條“編輯成功”的成功提示信息。

當然，這個 demo 還有其他功能，這里就不過多描述了代碼的具體功能了，詳情還得是自己去編寫了才能體驗的到了，最后附上完整代碼，供大家參考和學習。

---

🎯完整代碼

<template><div><!-- 編輯聯(lián)系人dialog窗口 --><el-dialog title="編輯" v-model="editFormVisible" width="30%"><el-form :model="editForm" :rules="formRules" ref="editFormRef"><el-form-item label="姓名" prop="name"><el-input v-model="editForm.name"></el-input></el-form-item><el-form-item label="電話" prop="tel"><el-input v-model="editForm.tel"></el-input></el-form-item></el-form><template #footer><el-button @click="closeEditForm">取消</el-button><el-button type="primary" @click="saveContact">保存</el-button></template></el-dialog><el-card class="list-card"><el-table :data="displayedData" empty-text="暫無聯(lián)系人"><el-table-columnprop="id"label="id"width="80"align="center"></el-table-column><el-table-columnprop="name"label="姓名"align="center"></el-table-column><el-table-columnprop="tel"label="電話"align="center"></el-table-column><el-table-column label="操作" width="150" align="center"><template #default="{ row }"><el-button size="small" @click="showEditForm(row)">編輯</el-button><el-button type="danger" size="small" @click="deleteContact(row)">刪除</el-button></template></el-table-column></el-table><div class="pagination"><el-paginationlayout="prev, pager, next":total="contactList.length":page-size="pageSize"v-model:current-page="currentPage"@current-change="handleCurrentChange"/></div></el-card></div>
</template><script>
import { defineComponent, ref } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
export default defineComponent({name: "ContactList",setup() {const contactList = ref([{ id: 3, name: "王五", tel: "15833333333" },{ id: 5, name: "錢七", tel: "17755555555" },{ id: 2, name: "李四", tel: "13922222222" },{ id: 1, name: "張三", tel: "13811111111" },{ id: 7, name: "周九", tel: "16577777777" },{ id: 6, name: "孫八", tel: "15066666666" },{ id: 10, name: "馬二", tel: "13000000000" },{ id: 4, name: "趙六", tel: "18844444444" },{ id: 18, name: "高靜", tel: "13888888888" },{ id: 17, name: "魯陽", tel: "13777777777" },{ id: 16, name: "賈鋼", tel: "13666666666" },{ id: 15, name: "金莉", tel: "13555555555" },{ id: 14, name: "胡偉", tel: "13444444444" },{ id: 13, name: "陳紅", tel: "13333333333" },{ id: 12, name: "史琳", tel: "13222222222" },{ id: 11, name: "祖維", tel: "13111111111" },{ id: 9, name: "鄭一", tel: "15999999999" },{ id: 8, name: "吳十", tel: "17688888888" },{ id: 19, name: "馬超", tel: "13999999999" },{ id: 20, name: "周濤", tel: "14000000000" },]);const sortedContactList = ref([]);const displayedData = ref([]);const pageSize = ref(5);const currentPage = ref(1);const editFormVisible = ref(false);const editForm = ref({ id: "", name: "", tel: "" });const formRules = ref({name: [{ required: true, message: "請輸入姓名", trigger: "blur" }],tel: [{required: true,message: "請輸入電話號碼",trigger: "blur",},{pattern: /^1[3456789]\d{9}/,message: "請輸入有效的手機號碼",trigger: "blur",},],});// 獲取所有聯(lián)系人列表const getContactList = () => {sortedContactList.value = contactList.value.slice().sort((a, b) => a.id - b.id);displayedData.value = sortedContactList.value.slice(0, pageSize.value);};// 顯示編輯彈窗const showEditForm = (row) => {editFormVisible.value = true;editForm.value = Object.assign({}, row);};// 關閉編輯彈窗const closeEditForm = () => {editFormVisible.value = false;ElMessage({message: "已取消編輯。",grouping: true,type: "info",});};// 保存聯(lián)系人信息const saveContact = () => {const index = sortedContactList.value.findIndex((item) => item.id === editForm.value.id);if (index >= 0) {const oldItem = contactList.value.find((item) => item.id === editForm.value.id);contactList.value.splice(contactList.value.indexOf(oldItem), 1, {...oldItem,...editForm.value,});sortedContactList.value.splice(index, 1, {...oldItem,...editForm.value,});displayedData.value.splice(index - pageSize.value * (currentPage.value - 1),1,editForm.value);editFormVisible.value = false;ElMessage({message: "編輯成功！",grouping: true,type: "success",});}};// 刪除聯(lián)系人const deleteContact = (row) => {const index = sortedContactList.value.findIndex((item) => item.id === row.id);ElMessageBox.confirm(`確定要刪除聯(lián)系人${row.name}嗎`, "Warning", {confirmButtonText: "確認",cancelButtonText: "取消",type: "warning",}).then(() => {if (index >= 0) {const oldItem = contactList.value.find((item) => item.id === row.id);contactList.value.splice(contactList.value.indexOf(oldItem), 1);sortedContactList.value.splice(index, 1);displayedData.value.splice(index - pageSize.value * (currentPage.value - 1),1);ElMessage({message: "刪除成功！",grouping: true,type: "success",});}});};// 處理頁碼改變事件const handleCurrentChange = (val) => {currentPage.value = val;const start = pageSize.value * (currentPage.value - 1);const end = pageSize.value * currentPage.value;displayedData.value = sortedContactList.value.slice(start, end);};// 初始化獲取所有聯(lián)系人列表getContactList();return {contactList,sortedContactList,displayedData,pageSize,currentPage,editFormVisible,editForm,formRules,getContactList,showEditForm,closeEditForm,saveContact,deleteContact,handleCurrentChange,};},
});
</script><style>
.pagination {margin-top: 20px;text-align: center;
}
</style>

---

📝最后

通過這篇文章的實戰(zhàn)學習，學會實現(xiàn)的思路和基本的邏輯，為了下一篇內容做基礎和學習，以及實現(xiàn)更多其他功能。下一篇預告 Node.js + Vue3 + ElementPlus 實現(xiàn)聯(lián)系人列表管理后臺，基于這篇文章的內容學習來實現(xiàn)，敬請期待。