Vue と Element-UI を使用してデータを動的にロードするテーブルを作成する方法

Vue と Element-UI を使用してデータを動的にロードするテーブルを作成する方法

現代の Web 開発では、データ テーブルは一般的なインターフェイス コンポーネントの 1 つです。 Vue.js は現在非常に人気のあるフロントエンド フレームワークであり、Element-UI は Vue.js に基づいて開発されたコンポーネント ライブラリのセットであり、使用できる豊富な UI コンポーネントのセットを提供します。この記事では、Vue と Element-UI を使用してデータを動的にロードできるテーブルを作成する方法と、対応するコード例を紹介します。

まず、Vue と 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)

次に、テーブルを表示するための Vue コンポーネントを作成する必要があります。

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

上記のコードでは、el-table コンポーネントと el-pagination コンポーネントを使用して、テーブル表示およびページング関数を実装しています。 tableData はバックグラウンド インターフェイスから取得したデータです。created ライフ サイクル フックの getData メソッドを呼び出してデータを初期化します。 handleSizeChange メソッドと handleCurrentChange メソッドは、それぞれ、各ページに表示される項目数の変更と現在のページの変更を処理するために使用されます。これら 2 つのメソッドは、ユーザーが各ページに表示されるアイテムの数を変更したとき、およびユーザーがページ番号をクリックしたときに呼び出されます。ここで 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 コンポーネントを使用します。 。この記事が Vue.js と Element-UI の学習に役立つことを願っています。

以上がVue と Element-UI を使用してデータを動的にロードするテーブルを作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。