05 VUEプロジェクトがeasytable追加しました

このセクションでは、easytableでデータが表示されます。

1、拘束の前提

完全なインストールnodejs、VUE-CLI、WebPACKの、 WebPACKの-devのサーバーの
https://www.jianshu.com/p/eb4d9e132f62

2、手順

• Vueがプロジェクト名はEasyTable-VUEであると仮定すると、プロジェクトテンプレートを作成し、正常に起動するために足場
  https://www.jianshu.com/p/644eb12a8174
• JSパッケージのダウンロードeasytable

cd vue-easytable
cnpm install vue-easytable --save-dev

• main.jsを変更し、以下を追加します

import 'vue-easytable/libs/themes-base/index.css'
import {VTable, VPagination} from 'vue-easytable'
Vue.component(VTable.name, VTable)
Vue.component(VPagination.name, VPagination)

• モックのフォルダtable.jsを作成し、srcフォルダの下にモックフォルダを作成します

export default [
  { 'id': '1', 'name': 'xiaoli' },
  { 'id': '2', 'name': 'jiangsu' },
  { 'id': '3', 'name': 'ali' },
  { 'id': '4', 'name': 'zhangli' },
  { 'id': '5', 'name': 'wanhe' },
]

• 修正HelloWorld.vue

<template>
  <div class="tablePage">
    <h1>表格+分页</h1>
    <!-- 表格-->
    <v-table
      :columns="tableConfig.columns"
      :table-data="tableConfig.tableData"
      :paging-index="(pageIndex-1)*pageSize"
    ></v-table>
    <!-- 分页-->
  </div>
</template>
<script>
import tableData from '../mock/table.js'
export default {
  name: 'db',
  data () {
    return {
      pageIndex: 1,
      pageSize: 10,
      total: '',
      tableConfig: {
        tableData: [],
        columns: [
          {
            field: 'id',
            title: '编号',
            width: 50,
            columnAlign: 'center'
          },
          {
            field: 'name',
            title: '姓名',
            width: 120,
            columnAlign: 'center'
          }
        ]
      }
    }
  },
  created () {
    this.getTableData()
  },
  methods: {
    query () {
      this.tableConfig.tableData = tableData;
    }
  },
  mounted () {
    this.query()
  }
}
</script>

• コンパイルと起動

npm run build
npm run dev

プロンプトアクセスURL、フォームは、[I]中心の心配を示さなかっ見ることができます：

上記のデータを表示することにより、easytable VUEプロジェクトの過程です。