Cara membuat jadual yang memuatkan data secara dinamik menggunakan Vue dan Element-UI

Cara menggunakan Vue dan Element-UI untuk mencipta jadual yang memuatkan data secara dinamik

Dalam pembangunan web moden, jadual data ialah salah satu komponen antara muka biasa. Vue.js ialah rangka kerja bahagian hadapan yang sangat popular pada masa kini, dan Element-UI ialah perpustakaan komponen yang dibangunkan berdasarkan Vue.js, yang menyediakan set komponen UI yang kaya untuk kami gunakan. Artikel ini akan memperkenalkan cara menggunakan Vue dan Element-UI untuk mencipta jadual yang boleh memuatkan data secara dinamik dan memberikan contoh kod yang sepadan.

Pertama, kita perlu memasang dan memperkenalkan Vue dan Element-UI.

// 安装Vue
npm install vue

// 引入Vue
import Vue from 'vue'

// 安装Element-UI
npm install element-ui

// 引入Element-UI
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

// 使用Element-UI
Vue.use(ElementUI)

Seterusnya, kita perlu mencipta komponen Vue untuk memaparkan jadual.

<template>
  <div>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="name" label="姓名"></el-table-column>
      <el-table-column prop="age" label="年龄"></el-table-column>
      <el-table-column prop="gender" label="性别"></el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :page-size="pageSize"
      :total="total"
      layout="prev, pager, next"
      style="margin-top: 20px"
    >
    </el-pagination>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
      currentPage: 1,
      pageSize: 10,
      total: 0
    }
  },
  created() {
    this.getData()
  },
  methods: {
    getData() {
      // 发送请求获取数据
      // 这里假设我们通过接口获取了一个包含多条数据的数组
      // 假设接口返回的数据格式为：{ data: [], total: 0 }
      // data是一个数组，total是数据的总数
      // 这里省略了具体的请求代码
      const response = { data: [{ name: '张三', age: 18, gender: '男' }, { name: '李四', age: 20, gender: '女' }], total: 2 }
      
      this.tableData = response.data
      this.total = response.total
    },
    handleSizeChange(size) {
      this.pageSize = size
      this.getData()
    },
    handleCurrentChange(page) {
      this.currentPage = page
      this.getData()
    }
  }
}
</script>

Dalam kod di atas, kami menggunakan komponen el-table dan komponen el-pagination untuk melaksanakan paparan jadual dan fungsi halaman. tableData ialah data yang kami peroleh daripada antara muka latar belakang Panggil kaedah getData dalam cangkuk kitaran hayat dibuat untuk memulakan data. Kaedah handleSizeChange dan handleCurrentChange digunakan untuk mengendalikan perubahan dalam bilangan item yang dipaparkan pada setiap halaman dan perubahan dalam halaman semasa masing-masing. Kedua-dua kaedah ini akan dipanggil apabila pengguna menukar bilangan item yang dipaparkan pada setiap halaman dan apabila pengguna mengklik pada nombor halaman Di sini kami memanggil semula kaedah getData untuk mendapatkan data yang sepadan. el-table组件和一个el-pagination组件来实现表格的展示和分页功能。tableData是我们从后台接口获取的数据，在created生命周期钩子中调用getData方法来初始化数据。handleSizeChange和handleCurrentChange方法分别用来处理每页显示条数的变化和当前页的变化。这两个方法在用户改变每页显示条数时和用户点击页码时会被调用，我们在这里重新调用getData方法来获取对应的数据。

最后，在我们的入口文件中注册该组件，并启动Vue实例。

// 引入我们之前创建的组件
import DynamicTable from './DynamicTable.vue'

// 创建Vue实例
new Vue({
  el: '#app',
  components: {
    DynamicTable
  },
  template: '<DynamicTable />'
})

至此，我们就完成了使用Vue和Element-UI创建动态加载数据的表格。我们通过调用接口获取数据，并通过分页来控制显示的数据量，以及展示数据表格和分页组件，完成整个功能。

总结：

本文介绍了如何使用Vue和Element-UI来创建一个动态加载数据的表格。我们通过调用接口获取数据，并通过分页来控制每页显示的数据量，使用el-table组件和el-pagination

Akhir sekali, daftarkan komponen dalam fail kemasukan kami dan mulakan contoh Vue. 🎜rrreee🎜Pada ketika ini, kami telah menyelesaikan penggunaan Vue dan Element-UI untuk mencipta jadual yang memuatkan data secara dinamik. Kami memperoleh data dengan memanggil antara muka, mengawal jumlah data yang dipaparkan melalui halaman, dan memaparkan jadual data dan komponen halaman untuk melengkapkan keseluruhan fungsi. 🎜🎜Ringkasan: 🎜🎜Artikel ini memperkenalkan cara menggunakan Vue dan Element-UI untuk mencipta jadual yang memuatkan data secara dinamik. Kami memperoleh data dengan memanggil antara muka dan mengawal jumlah data yang dipaparkan pada setiap halaman melalui halaman Kami menggunakan komponen el-table dan komponen el-pagination untuk memaparkan. jadual data dan komponen halaman . Saya harap artikel ini akan membantu anda mempelajari Vue.js dan Element-UI. 🎜

Atas ialah kandungan terperinci Cara membuat jadual yang memuatkan data secara dinamik menggunakan Vue dan Element-UI. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!