Cara menggunakan Vue dan Element-UI untuk melaksanakan jadual data boleh diedit

Cara menggunakan Vue dan Element-UI untuk melaksanakan jadual data boleh diedit

Pengenalan:
Dalam pembangunan Web, jadual data ialah komponen yang sangat biasa ia boleh memaparkan sejumlah besar data dalam bentuk jadual, dan boleh mengisih, menapis dan Pengeditan dan operasi lain. Artikel ini akan memperkenalkan cara menggunakan Vue dan Element-UI untuk melaksanakan jadual data boleh diedit.

1. Persediaan
Pertama, kita perlu memasang Vue dan Element-UI.

1. Buat projek Vue:

vue create editable-table
cd editable-table

2. Pasang dependensi Elemen-UI:

npm install element-ui -S

3 Perkenalkan Elemen-UI dalam main.js:

import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI)

2. Struktur asas jadual data
. component , kita boleh menggunakan komponen el-table yang disediakan oleh Element-UI untuk mencipta jadual data asas dan menggunakan el-table-column untuk mentakrifkan pengepala jadual dan lajur jadual.

1. Tambahkan kod berikut dalam fail HelloWorld.vue:

<template>
  <div>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column label="姓名" prop="name"></el-table-column>
      <el-table-column label="年龄" prop="age"></el-table-column>
      <el-table-column label="性别" prop="gender"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button @click.native="handleEdit(scope.row)">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: '小明', age: 18, gender: '男' },
        { name: '小红', age: 20, gender: '女' },
        { name: '小李', age: 22, gender: '男' }
      ]
    }
  },
  methods: {
    handleEdit(row) {
      // 实现编辑功能
    }
  }
}
</script>

<style scoped>
</style>

Dalam kod di atas, kami menambah komponen el-butang untuk melaksanakan operasi penyuntingan. Kaedah handleEdit akan dipanggil apabila butang edit diklik, dan data baris semasa boleh diperolehi melalui parameter.

3. Laksanakan fungsi penyuntingan
1. Tambah komponen dialog:

// HelloWorld.vue
<template>
  <div>
    <el-dialog :visible.sync="dialogVisible" title="编辑数据">
      <el-form :model="form" label-width="80px">
        <el-form-item label="姓名">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="年龄">
          <el-input v-model="form.age"></el-input>
        </el-form-item>
        <el-form-item label="性别">
          <el-input v-model="form.gender"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="saveData">保存</el-button>
      </div>
    </el-dialog>

    <el-table :data="tableData" style="width: 100%">
      <!-- ...省略其他代码... -->
    </el-table>
  </div>
</template>

<script>
import { cloneDeep } from 'lodash'

export default {
  data() {
    return {
      tableData: [
        { name: '小明', age: 18, gender: '男' },
        { name: '小红', age: 20, gender: '女' },
        { name: '小李', age: 22, gender: '男' }
      ],
      dialogVisible: false,
      form: {}
    }
  },
  methods: {
    handleEdit(row) {
      this.form = cloneDeep(row)
      this.dialogVisible = true
    },
    saveData() {
      // 根据实际需求实现保存逻辑
      this.dialogVisible = false
    }
  }
}
</script>

Dalam kod di atas, kami menambah komponen el-dialog untuk muncul kotak dialog untuk mengedit data. Apabila butang edit diklik, kami menyalin data baris ke objek borang dan menetapkan sifat boleh dilihat kotak dialog kepada benar, iaitu, kotak dialog dibuka.

2. Laksanakan logik menyimpan data:
Dalam kaedah saveData, kita boleh menyimpan data yang diubah suai ke bahagian belakang atau storan tempatan mengikut keperluan sebenar.

4 Ringkasan:
Dengan menggunakan Vue dan Element-UI, kami boleh membina jadual data boleh diedit dengan cepat. Kami mencipta jadual data asas melalui komponen el-table dan komponen el-table-column, dan melaksanakan fungsi penyuntingan data melalui komponen el-button dan el-dialog. Dalam projek sebenar, kami boleh menyesuaikan dan mengoptimumkan lagi borang mengikut keperluan untuk memenuhi keperluan khusus projek.

Di atas ialah pengenalan ringkas dan kod contoh untuk menggunakan Vue dan Element-UI untuk melaksanakan jadual data boleh edit, saya harap ia akan membantu anda!

Atas ialah kandungan terperinci Cara menggunakan Vue dan Element-UI untuk melaksanakan jadual data boleh diedit. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!