How to use Vue and Element-UI to implement data addition, deletion, modification and query functions

How to use Vue and Element-UI to implement data addition, deletion, modification and query functions

Introduction:
Vue and Element-UI are currently very popular and practical front-end development tools. Their combination allows us to Easily implement data addition, deletion, modification and query functions. This article will introduce how to use Vue and Element-UI to implement this function, and give corresponding code examples.

1. Preparation
Before starting to use Vue and Element-UI, we need to ensure that they have been installed. You can install it through the following command:

npm install vue
npm install element-ui

2. Create the project
First, we need to create a Vue project and introduce Element-UI into the project. You can create and initialize a Vue project through the following commands:

vue init webpack myproject
cd myproject
npm install

Then, introduce Element-UI in the main.js file:

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

3. Create a data list Page
In the created Vue project, we can create a new component to display the data list. You can create a new List.vue file, and then write the following code in it:

<template>
  <div>
    <el-table :data="dataList">
      <el-table-column prop="name" label="Name"></el-table-column>
      <el-table-column prop="age" label="Age"></el-table-column>
      <el-table-column prop="gender" label="Gender"></el-table-column>
      <el-table-column label="Operation">
        <template slot-scope="scope">
          <el-button type="primary" icon="el-icon-edit" @click="editData(scope.$index)">Edit</el-button>
          <el-button type="danger" icon="el-icon-delete" @click="deleteData(scope.$index)">Delete</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dataList: [
        { name: 'Tom', age: 18, gender: 'Male' },
        { name: 'Jerry', age: 20, gender: 'Female' }
      ]
    };
  },
  methods: {
    editData(index) {
      // 编辑数据的逻辑
    },
    deleteData(index) {
      // 删除数据的逻辑
    }
  }
};
</script>

In the above code, we use <el-table> and <el-table-column>To display a list of data, each row of data includes name, age, gender, and operation (edit and delete). In the code example, we store data through the dataList array, and define two methods editData and deleteData to handle editing and deletion operations. You can modify and extend these methods according to your actual needs.

4. Create the Add Data Page
In addition to displaying the data list, we also need a page to add new data. You can create a new Add.vue file, and then write the following code in it:

<template>
  <div>
    <el-form :model="formData" :rules="formRules" ref="form">
      <el-form-item label="Name" prop="name">
        <el-input v-model="formData.name"></el-input>
      </el-form-item>
      <el-form-item label="Age" prop="age">
        <el-input-number v-model="formData.age"></el-input-number>
      </el-form-item>
      <el-form-item label="Gender" prop="gender">
        <el-radio-group v-model="formData.gender">
          <el-radio label="Male"></el-radio>
          <el-radio label="Female"></el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="addData">Add</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      formData: {
        name: '',
        age: '',
        gender: 'Male'
      },
      formRules: {
        name: [
          { required: true, message: 'Name is required', trigger: 'blur' }
        ],
        age: [
          { required: true, message: 'Age is required', trigger: 'blur' }
        ]
      }
    };
  },
  methods: {
    addData() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          // 添加数据的逻辑
        }
      });
    }
  }
};
</script>

In the above code, we used <el-form>, <el-form-item>, <el-input>, <el-input-number> and <el-radio> and other components to create a form page. Users can fill in their name, age, and gender in the form and add the data to the data list by clicking the "Add" button. In the code example, we use the formData object to store form data, and define formRules to set the validation rules for form fields. The validation of the form can be triggered by calling the validate method, and the logic of adding data will be executed after the validation is passed.

5. Integrated page and routing configuration
In order to access the above two pages, we need to configure routing in the src/router/index.js file. The modified index.js file is as follows:

import Vue from 'vue'
import Router from 'vue-router'
import List from '@/components/List'
import Add from '@/components/Add'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      redirect: '/list'
    },
    {
      path: '/list',
      name: 'List',
      component: List
    },
    {
      path: '/add',
      name: 'Add',
      component: Add
    }
  ]
})

With the above configuration, we can view the data list page by accessing http://localhost:8080/list , view the add data page by visiting http://localhost:8080/add. You can also modify the routing configuration according to your own needs.

6. Summary
Through the introduction of this article, we have learned how to use Vue and Element-UI to implement the data addition, deletion, modification and query functions. We create two pages for data list and add data, and access the page through routing configuration, thereby realizing the display and addition of data. Of course, we can also modify and expand these functions according to actual needs. I hope this article will be helpful for you to use Vue and Element-UI to implement the function of adding, deleting, modifying and checking data.

Code example:

• List.vue: [Link](https://gist.github.com/gistlynx/9dd8a04f8c9e313297ad911f4fa7d07b)
• Add.vue: [Link](https://gist.github.com/gistlynx/73dc9fe6c14c006df0d40295d78793f6)

The above is the detailed content of How to use Vue and Element-UI to implement data addition, deletion, modification and query functions. For more information, please follow other related articles on the PHP Chinese website!