08 VUEプロジェクト添加元素-UI表示テーブル

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

1、拘束の前提

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

2、手順

• Vueが要素-VUEのためのプロジェクト名を想定し、プロジェクトテンプレートを作成し、正常に起動するために足場
  https://www.jianshu.com/p/644eb12a8174
• 要素-UI jsのパッケージをダウンロードしてください

cd vue-element
cnpm install element-ui --save-dev

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

import ElementUI from 'element-ui'
Vue.use(ElementUI)

• モックのフォルダ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>
    <!--相当于编写html的内容-->
    <el-table
      :data="tableData"
      stripe
      style="width: 100%">
      <el-table-column
        prop="id"
        label="编号"
        width="180">
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名"
        width="180">
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
import tableData from '../mock/table.js'
  export default {
    data() {
      return {
        tableData: []
      }
    },
    created () {
        this.tableData = tableData;
    }
  }
</script>

• コンパイルと起動

npm run build
npm run dev

心配は中央にありません表示されるプロンプトアクセスURLは、フォームを見ることができます[I]：

上記プロジェクトVUE要素UI表示データの処理です。