elememt-plus的表格的增刪改查#Vue3無需json數據，無需后端接口

實現效果：

<template><!-- 演示地址 --><div class="dem-add"><!-- Search start --><div class="dem-title"><p>演示地址</p><el-inputclass="query-input"v-model="tableForm.name"placeholder="請輸入姓名搜索"@keyup.enter="handleQueryName"><template #prefix><el-icon class="el-input__icon"><search /></el-icon></template></el-input><el-button type="primary" :icon="Plus" @click="handleAdd" circle /></div><!-- Search end --><!-- Table start --><div class="bs-page-table"><el-table :data="tableData" ref="multipleTableRef"><el-table-column prop="name" label="演示端" width="200" /><el-table-column prop="address" label="地址" width="200" /><el-table-column prop="notes" label="特殊說明" width="200" /><el-table-column fixed="right" label="操作" width="150"><template #default="scope"><el-buttontype="danger":icon="Delete"@click="handleRowDel(scope.$index)"circle/><el-buttontype="primary":icon="Edit"@click="handleEdit(scope.row, scope.$index)"circle/></template></el-table-column></el-table><el-dialogv-model="dialogFormVisible":title="dialogType.name === 'add' ? '新增' : '編輯'"width="500"><el-form :model="tableForm"><el-form-item label="演示端" :label-width="80"><el-input v-model="tableForm.name" autocomplete="off" /></el-form-item><el-form-item label="地址" :label-width="80"><el-input v-model="tableForm.address" autocomplete="off" /></el-form-item><el-form-item label="特殊說明" :label-width="80"><el-input v-model="tableForm.notes" autocomplete="off" /></el-form-item></el-form><template #footer><div class="dialog-footer"><el-button @click="dialogFormVisible = false"> 取消 </el-button><el-button type="primary" @click="dialogConfirm"> 確認 </el-button></div></template></el-dialog></div><!-- Table end --></div>
</template><script setup lang="ts">
import { reactive, ref } from "vue";
// import { get, post, del, put } from "../../utils/request";
import { Search } from "@element-plus/icons-vue";
import { Plus } from "@element-plus/icons-vue";
import { Delete } from "@element-plus/icons-vue";
import { Edit } from "@element-plus/icons-vue";// 演示地址
// 默認對話框關閉狀態
const dialogFormVisible = ref(false);
let tableForm = reactive({name: "",address: "",notes: "",
});
// 定義對話框標題
const dialogType = ref({ name: "add" });
// 定義表單變量
let tableData = ref([{name: "Jarry",address: "No. 189, Grove St, Los Angeles",notes: "暫無",},{name: "Tom",address: "No. 189, Grove St, Los Angeles",notes: "暫無",},
]);
//全局保存編輯的行號
const globalIndex = ref(-1);// 搜索（通過name值查找）//存在bug！！！
const handleQueryName = async () => {const result = tableData.value.filter((item: any) => item.name === tableForm.name);tableData.value = result;
};
// 新增
const handleAdd = async () => {// 打開新增對話框dialogFormVisible.value = true;dialogType.value.name = "add";// 設置新的空的綁值對象tableForm = reactive({ name: "", address: "", notes: "" });
};
// 刪除一條數據(但是現在是刪除全部對象)
const handleRowDel = async (index: any) => {// 從index位置開始，刪除一行即可tableData.value.splice(index, 1);
};
// 編輯
const handleEdit = (row: any, index: any) => {// Object.assign拷貝賦值到表單const newobj = Object.assign({}, row);tableForm = reactive(newobj);//把當前編輯的行號賦值給全局保存的行號globalIndex.value = index;console.log(globalIndex.value);// 打開編輯對話框dialogFormVisible.value = true;dialogType.value.name = "edit";
};
// 確認
const dialogConfirm = () => {// 判斷是新增還是編輯if (dialogType.value.name === "edit") {tableData.value[globalIndex.value] = tableForm;} else {//新增tableData.value.push(tableForm);}dialogFormVisible.value = false;
};
</script><style scoped lang="scss">
// 演示地址
.dem-add {width: 800px;margin: 20px 600px;background-color: rgba(255, 255, 255, 0.333);box-shadow: 0 8px 16px #0005;border-radius: 16px;overflow: hidden;// 標簽.dem-title {display: flex;justify-content: space-between;align-items: center;background-color: rgba(207, 204, 204, 0.267);padding: 0 20px;p {float: left;width: 150px;color: #000;}// 搜索::v-deep .el-input__wrapper {border-radius: 100px;}.query-input {width: 240px;height: 35px;margin: 10px auto;margin-left: 330px;background-color: transparent;transition: 0.2s;}::v-deep .el-input__wrapper:hover {background-color: #fff8;box-shadow: 0 5px 40px #0002;}// 增加按鈕.el-button {float: left;margin-top: 3px;margin-left: 10px;}}// 表格.bs-page-table {.el-table {width: 100%;border: 1px solid rgb(219, 219, 219);padding: 10px;.el-table-column {border-collapse: collapse;text-align: left;}}}// 分頁.demo-pagination-block {padding: 9px 20px;}
}
</style>