How to create a table that dynamically loads data using Vue and Element-UI

How to use Vue and Element-UI to create a table that dynamically loads data

In modern web development, data tables are one of the common interface components. Vue.js is a very popular front-end framework nowadays, and Element-UI is a set of component libraries developed based on Vue.js, which provides a rich set of UI components for us to use. This article will introduce how to use Vue and Element-UI to create a table that can dynamically load data, and give corresponding code examples.

First, we need to install and introduce Vue and 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)

Next, we need to create a Vue component to display the table.

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

In the above code, we use a el-table component and a el-pagination component to implement the table display and paging functions. tableData is the data we obtain from the background interface. Call the getData method in the created life cycle hook to initialize the data. The handleSizeChange and handleCurrentChange methods are used to handle changes in the number of items displayed on each page and changes in the current page respectively. These two methods will be called when the user changes the number of items displayed on each page and when the user clicks on the page number. We re-call the getData method here to obtain the corresponding data.

Finally, register the component in our entry file and start the Vue instance.

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

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

At this point, we have completed using Vue and Element-UI to create a table that dynamically loads data. We obtain data by calling the interface, control the amount of displayed data through paging, and display data tables and paging components to complete the entire function.

Summary:

This article introduces how to use Vue and Element-UI to create a table that dynamically loads data. We obtain data by calling the interface and control the amount of data displayed on each page through paging. We use el-table components and el-pagination components to display data tables and paging components. I hope this article will be helpful for you to learn Vue.js and Element-UI.

The above is the detailed content of How to create a table that dynamically loads data using Vue and Element-UI. For more information, please follow other related articles on the PHP Chinese website!