Vue+mockjs+element-uiは動的テーブルヘッダー+ページャーを実装します

1. キーと値のペア形式の配列オブジェクト

<エルテーブル

現在の行を強調表示する

:data="tableData.slice((currentPage-1)*ページサイズ,currentPage*ページサイズ)"

国境

スタイル="幅: 100%">

<el-table-column :key="index" :prop="col.prop" :label="col.label" align="center">

</el-テーブル-カラム>

</テンプレート>

</el-テーブル>

// ポケベル

<エルページネーション

style="テキスト配置: 中央"

@size-change="ハンドルサイズ変更"

@current-change="ハンドル現在の変更"

:current-page="現在のページ"

:page-sizes="[100, 200, 300, 400]"

:page-size="ページサイズ"

レイアウト = "合計、サイズ、前、ページャー、次、ジャンパー"

:total="テーブルデータ.長さ">

</el-ページネーション>

const Mock = require('mockjs') // テストデータ

リーダー: [

{ プロパティ: '327'、ラベル: 'ヘッダー 1' }、

{ プロパティ: '328'、ラベル: 'ヘッダー 2' },

{ プロパティ: '329'、ラベル: 'ヘッダー 3' }、

{ プロパティ: '330'、ラベル: 'ヘッダー 4' }

]、

テーブルデータ: [

{ 327: '24'、328: '20'、329: '18'、330: '2' }、

{ 327: '22'、328: '20'、329: '18'、330: '2' }、

{ 327: '51'、328: '21'、329: '20'、330: '6' }、

{ 327: '21'、328: '20'、329: '18'、330: '2' }

】

現在のページ: 1、

ページサイズ: 5

マウントされた() {

this.getlist()

}、

メソッド: {

// モックJSデータ

getlist() {

定数データ = {

'リスト|15': [{

'id|+1': 1、

// 'id': '@guid',

'名前': '@cword(3)',

'ネット': '@cword(3)',

'システム': '@cword(6)',

'タイトル': '@cword(5)',

'ベンダー': '@city()' + '@cword(2)' + '限定限定',

'タイプ': /[AZ]{2,5}-\d{5,7}/,

'行': '@cword(2,3)' + '行',

'ショップ': '@cword(3,5)' + 'コミュニケーションワークショップ'

}]

}

const 結果 = Mock.mock(データ)

const title = ['ID', '行', '名前', 'ネット', 'ショップ', 'システム', 'タイトル', '種類', 'メーカー']

const tableHeade = []

Object.keys(result.list[0]).forEach((key, i) => {

tableHeade.push({ プロパティ: キー, ラベル: タイトル[i] })

})

this.theader = tableHeade

this.tableData = 結果.リスト

}

}、

handleSizeChange(val) {

this.pagesize = val

// this.$message.success(`1 ページあたり ${val} メッセージ`)

}、

handleCurrentChange(val) {

this.currentPage = val

// this.$message.success(`現在のページ: ${val}`)

}

2. 配列リスト形式

<el-table :data="table_content.slice((currentPage-1)*pagesize,currentPage*pagesize)" ボーダーストライプ>

<el-table-column :label="item" v-for="(item, idx) in table_head" :key="idx" align="center">

<template slot-scope="scope">{ { table_content[scope.$index][idx] }}</template>

</el-テーブル-カラム>

</el-テーブル>

// ポケベル

<エルページネーション

style="テキスト配置: 中央"

@size-change="ハンドルサイズ変更"

@current-change="ハンドル現在の変更"

:current-page="現在のページ"

:page-sizes="[100, 200, 300, 400]"

:page-size="ページサイズ"

レイアウト = "合計、サイズ、前、ページャー、次、ジャンパー"

:total="テーブルコンテンツ.長さ">

</el-ページネーション>

// ヘッダーデータ

table_head: ['テーブルヘッダー 1', 'テーブルヘッダー 2', 'テーブルヘッダー 3', 'テーブルヘッダー 4'],

// テーブルコンテンツデータ

テーブルコンテンツ: [

['24', '20', '18', '2'],

['22', '20', '18', '2'],

['51', '21', '20', '6'],

['21'、'20'、'18'、'2']

】