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

胖成范德彪
已于 2024-03-21 17:30:43 修改
阅读量679
点赞数 3
分类专栏：前端文章标签：前端 vue.js javascript
于 2024-03-21 17:00:45 首次发布
本文链接：https://blog.csdn.net/SurepMan/article/details/136913993
版权
前端专栏收录该内容
2 篇文章 0 订阅
订阅专栏
前端实现增删查改+分页，不调用后端。
大概就是对数组内的数据进行增删查改+分页
没调什么样式，不想写后端，当做练习
在这里插入图片描述
<template>
  <div>
    <!-- 查询 -->
    <el-form :inline="true" :model="formQuery">
      <el-form-item label="时间" :label-width="formLabelWidth">
        <el-date-picker
          v-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-input
          v-model="formQuery.name"
          style="width: 240px"
          placeholder="Please input"
          clearable />
      </el-form-item>
      <el-form-item label="地址" :label-width="formLabelWidth">
        <el-input
          v-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-pagination
        align="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-picker
            v-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-input
            v-model="formEdit.name"
            style="width: 240px"
            placeholder="Please input"
            clearable />
        </el-form-item>
        <el-form-item label="地址" :label-width="formLabelWidth">
          <el-input
            v-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-picker
            v-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-input
            v-model="formAdd.name"
            style="width: 240px"
            placeholder="Please input"
            clearable />
        </el-form-item>
        <el-form-item label="地址" :label-width="formLabelWidth">
          <el-input
            v-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>