Vue와 Element-plus를 통해 데이터 추가, 삭제, 수정, 조회 기능을 구현하는 방법

Vue 및 Element Plus를 통해 데이터 추가, 삭제, 수정 및 쿼리 기능을 구현하는 방법

개요:
Vue는 사용자 인터페이스 구축을 위한 진보적인 프레임워크이며 Vue 2.x 기반의 UI 구성 요소 라이브러리인 Element Plus와 결합됩니다. , 데이터 추가, 삭제, 수정 및 쿼리 기능을 갖춘 인터페이스를 신속하게 구축할 수 있도록 도와줍니다. 이 기사에서는 Vue 및 Element Plus를 사용하여 데이터 추가, 삭제, 수정 및 쿼리 기능을 구현하는 방법을 소개하고 해당 코드 예제를 제공합니다.

1. Element Plus 설치 및 소개:
   먼저 Element Plus를 설치하고 소개해야 합니다. 여기서는 npm을 사용하여 설치합니다.

먼저 명령줄 도구를 열고 프로젝트 디렉터리로 전환합니다. 다음 명령을 실행하여 Element Plus를 설치합니다.

npm install element-plus --save

그런 다음 main.js에 Element Plus 스타일과 구성 요소를 도입합니다.

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

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

2. 데이터 목록 및 양식 구성 요소 만들기:
   다음으로 데이터 목록과 양식을 표시하는 두 가지 구성 요소를 만듭니다. .

src 디렉터리에 구성 요소 폴더를 만들고 각각 List.vue 및 Form.vue라는 두 개의 파일을 만듭니다.

그 중 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!