Bagaimana untuk melaksanakan penambahan, pemadaman, pengubahsuaian dan pertanyaan data dalam Vue dan menggabungkannya dengan kotak dialog

Dalam beberapa tahun kebelakangan ini, dengan pembangunan berterusan teknologi bahagian hadapan, Vue telah menjadi rangka kerja bahagian hadapan yang dipilih oleh semakin ramai pembangun. Antaranya, penambahan, pemadaman, pengubahsuaian dan pertanyaan data bahagian hadapan adalah salah satu fungsi paling asas dalam aplikasi web. Dalam Vue, bagaimana untuk menambah, memadam, mengubah suai dan menyemak semasa muncul kotak dialog? Seterusnya, artikel ini akan memperkenalkan anda kepada cara menambah, memadam, mengubah suai dan bertanya data dalam Vue, dan cara menggabungkan kotak dialog untuk meningkatkan interaktiviti pengguna.

1. Persediaan

Sebelum mengamalkan Vue, kita perlu memahami dan menguasai teknologi berikut:

1. Pengetahuan asas Vue: termasuk komponen dan pengikatan data, kaedah , kitaran hayat dan kandungan lain yang berkaitan; 🎜>
Webpack: Pengurus sumber moden yang boleh menggabungkan berbilang fail JavaScript ke dalam satu fail untuk mengurangkan masa pemuatan.
3. 2 Laksanakan operasi tambah, padam, ubah suai dan semak

Pengamatan data

1. Dalam Vue, kami menggunakan pilihan data untuk menentukan data. Mula-mula tentukan objek data dalam contoh Vue dan tambahkan pembolehubah untuk menyimpan data di dalamnya. Ambil jadual ringkas sebagai contoh, seperti berikut:

Laksanakan operasi menambah data

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

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

2. Pelaksanaan penambahan data dalam Vue memerlukan penggunaan Arahan model v Fungsi arahan ini adalah untuk mengikat elemen bentuk dan data contoh Vue secara dua hala. Apabila nilai borang berubah, data yang sepadan juga akan dikemas kini. Sebagai contoh, jika kita menambah sekeping data pada jadual, kita boleh melakukannya melalui kod berikut:

Melaksanakan pemadaman operasi data

<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. Pemadaman operasi data dalam Vue adalah sangat mudah Operasi biasa adalah untuk memadam dengan mengklik butang atau pautan. Dalam Vue, anda boleh menggunakan arahan v-for untuk mengulang data jadual dan memanggil fungsi padam yang sepadan melalui acara. Berikut ialah pelaksanaan kod untuk memadam data:

Melaksanakan operasi penyuntingan data

<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. Dalam Vue, operasi data penyuntingan perlu dibahagikan kepada dua langkah : Pertama, operasi data yang diedit perlu dibahagikan kepada dua langkah: Data yang diedit dipaparkan dalam borang, dan yang kedua ialah menyerahkan data yang diubah suai kepada pelayan. Anda boleh memaparkan data yang diedit dalam borang melalui arahan model v, dan kemudian menyerahkan data yang diubah suai dengan menyerahkan borang. Berikut ialah pelaksanaan kod untuk mengedit data:

3 Menggabungkan kotak dialog untuk mencapai kesan interaktif

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

Pustaka komponen UI Elemen dalam Vue menyediakan banyak komponen, termasuk komponen dialog. , ia boleh mencapai kesan kotak dialog pop timbul dengan mudah. Dalam Vue, pelaksanaan komponen dialog memerlukan pengenalan pustaka komponen UI Elemen Berikut ialah pelaksanaan kod komponen dialog:

4. Kesimpulan

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

Artikel ini. terutamanya memperkenalkan penggunaan komponen dalam Vue Kaedah ini melaksanakan fungsi asas seperti penambahan, pemadaman, pengubahsuaian dan pertanyaan, dan menggabungkan komponen dialog untuk mencapai kesan meningkatkan interaktiviti pengguna. Perlu diingatkan bahawa dalam pembangunan sebenar, kita perlu membuat pengubahsuaian dan penambahbaikan yang sepadan mengikut keperluan Semasa penggunaan, kita mesti memberi perhatian kepada kecekapan dan kebolehbacaan kod, serta pemisahan kod dan HTML dan isu lain yang berkaitan.

Atas ialah kandungan terperinci Bagaimana untuk melaksanakan penambahan, pemadaman, pengubahsuaian dan pertanyaan data dalam Vue dan menggabungkannya dengan kotak dialog. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!