vueとElement-plusによるデータの追加、削除、変更、クエリ機能の実装方法

Vue と Element Plus を使用してデータの追加、削除、変更、クエリ機能を実装する方法

概要:
Vue は、ユーザー インターフェイスを構築するための進歩的なフレームワークであり、ベースの Element Plus に似ています。 Vue 2.x では、UI コンポーネント ライブラリを組み合わせることで、データの追加、削除、変更、クエリ機能を備えたインターフェイスを迅速に構築できます。この記事では、Vue と Element Plus を使用してデータの追加、削除、変更、クエリ機能を実装する方法と、対応するコード例を紹介します。

1. Element Plus のインストールと導入:
   まず、Element Plus をインストールして導入する必要があります。ここでは npm を使用してインストールします。

まず、コマンド ライン ツールを開き、プロジェクト ディレクトリに切り替えます。次のコマンドを実行して Element Plus をインストールします:

npm install element-plus --save

次に、Element Plus のスタイルとコンポーネントを main.js に導入します:

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

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

2. データ リストとフォーム コンポーネントを作成します:
   Connect次に、データリストとフォームを表示する 2 つのコンポーネントを作成します。

src ディレクトリにコンポーネント フォルダーを作成し、List.vue と Form.vue という 2 つのファイルをそれぞれ作成します。

このうち、List.vue はテーブル ヘッダーやデータ行を含むデータ リストを表示するために使用されます。 Form.vue は、データの追加と編集に使用されるフォームです。

List.vue サンプル コード:

<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 サンプル コード:

<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. 親コンポーネントで List と Form を使用する:
   親コンポーネント内コンポーネント ListとFormを導入し、データ一覧の表示やフォームの追加・編集に使用します。

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

親コンポーネントでは、データを含むリスト配列を List コンポーネントの data 属性に渡し、List コンポーネントの v-for ループを通じてデータ リストをレンダリングします。

4. 新しい関数と編集関数の実装:
   List コンポーネントのメソッドで、データの編集と削除のロジックを実装できます。具体的な実装方法は次のとおりです。

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

Form コンポーネントのメソッドで、データの追加と編集のロジックを実装できます。具体的な実装方法は次のとおりです。

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

上記のコード例は、Vue と Element Plus を使用してデータの追加、削除、変更、クエリ機能を実装する方法を示しています。 List コンポーネントを使用してデータリストを表示し、Form コンポーネントを使用してデータを追加および編集するためのフォームを実装します。親コンポーネントと子コンポーネント間の通信を利用して、データの転送や更新を実現し、データの追加、削除、変更、問い合わせなどの操作を実現します。

以上がvueとElement-plusによるデータの追加、削除、変更、クエリ機能の実装方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。