Vue element implements table adding, deleting and modifying data

This article shares the specific code of vue element to add, delete and modify data in the table for your reference. The specific content is as follows

Here we use a pop-up box to implement this function. Another method is to modify it directly on the original basis.

The effect is as follows:

Table of tables:

<el-table :data="tableData" style="width: 100%">
  <el-table-column prop="date" label="Date" width="180"></el-table-column>
  <el-table-column prop="name" label="姓名" width="180"></el-table-column>
  <el-table-column prop="address" label="Address"></el-table-column>
  <el-table-column label="operation">
    <template slot-scope="scope">
      <!-- Click Edit to enter the edit page to edit the table data-->
      <el-button size="small" @click="handleEdit(scope.$index, scope.row)">Edit</el-button>
      <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">Delete</el-button>
    </template>
  </el-table-column>
</el-table>

Pop-up box settings:

<!-- The following is used to set the pop-up box when clicking the add button. You can nest tables to display the pop-up table information. Use the following :visible.sync to control whether it is displayed or not-->
<!-- The value we set is bound inside. After filling it out, insert our new value into all the data on the page-->
<el-dialog title="User Information" :visible.sync="dialogFormVisible">
  <!-- Nesting el-form in el-dialog to achieve the effect of pop-up table -->
  <el-form :model="form">
    <el-form-item label="Address" :label-width="formLabelWidth">
      <el-input v-model="form.address" auto-complete="off"></el-input>
    </el-form-item>
    <el-form-item label="Name" :label-width="formLabelWidth">
      <el-input v-model="form.name" auto-complete="off"></el-input>
    </el-form-item>
    <el-form-item label="Date" :label-width="formLabelWidth">
      <el-date-picker
        v-model="form.date"
        type="date"
        placeholder="Select a date"
        value-format="yyyy-MM-dd"
      ></el-date-picker>
    </el-form-item>

    <el-form-item label="Gender" :label-width="formLabelWidth">
      <el-select v-model="form.region" placeholder="Gender">
        <el-option label="Male" value="Male"></el-option>
        <el-option label="女" value="女"></el-option>
      </el-select>
    </el-form-item>
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="cancel">Cancel</el-button>
    <!-- Set the method to trigger the update -->
    <el-button type="primary" @click="update">OK</el-button>
  </div>
</el-dialog>

The complete code is as follows:

<template>
  <div class="basetable" v-loading="loading" element-loading-text="Loading">
    <!-- v-loading settings loading -->
    <div class="selectMenu">
      <el-date-picker v-model="value6" type="daterange" placeholder="Select date range"></el-date-picker>
      <!-- Click to trigger the add method-->
      <el-button type="primary" @click="add">Add</el-button>
    </div>
    <div class="tableMain">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="date" label="Date" width="180"></el-table-column>
        <el-table-column prop="name" label="姓名" width="180"></el-table-column>
        <el-table-column prop="address" label="Address"></el-table-column>
        <el-table-column label="operation">
          <template slot-scope="scope">
            <!-- Click Edit to enter the edit page to edit the table data-->
            <el-button size="small" @click="handleEdit(scope.$index, scope.row)">Edit</el-button>
            <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">Delete</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="page">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage3"
        :page-size="100"
        layout="prev, pager, next, jumper"
        :total="1000"
      ></el-pagination>
    </div>
    <!-- The following is used to set the pop-up box when clicking the add button. You can nest tables to display the pop-up table information. Use the following :visible.sync to control whether it is displayed or not-->
    <!-- The value we set is bound inside. After filling it out, insert our new value into all the data on the page-->
    <el-dialog title="User Information" :visible.sync="dialogFormVisible">
      <!-- Nesting el-form in el-dialog to achieve the effect of pop-up table -->
      <el-form :model="form">
        <el-form-item label="Address" :label-width="formLabelWidth">
          <el-input v-model="form.address" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="Name" :label-width="formLabelWidth">
          <el-input v-model="form.name" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="Date" :label-width="formLabelWidth">
          <el-date-picker
            v-model="form.date"
            type="date"
            placeholder="Select a date"
            value-format="yyyy-MM-dd"
          ></el-date-picker>
        </el-form-item>

        <el-form-item label="Gender" :label-width="formLabelWidth">
          <el-select v-model="form.region" placeholder="Gender">
            <el-option label="Male" value="Male"></el-option>
            <el-option label="女" value="女"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">Cancel</el-button>
        <!-- Set the method to trigger the update -->
        <el-button type="primary" @click="update">OK</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script type="text/ecmascript-6">
export default {
  data() {
    return {
      loading: true,
      // Table data tableData: [
        {
          date: "2017-05-01",
          name: "Soldier 76",
          region: "Male",
          address: "King's Avenue",
          city: ""
        },
        {
          date: "2017-05-02",
          name: "Genji",
          region: "Male",
          address: "Nepal",
          city: ""
        },
        {
          date: "2017-05-03",
          name: "Black Lily",
          region: "Female",
          address: "Volskaya Industrial Zone",
          city: ""
        },
        {
          date: "2017-05-04",
          name: "Tracer",
          region: "Female",
          address: "King's Avenue",
          city: ""
        },
        {
          date: "2017-05-03",
          name: "Zhaliya",
          region: "Female",
          address: "Volskaya Industrial Zone",
          city: ""
        },
        {
          date: "2017-05-03",
          name: "Zenyatta",
          region: "Male",
          address: "Nepal",
          city: ""
        },
        {
          date: "2017-05-03",
          name: "Hanzo",
          region: "Female",
          address: "Huamura",
          city: ""
        }
      ],
      // City selection data cityList: [
        { name: "King's Row" },
        { name: "Nepal" },
        { name: "Volskaya Industrial Zone" },
        { name: "Huamura" },
        { name: "Nepal" },
        { name: "Moon Base" }
      ],
      dialogFormVisible: false,
      formLabelWidth: "80px",
      // Set the form to bind the value when adding form: {},
      value6: "",
      currentPage3: 1,
      currentIndex: ""
    };
  },
  created() {
    // Set the callback function to display the loading animation for 1.5 seconds setTimeout(() => {
      this.loading = false;
    }, 1500);
  },
  methods: {
    showTime() {
      this.$alert(this.value6, "Start and End Time", {
        confirmButtonText: "Confirm",
        callback: action => {
          this.$message({
            type: "info",
            message: "Displayed"
          });
        }
      });
    },
    // The way to add data is to set some values separately to add functions. These values are set in the object, and then the newly added object is inserted into the total data add() {
      this.form = {
        date: "",
        name: "",
        region: "",
        address: ""
      };
      // Set the dialog box to be displayed after clicking the button this.dialogFormVisible = true;
    },
    update() {
      // this.form.date = reformat(this.form.date);
      //You can set the date format on HTML//Submit the information we added to the total data this.tableData.push(this.form);
      this.dialogFormVisible = false;
    },
    handleEdit(index, row) {
      // Pass the index of the data to realize the data echo this.form = this.tableData[index];
      this.currentIndex = index;
      //Set the visibility of the dialog box this.dialogFormVisible = true;
    },
    handleDelete(index, row) {
      // Set up a function similar to the console type this.$confirm("Permanently delete the file, do you want to continue?", "Prompt", {
        confirmButtonText: "Confirm",
        cancelButtonText: "Cancel",
        type: "warning"
      })
        .then(() => {
          // Remove the data at the corresponding index position. You can set the row to request the background to delete the data this.tableData.splice(index, 1);
          this.$message({
            type: "success",
            message: "Deleted successfully!"
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "Deleted"
          });
        });
    },
    cancel() {
      // When canceling, just set the dialog box to be invisible this.dialogFormVisible = false;
    },
    handleSizeChange(val) {
      console.log(`${val} items per page`);
    },
    handleCurrentChange(val) {
      console.log(`Current page: ${val}`);
    }
  }
};
</script>
<style lang="scss">
.basetable {
  .tableMain {
    margin: {
      top: 10px;
    }
  }
  .page {
    float: left;
    margin: {
      top: 10px;
    }
  }
}
</style>

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in: