vue+element 前端实现增删查改+分页，不调用后端

前端实现增删查改+分页，不调用后端。
大概就是对数组内的数据进行增删查改+分页
没调什么样式，不想写后端，当做练习
在这里插入图片描述

<template><div><!-- 查询 --><el-form :inline="true" :model="formQuery"><el-form-item label="时间" :label-width="formLabelWidth"><el-date-pickerv-model="formQuery.date"type="daterange"value-format="yyyy-MM-dd"start-placeholder="开始日期"end-placeholder="结束日期":default-time="['00:00:00', '23:59:59']"></el-date-picker></el-form-item><el-form-item label="姓名" :label-width="formLabelWidth"><el-inputv-model="formQuery.name"style="width: 240px"placeholder="Please input"clearable /></el-form-item><el-form-item label="地址" :label-width="formLabelWidth"><el-inputv-model="formQuery.address"style="width: 240px"placeholder="Please input"clearable /></el-form-item><el-form-item><el-button type="primary" @click="query()">查询</el-button></el-form-item><el-form-item><el-button type="success" @click="add()" class="addButton">添加</el-button></el-form-item></el-form><!-- 表格展示 --><el-table :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)" style="width: 100%"><el-table-column type="index" label="id" width="50" /><el-table-column prop="date" label="Date" width="180" /><el-table-column prop="name" label="Name" width="180" /><el-table-column prop="address" label="Address" /><el-table-column label="操作"><template slot-scope="scope"><!--插槽知识点--><el-button type="primary" @click="onEdit(scope.$index)">编辑</el-button><!-- <el-button type="primary" @click="dialogFormEditVisible = true">编辑</el-button> --><!-- <el-button type="danger" @click="onDelete(scope.$index)">删除</el-button> --><!-- 删除二次确认 --><el-popover placement="top" width="160" v-model="scope.row.visible"><p>确定删除吗？</p><div style="text-align: right; margin: 0"><el-button size="mini" type="text" @click="scope.row.visible = false">取消</el-button><el-button type="primary" size="mini" @click="onDelete(scope.$index)">确定</el-button></div><el-button slot="reference" type="danger">删除</el-button></el-popover></template></el-table-column></el-table><!-- 分页 --><div class="block" style="margin-top: 15px"><el-paginationalign="center"@size-change="handleSizeChange"@current-change="handleCurrentChange":current-page="currentPage":page-sizes="[1, 3, 5, 7]":page-size="pageSize"layout="total, sizes, prev, pager, next, jumper":total="tableData.length"></el-pagination></div><!-- 修改弹出框 --><el-dialog :visible.sync="dialogFormEditVisible" title="修改" width="500"><el-form :model="formEdit"><el-form-item label="时间" :label-width="formLabelWidth"><el-date-pickerv-model="formEdit.date"type="date"format="yyyy-MM-dd"value-format="yyyy-MM-dd"placeholder="Pick a day" /></el-form-item><el-form-item label="姓名" :label-width="formLabelWidth"><el-inputv-model="formEdit.name"style="width: 240px"placeholder="Please input"clearable /></el-form-item><el-form-item label="地址" :label-width="formLabelWidth"><el-inputv-model="formEdit.address"style="width: 240px"placeholder="Please input"clearable /></el-form-item></el-form><template #footer><div class="dialog-footer"><el-button @click="dialogFormEditVisible = false">Cancel</el-button><el-button type="primary" @click="editConfirm()"> Confirm </el-button></div></template></el-dialog><!-- 添加弹出框 --><el-dialog :visible.sync="dialogFormAddVisible" title="添加" width="500"><el-form :model="formAdd"><el-form-item label="时间" :label-width="formLabelWidth"><el-date-pickerv-model="formAdd.date"type="date"format="yyyy-MM-dd"value-format="yyyy-MM-dd"placeholder="Pick a day" /></el-form-item><el-form-item label="姓名" :label-width="formLabelWidth"><el-inputv-model="formAdd.name"style="width: 240px"placeholder="Please input"clearable /></el-form-item><el-form-item label="地址" :label-width="formLabelWidth"><el-inputv-model="formAdd.address"style="width: 240px"placeholder="Please input"clearable /></el-form-item></el-form><template #footer><div class="dialog-footer"><el-button @click="dialogFormAddVisible = false">Cancel</el-button><el-button type="primary" @click="addConfirm()"> Confirm </el-button></div></template></el-dialog></div>
</template><script>
import { Container } from "element-ui";export default {name: "practice",data() {return {tableData: [{date: "2024-05-03",name: "Tom1",address: "No. 11, Grove St, Los Angeles",},{date: "2024-06-02",name: "Tom2",address: "No. 22, Grove St, Los Angeles",},{date: "2024-03-04",name: "Tom3",address: "No. 33, Grove St, Los Angeles",},{date: "2024-03-21",name: "Tom4",address: "No. 44, Grove St, Los Angeles",},],currentPage: 1, // 当前页码total: 20, // 总条数pageSize: 3, // 每页的数据条数formQuery: {date: "",name: "",address: "",},dialogFormEditVisible: false,dialogFormAddVisible: false,formEdit: {date: "",name: "",address: "",},formAdd: {date: "",name: "",address: "",},formLabelWidth: "140px",num: "",};},methods: {// 添加add() {this.formAdd = {};this.dialogFormAddVisible = true;},addConfirm() {this.tableData.push(this.formAdd);this.dialogFormAddVisible = false;},// 打开修改弹窗 回显onEdit(index) {// console.log(index);this.dialogFormEditVisible = true;this.num = index;// this.formEdit = this.tableData[index]; 在修改弹窗中进行修改，父表单的内容会被直接修改/*在你的代码中，当点击修改按钮时，通过onEdit方法打开弹窗并设置表单数据formEdit为tableData[index]。这里需要注意的是，Vue.js 中对象是引用类型，所以 this.formEdit = this.tableData[index]; 实际上是将 formEdit 和 tableData[index] 引用了同一个对象。因此，当你在弹窗中修改formEdit时，同时也修改了tableData[index] 对应的对象，导致父表单内容直接被修改了。为了避免这种情况，你可以在 onEdit 方法中对 tableData[index] 进行深拷贝，而不是简单地引用赋值。这样就可以保持弹窗中的表单数据和原始数据的独立性，不会相互影响。你可以使用 Object.assign() 或者扩展运算符（spread operator）来进行深拷贝，例如：this.formEdit = Object.assign({}, this.tableData[index]);// 或者this.formEdit = { ...this.tableData[index] };这样修改后，当你在弹窗中修改formEdit时，不会影响到tableData中的数据，直到点击确认按钮后才会将修改后的数据应用到tableData中。 */this.formEdit = Object.assign({}, this.tableData[index]);},// 修改确认editConfirm() {this.tableData[this.num].date = this.formEdit.date;this.tableData[this.num].name = this.formEdit.name;this.tableData[this.num].address = this.formEdit.address;this.dialogFormEditVisible = false;},// 删除onDelete(index) {// splice(index, 1) 表示从 tableData 数组中删除一个元素，从指定的 index 开始删除this.tableData.splice(index, 1);},//查询query() {// console.log(this.formQuery);var timeResult = [];var addressResult = [];var nameResult = [];var startDate = this.formQuery.date[0];var endDate = this.formQuery.date[1];var address = this.formQuery.address;var name = this.formQuery.name;var date = this.formQuery.date;// 判断日期if (date != "") {for (let index = 0; index < this.tableData.length; index++) {const element = this.tableData[index];if (startDate <= element.date && endDate >= element.date) {timeResult.push(this.tableData[index]);}}} else {timeResult = this.tableData;}// 判断地址if (address != "") {for (const iterator of timeResult) {if (iterator.address.includes(address)) {addressResult.push(iterator);}}} else {addressResult = this.tableData;}// 判断姓名if (name != "") {addressResult.forEach((element) => {if (element.name.includes(name)) {nameResult.push(element);}});} else {nameResult = this.tableData;}this.tableData = nameResult;},// 分页//每页条数改变时触发 选择一页显示多少行handleSizeChange(val) {// console.log(`每页 ${val} 条`);this.pageSize = val;// this.fetchData(this.currentPage);},//当前页改变时触发 跳转其他页handleCurrentChange(val) {// console.log(`当前页: ${val}`);this.currentPage = val;// this.fetchData(val);},},
};
</script><style scoped>
.el-button {margin-right: 10px;
}
</style>