本節(jié)我們將通過easytable顯示數(shù)據(jù)。

1、前提約束

完成nodejs，vue-cli，webpack，webpack-dev-server的安裝
http://m.itdecent.cn/p/eb4d9e132f62

2、操作步驟

• 使用腳手架創(chuàng)建一個vue項目模板并啟動成功，假設項目名稱為vue-element
  http://m.itdecent.cn/p/644eb12a8174
• 下載element-ui的js包

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

• 修改main.js，加入以下內(nèi)容

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

• 在src文件夾下創(chuàng)建mock文件夾，在mock文件夾下創(chuàng)建table.js

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的內(nèi)容-->
    <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，便能看到顯示的表格【筆者沒有關注居中】：

1

以上就是在vue項目中通過element-ui顯示數(shù)據(jù)的過程。