Cara melaksanakan fungsi penambahan, pemadaman, pengubahsuaian dan pertanyaan data melalui vue dan Element-plus

Cara melaksanakan fungsi penambahan, pemadaman, pengubahsuaian dan pertanyaan melalui Vue dan Element Plus

Ikhtisar:
Vue ialah rangka kerja progresif untuk membina antara muka pengguna Ia digabungkan dengan Element Plus, perpustakaan komponen UI berdasarkan Vue 2.x , untuk Membantu kami membina antara muka dengan cepat dengan penambahan data, pemadaman, pengubahsuaian dan fungsi pertanyaan. Artikel ini akan memperkenalkan cara menggunakan Vue dan Element Plus untuk melaksanakan fungsi penambahan, pemadaman, pengubahsuaian dan pertanyaan data serta memberikan contoh kod yang sepadan.

1. Pasang dan perkenalkan Element Plus:
   Mula-mula, kita perlu memasang dan memperkenalkan Element Plus, di sini kita memasangnya dengan npm.

Mula-mula, buka alat baris arahan dan tukar ke direktori projek. Jalankan arahan berikut untuk memasang Element Plus:

npm install element-plus --save

Kemudian, perkenalkan gaya dan komponen Element Plus dalam main.js:

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

createApp(App).use(ElementPlus).mount('#app')

2. Buat senarai data dan komponen borang:
   Seterusnya, kami mencipta dua komponen untuk memaparkan senarai dan borang data .

Buat folder komponen dalam direktori src, dan buat dua fail, List.vue dan Form.vue masing-masing.

Antaranya, List.vue digunakan untuk memaparkan senarai data, termasuk pengepala jadual dan baris data. Form.vue ialah borang yang digunakan untuk menambah dan mengedit data.

List.vue contoh kod:

<template>
  <div>
    <el-table :data="data" border>
      <el-table-column prop="id" label="ID"></el-table-column>
      <el-table-column prop="name" label="姓名"></el-table-column>
      <el-table-column prop="age" label="年龄"></el-table-column>
      <el-table-column label="操作">
        <template #default="{row}">
          <el-button type="text" @click="edit(row)">编辑</el-button>
          <el-button type="text" @click="del(row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  props: {
    data: {
      type: Array,
      default: () => []
    }
  },
  methods: {
    edit(row) {
      // 编辑逻辑
    },
    del(row) {
      // 删除逻辑
    }
  }
}
</script>

Form.vue sample code:

<template>
  <div>
    <el-form ref="form" :model="form" :rules="rules">
      <el-form-item label="姓名" prop="name">
        <el-input v-model="form.name"></el-input>
      </el-form-item>
      <el-form-item label="年龄" prop="age">
        <el-input v-model="form.age"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submit">提交</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        name: '',
        age: ''
      },
      rules: {
        name: [
          { required: true, message: '请输入姓名', trigger: 'blur' }
        ],
        age: [
          { required: true, message: '请输入年龄', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    submit() {
      // 提交逻辑
    }
  }
}
</script>

3. Gunakan Senarai dan Borang dalam komponen induk:
   Perkenalkan Senarai dan Borang dalam komponen induk, dan gunakannya untuk memaparkan senarai data dan menambah / Edit borang.

<template>
  <div>
    <List :data="list" />
    <Form />
  </div>
</template>

<script>
import List from './components/List.vue'
import Form from './components/Form.vue'

export default {
  data() {
    return {
      list: [
        { id: 1, name: '张三', age: '20' },
        { id: 2, name: '李四', age: '25' }
      ]
    }
  },
  components: {
    List,
    Form
  }
}
</script>

Dalam komponen induk, kami menghantar tatasusunan senarai yang mengandungi data kepada atribut data komponen Senarai, dan kemudian memberikan senarai data melalui gelung v-untuk dalam komponen Senarai.

4. Laksanakan fungsi baharu dan penyuntingan:
   Dalam kaedah komponen Senarai, kita boleh melaksanakan logik penyuntingan dan pemadaman data. Kaedah pelaksanaan khusus adalah seperti berikut:

edit(row) {
  // 编辑逻辑
  this.editingData = { ...row }
  this.showForm = true
},
del(row) {
  // 删除逻辑
  const index = this.data.indexOf(row)
  this.data.splice(index, 1)
}

Dalam kaedah komponen Borang, kita boleh melaksanakan logik menambah dan menyunting data. Kaedah pelaksanaan khusus adalah seperti berikut:

submit() {
  // 提交逻辑
  this.$refs.form.validate((valid) => {
    if (valid) {
      // 表单验证通过
      if (this.editingData) {
        // 编辑数据
        const index = this.data.findIndex(item => item.id === this.editingData.id)
        this.data.splice(index, 1, this.editingData)
      } else {
        // 新增数据
        const id = Math.max(...this.data.map(item => item.id)) + 1
        this.data.push({ ...this.form, id })
      }
      this.resetForm()
    } else {
      // 表单验证未通过
      return false
    }
  })
},
resetForm() {
  // 重置表单
  this.editingData = null
  this.form = {
    name: '',
    age: ''
  }
  this.$refs.form.resetFields()
}

Contoh kod di atas menunjukkan cara melaksanakan fungsi penambahan, pemadaman, pengubahsuaian dan pertanyaan melalui Vue dan Element Plus. Gunakan komponen Senarai untuk memaparkan senarai data dan gunakan komponen Borang untuk melaksanakan borang untuk menambah dan mengedit data. Menggunakan komunikasi antara komponen ibu bapa dan anak, kami boleh merealisasikan pemindahan dan kemas kini data, dengan itu merealisasikan operasi penambahan, pemadaman, pengubahsuaian dan pertanyaan data.

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