纯前端实现表格增删改查

代码：

<template>

  <div class="app-container">

    <span>序号：</span><el-input v-model="id" style="width: 200px;margin-right:10px"></el-input>

    <span> 姓名：</span

    ><el-input v-model="name" style="width: 200px;margin-right:10px"></el-input>

    <span>地址：</span

    ><el-input v-model="address" style="width: 200px;margin-right:10px"></el-input>

    <el-button

      @click="add()"

      type="primary"

      style="margin-left: 10px; width: 100px"

      >添加</el-button

    >

    <br />

    <el-input

      v-model="input"

      placeholder="请输入内容"

      style="width: 200px; margin-top: 20px; margin-bottom: 20px"

    ></el-input>

    <el-button @click="search()" type="primary" style="maigin-left: 10px"

      >查询</el-button

    >

    <el-table :data="tableData" style="width: 50%">

      <el-table-column prop="id" label="序号" width="180"> </el-table-column>

      <el-table-column prop="name" label="姓名" width="180"> </el-table-column>

      <el-table-column prop="address" label="地址"> </el-table-column>

      <el-table-column lable="按钮">

        <template #default="scope">

          <el-button

            @click="handleDelete(scope.row, scope.$index)"

            type="danger"

            >删除</el-button

          >

          <el-button @click="handleEdit(scope.row, scope.$index)"

            >编辑

          </el-button>

        </template>

      </el-table-column>

    </el-table>

    <el-dialog

      title="编辑"

      v-model="editFormVisible"

      :close-on-click-modal="false"

    >

      <el-form :model="editForm" label-width="80px" ref="editForm">

        <el-form-item label="序号">

          <el-input v-model="editForm.id" style="width: 200px"></el-input>

        </el-form-item>

        <el-form-item label="姓名">

          <el-input v-model="editForm.name" style="width: 200px"></el-input>

        </el-form-item>

        <el-form-item label="地址">

          <el-input v-model="editForm.address" style="width: 200px"></el-input>

        </el-form-item>

      </el-form>

      <div slot="footer" class="dialog-footer">

        <el-button @click.native="editFormVisible = false">取消</el-button>

        <el-button type="primary" @click.native="editSubmit">提交</el-button>

      </div>

    </el-dialog>

  </div>

</template>

<script>

export default {

  data() {

    return {

      tableData: [

        {

          id: "1",

          name: "李明明",

          address: "海淀区信息路",

        },

        {

          id: "2",

          name: "张红",

          address: "朝阳区",

        },

        {

          id: "3",

          name: "王小虎",

          address: "上海市普陀区金沙江路 1518 弄",

        },

        {

          id: "4",

          name: "王二虎",

          address: "上海市普陀区金沙江路 1518 弄",

        },

        {

          id: "5",

          name: "王大虎",

          address: "上海市普陀区金沙江路 1518 弄",

        },

        {

          id: "6",

          name: "王三虎",

          address: "上海市普陀区金沙江路 1518 弄",

        },

      ],

      input: "",

      arr: [],

      id: "",

      name: "",

      address: "",

      editFormVisible: false,

      editForm: {

        id: "",

        name: "",

        address: "",

      },

      data: {},

    };

  },

  created() {

    //拷贝

    this.all = JSON.parse(JSON.stringify(this.tableData));

  },

  methods: {

    // 查询过滤

    search() {

      this.tableData = this.tableData.filter(

        (v) =>

          v.id === this.input ||

          v.name === this.input ||

          v.address === this.input

      );

      if (this.input == "") {

        this.tableData = this.all;

      }

    },

    //添加

    add() {

      this.tableData.push({

        id: this.id,

        name: this.name,

        address: this.address,

      });

      (this.id = ""), (this.name = ""), (this.address = "");

    },

    //删除

    handleDelete(scope, index) {

      this.search();

      this.tableData.splice(index, 1);

    },

    //修改

    handleEdit(index, row) {

      this.editFormVisible = true;

      this.editForm = this.tableData[row];

      console.log(this.editForm);

    },

    //提交

    editSubmit() {

      this.editFormVisible = false;

      console.log(this.editForm);

    },

  },

};

</script>