Cara menggunakan Vue dan Element-UI untuk melaksanakan fungsi penambahan, pemadaman, pengubahsuaian dan pertanyaan data

Cara menggunakan Vue dan Element-UI untuk melaksanakan fungsi penambahan, pemadaman, pengubahsuaian dan pertanyaan data

Pengenalan:
Vue dan Element-UI pada masa ini adalah alat pembangunan bahagian hadapan yang sangat popular dan praktikal Gabungan mereka membolehkan kami dengan mudah melaksanakan penambahan, pemadaman, pengubahsuaian dan pertanyaan Fungsi. Artikel ini akan memperkenalkan cara menggunakan Vue dan Element-UI untuk melaksanakan fungsi ini dan memberikan contoh kod yang sepadan.

1. Persediaan
Sebelum mula menggunakan Vue dan Element-UI, kita perlu memastikan bahawa ia telah dipasang. Ia boleh dipasang melalui arahan berikut:

npm install vue
npm install element-ui

2. Buat projek
Mula-mula, kita perlu mencipta projek Vue dan memperkenalkan Element-UI ke dalam projek. Anda boleh mencipta dan memulakan projek Vue dengan arahan berikut:

vue init webpack myproject
cd myproject
npm install

Kemudian, perkenalkan Element-UI dalam fail main.js: main.js文件中引入Element-UI：

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

三、创建数据列表页面
在创建好的Vue项目中，我们可以新建一个组件来展示数据列表。可以新建一个List.vue文件，然后在其中编写如下代码：

<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>

以上代码中，我们使用<el-table>和<el-table-column>来展示数据的列表，每一行数据中包括姓名（name）、年龄（age）、性别（gender）以及操作（编辑和删除）。在代码示例中，我们通过dataList数组来存储数据，并且定义了两个方法editData和deleteData来处理编辑和删除操作。你可以根据自己的实际需求来修改和扩展这些方法。

四、创建添加数据页面
除了展示数据列表之外，我们还需要一个页面来添加新的数据。可以新建一个Add.vue文件，然后在其中编写如下代码：

<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>

以上代码中，我们使用了<el-form>、<el-form-item>、<el-input>、<el-input-number>和<el-radio>等组件来创建一个表单页面。用户可以在表单中填写姓名、年龄和性别，并通过点击“Add”按钮将数据添加到数据列表中。在代码示例中，我们使用了formData对象来存储表单数据，并定义了formRules来设置表单字段的校验规则。通过调用validate方法可以触发表单的验证，并在验证通过后执行添加数据的逻辑。

五、整合页面和路由配置
为了能够访问到上述两个页面，我们需要在src/router/index.js文件中进行路由的配置。修改后的index.js文件如下：

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
    }
  ]
})

通过以上配置，我们可以通过访问http://localhost:8080/list来查看数据列表页面，通过访问http://localhost:8080/addrrreee

3 Cipta halaman senarai data

Dalam yang dibuat Vue Dalam projek, kita boleh mencipta komponen baharu untuk memaparkan senarai data. Anda boleh mencipta fail List.vue baharu dan menulis kod berikut di dalamnya:
rrreee

Dalam kod di atas, kami menggunakan <el-table> dan < el-table-column> untuk memaparkan senarai data setiap baris data termasuk nama, umur, jantina dan operasi (edit dan padam). Dalam contoh kod, kami menyimpan data melalui tatasusunan dataList dan mentakrifkan dua kaedah editData dan deleteData untuk mengendalikan operasi penyuntingan dan pemadaman. Anda boleh mengubah suai dan melanjutkan kaedah ini mengikut keperluan sebenar anda.

4 Buat halaman tambah data

Selain memaparkan senarai data, kami juga memerlukan halaman untuk menambah data baharu. Anda boleh mencipta fail Add.vue baharu dan menulis kod berikut di dalamnya:
• rrreee
Dalam kod di atas, kami menggunakan <el-form>, &lt ;el-form-item>, <el-input>, <el-input-number> dan <el -radio&gt ; dan komponen lain untuk membuat halaman borang. Pengguna boleh mengisi nama, umur dan jantina mereka dalam borang dan menambah data pada senarai data dengan mengklik butang "Tambah". Dalam contoh kod, kami menggunakan objek formData untuk menyimpan data borang dan mentakrifkan formRules untuk menetapkan peraturan pengesahan untuk medan borang. Pengesahan borang boleh dicetuskan dengan memanggil kaedah validate dan logik untuk menambah data akan dilaksanakan selepas pengesahan diluluskan.
• 5. Konfigurasi halaman dan penghalaan bersepadu

Untuk mengakses dua halaman di atas, kita perlu mengkonfigurasi penghalaan dalam fail src/router/index.js. Fail index.js yang diubah suai adalah seperti berikut: 🎜rrreee🎜Dengan konfigurasi di atas, kami boleh melihat halaman senarai data dengan mengakses http://localhost:8080/list . Lawati http://localhost:8080/add untuk melihat halaman tambah data. Anda juga boleh mengubah suai konfigurasi penghalaan mengikut keperluan anda sendiri. 🎜🎜6. Ringkasan🎜Melalui pengenalan artikel ini, kami telah mempelajari cara menggunakan Vue dan Element-UI untuk melaksanakan fungsi penambahan, pemadaman, pengubahsuaian dan pertanyaan. Kami mencipta dua halaman untuk senarai data dan menambah data, dan mengakses halaman melalui konfigurasi penghalaan, dengan itu merealisasikan paparan dan penambahan data. Sudah tentu, kita juga boleh mengubah suai dan mengembangkan fungsi ini mengikut keperluan sebenar. Saya harap artikel ini akan membantu anda menggunakan Vue dan Element-UI untuk melaksanakan fungsi menambah, memadam, mengubah suai dan menyemak data. 🎜🎜Contoh kod: 🎜🎜🎜List.vue: [Pautan](https://gist.github.com/gistlynx/9dd8a04f8c9e313297ad911f4fa7d07b) 🎜🎜Tambahkan.vue:.com gistlynx/73dc9fe6c14c006df0d40295d78793f6)🎜🎜

Atas ialah kandungan terperinci Cara menggunakan Vue dan Element-UI untuk melaksanakan fungsi penambahan, pemadaman, pengubahsuaian dan pertanyaan data. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!