Vue에서 데이터 추가, 삭제, 수정, 쿼리를 구현하고 대화 상자와 결합하는 방법

최근 몇 년간 프론트엔드 기술의 지속적인 발전으로 Vue는 점점 더 많은 개발자가 선택하는 프론트엔드 프레임워크가 되었습니다. 그 중 프런트엔드 데이터의 추가, 삭제, 수정, 조회 등은 웹 애플리케이션의 가장 기본적인 기능 중 하나이다. Vue에서 대화상자를 띄우면서 추가, 삭제, 수정, 확인은 어떻게 하나요? 다음으로 이 기사에서는 Vue에서 데이터를 추가, 삭제, 수정 및 쿼리하는 방법과 대화 상자를 결합하여 사용자 상호 작용을 향상시키는 방법을 소개합니다.

1. 사전 준비

Vue를 연습하기 전에 다음 기술을 이해하고 숙지해야 합니다.

1. Vue에 대한 기본 지식: 구성 요소, 데이터 바인딩, 메서드, 수명 주기 및 기타 관련 콘텐츠 포함; : 테이블, 대화 상자, 드롭다운 상자 등을 포함한 풍부한 UI 구성 요소 세트를 제공하는 Vue2.0 기반의 UI 구성 요소 라이브러리
2. Webpack: 여러 JavaScript 파일을 하나로 결합할 수 있는 최신 리소스 관리자 로딩 시간을 줄이기 위한 파일입니다.
3. 2. 추가, 삭제, 수정 및 확인 작업 구현

데이터 초기화

1. Vue에서는 데이터 옵션을 사용하여 데이터를 정의합니다. 먼저 Vue 인스턴스에 데이터 객체를 정의하고 여기에 데이터를 저장하기 위한 변수를 추가합니다. 다음과 같은 간단한 테이블을 예로 들어 보겠습니다.

<template>
  <div>
    <el-table :data="tableData">
      ...
    </el-table>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        tableData: []
      }
    }
  }
</script>

데이터 추가 작업 구현

2. Vue에서 데이터 추가를 구현하려면 v-model 명령어를 사용해야 합니다. Vue 인스턴스를 사용한 양식 요소의 데이터입니다. 양식의 값이 변경되면 해당 데이터도 업데이트됩니다. 예를 들어 테이블에 데이터 조각을 추가하는 경우 다음 코드를 통해 수행할 수 있습니다.

<el-form>
  <el-form-item label="Name">
    <el-input v-model="name"></el-input>
  </el-form-item>
  <el-form-item label="Age">
    <el-input v-model="age"></el-input>
  </el-form-item>
  <el-form-item>
    <el-button @click="addData">Add Data</el-button>
  </el-form-item>
</el-form>

<script>
  export default {
    data() {
      return {
        tableData: [],
        name: '',
        age: ''
      }
    },
    methods: {
      addData() {
        this.tableData.push({name: this.name, age: this.age})
        this.name = ''
        this.age = ''
      }
    }
  }
</script>

데이터 삭제 작업 구현

3. Vue에서 데이터 삭제 작업은 매우 일반적인 작업이며 삭제는 버튼이나 링크를 클릭하면 달성됩니다. Vue에서는 v-for 명령어를 사용하여 테이블 데이터를 반복하고 이벤트를 통해 해당 삭제 함수를 호출할 수 있습니다. 다음은 데이터 삭제 코드 구현입니다.

<el-table :data="tableData">
  <el-table-column label="Name">
    <template slot-scope="scope">{{ scope.row.name }}</template>
  </el-table-column>
  <el-table-column label="Age">
    <template slot-scope="scope">{{ scope.row.age }}</template>
  </el-table-column>
  <el-table-column label="Actions">
    <template slot-scope="scope">
      <el-button type="danger" @click="deleteData(scope.$index)">Delete</el-button>
    </template>
  </el-table-column>
</el-table>

<script>
  export default {
    data() {
      return {
        tableData: []
      }
    },
    methods: {
      deleteData(index) {
        this.tableData.splice(index, 1)
      }
    }
  }
</script>

데이터 편집 작업 구현

4. Vue에서 데이터 편집 작업은 두 단계로 나누어야 합니다. 하나는 편집된 데이터를 형식에 표시하는 것이고, 다른 하나는 수정된 데이터를 표시하는 것입니다. 데이터가 서버에 제출됩니다. v-model 명령을 통해 편집된 데이터를 양식에 표시한 후 양식을 제출하여 수정된 데이터를 제출할 수 있습니다. 다음은 데이터 편집을 위한 코드 구현입니다.

<el-table :data="tableData">
  <el-table-column label="Name">
    <template slot-scope="scope">{{ scope.row.name }}</template>
  </el-table-column>
  <el-table-column label="Age">
    <template slot-scope="scope">{{ scope.row.age }}</template>
  </el-table-column>
  <el-table-column label="Actions">
    <template slot-scope="scope">
      <el-button @click="editData(scope.row)">Edit</el-button>
    </template>
  </el-table-column>
</el-table>

<el-dialog :visible.sync="dialogVisible">
  <el-form>
    <el-form-item label="Name">
      <el-input v-model="editRow.name"></el-input>
    </el-form-item>
    <el-form-item label="Age">
      <el-input v-model="editRow.age"></el-input>
    </el-form-item>
  </el-form>
  <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">Cancel</el-button>
    <el-button type="primary" @click="updateData">OK</el-button>
  </span>
</el-dialog>

<script>
  export default {
    data() {
      return {
        tableData: [],
        dialogVisible: false,
        editRow: {}
      }
    },
    methods: {
      editData(row) {
        this.dialogVisible = true
        this.editRow = Object.assign({}, row)
      },
      updateData() {
        const index = this.tableData.indexOf(this.editRow)
        Object.assign(this.tableData[index], this.editRow)
        this.dialogVisible = false
      }
    }
  }
</script>

3. 대화 상자와 결합하여 대화형 효과를 얻습니다.

Vue의 요소 UI 구성 요소 라이브러리는 팝업을 쉽게 구현할 수 있는 대화 상자 구성 요소를 포함하여 풍부한 구성 요소 세트를 제공합니다. 대화 상자 효과. Vue에서 Dialog 컴포넌트를 구현하려면 Element UI 컴포넌트 라이브러리의 도입이 필요합니다. 다음은 Dialog 컴포넌트의 코드 구현입니다.

<el-dialog :visible.sync="dialogVisible">
  <span slot="title">Edit Data</span>
  <el-form>
    <el-form-item label="Name">
      <el-input v-model="editRow.name"></el-input>
    </el-form-item>
    <el-form-item label="Age">
      <el-input v-model="editRow.age"></el-input>
    </el-form-item>
  </el-form>
  <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">Cancel</el-button>
    <el-button type="primary" @click="updateData">OK</el-button>
  </span>
</el-dialog>

<script>
  export default {
    data() {
      return {
        dialogVisible: false,
        editRow: {}
      }
    },
    methods: {
      editData(row) {
        this.dialogVisible = true
        this.editRow = Object.assign({}, row)
      },
      updateData() {
        ...
        this.dialogVisible = false
      }
    }
  }
</script>

4. 결론

이번 글에서는 주로 다음과 같은 기본적인 기능을 구현하는 방법을 소개합니다. Vue에서는 추가, 삭제, 수정 및 검색과 동시에 대화 상자 구성 요소를 결합하여 사용자 상호 작용을 향상시키는 효과를 얻습니다. 실제 개발에서는 필요에 따라 상응하는 수정과 개선이 필요하다는 점에 유의해야 합니다. 사용 중에는 코드 효율성과 가독성은 물론 코드와 HTML의 분리 및 기타 관련 문제에 주의를 기울여야 합니다.

위 내용은 Vue에서 데이터 추가, 삭제, 수정, 쿼리를 구현하고 대화 상자와 결합하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!