So erstellen Sie eine Tabelle, die Daten mithilfe von Vue und Element-UI dynamisch lädt

So erstellen Sie mit Vue und Element-UI eine Tabelle, die Daten dynamisch lädt.

In der modernen Webentwicklung sind Datentabellen eine der häufigsten Schnittstellenkomponenten. Vue.js ist heutzutage ein sehr beliebtes Front-End-Framework, und Element-UI ist eine Reihe von Komponentenbibliotheken, die auf Basis von Vue.js entwickelt wurden und uns einen umfangreichen Satz an UI-Komponenten zur Verfügung stellen. In diesem Artikel wird erläutert, wie Sie mit Vue und Element-UI eine Tabelle erstellen, die Daten dynamisch laden kann, und entsprechende Codebeispiele geben.

Zuerst müssen wir Vue und Element-UI installieren und einführen.

// 安装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)

Als nächstes müssen wir eine Vue-Komponente erstellen, um die Tabelle anzuzeigen.

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

Im obigen Code verwenden wir eine el-table-Komponente und eine el-pagination-Komponente, um die Tabellenanzeige- und Paging-Funktionen zu implementieren. tableData sind die Daten, die wir von der Hintergrundschnittstelle erhalten. Rufen Sie die Methode getData im Lebenszyklus-Hook created auf, um die Daten zu initialisieren. Die Methoden handleSizeChange und handleCurrentChange werden verwendet, um Änderungen in der Anzahl der auf jeder Seite angezeigten Elemente bzw. Änderungen auf der aktuellen Seite zu verarbeiten. Diese beiden Methoden werden aufgerufen, wenn der Benutzer die Anzahl der auf jeder Seite angezeigten Elemente ändert und wenn der Benutzer auf die Seitenzahl klickt. Hier rufen wir die Methode getData erneut auf, um die entsprechenden Daten zu erhalten. 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

Das obige ist der detaillierte Inhalt vonSo erstellen Sie eine Tabelle, die Daten mithilfe von Vue und Element-UI dynamisch lädt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!