---

📋前言

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

---

🎯demo 介紹

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

---

🎯功能分析

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

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

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

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

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

🧩編輯功能

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

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

🧩刪除功能

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

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

---

🎯部分代碼分析

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

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

因?yàn)檫@個(gè) demo 的數(shù)據(jù)是寫死的了，沒有后臺(tái)數(shù)據(jù)以及 axios 獲取 ，所以通過以下的方法實(shí)現(xiàn)數(shù)據(jù)列表的渲染。

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

彈窗部分的代碼如下

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

然后就是顯示彈窗以后，對(duì)應(yīng)的交互功能，如取消（就是隱藏關(guān)閉掉彈窗）、保存的功能。

    // 保存聯(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",});}};

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

具體邏輯如下。

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

當(dāng)然，這個(gè) demo 還有其他功能，這里就不過多描述了代碼的具體功能了，詳情還得是自己去編寫了才能體驗(yàn)的到了，最后附上完整代碼，供大家參考和學(xué)習(xí)。

---

🎯完整代碼

<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: "請(qǐng)輸入姓名", trigger: "blur" }],tel: [{required: true,message: "請(qǐng)輸入電話號(hào)碼",trigger: "blur",},{pattern: /^1[3456789]\d{9}/,message: "請(qǐng)輸入有效的手機(jī)號(hào)碼",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);};// 關(guān)閉編輯彈窗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(`確定要?jiǎng)h除聯(lián)系人${row.name}嗎`, "Warning", {confirmButtonText: "確認(rèn)",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>

---

📝最后

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