vue使用table的组件

Vue有很多开源的table组件可用，下面介绍其中两种：

1. Element UI

Element UI是一套基于Vue 2.0的桌面端组件库，其中包含了table组件。使用Element UI的table组件可以快速搭建出一个功能强大、样式美观的表格。

使用方法：

安装Element UI：

npm install element-ui -S

在main.js中引入Element UI：

import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)

在需要使用table的组件中引入table组件：

<template>
  <el-table :data="tableData">
    <el-table-column prop="date" label="日期"></el-table-column>
    <el-table-column prop="name" label="姓名"></el-table-column>
    <el-table-column prop="address" label="地址"></el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄'
      }]
    }
  }
}
</script>

2. iView

iView是一套基于Vue的开源UI库，其中也包含了table组件。使用iView的table组件可以快速搭建出一个功能强大、样式美观的表格。

使用方法：

安装iView：

npm install iview -S

在main.js中引入iView：

import Vue from 'vue'
import iView from 'iview'
import 'iview/dist/styles/iview.css'
Vue.use(iView)

在需要使用table的组件中引入table组件：

<template>
  <Table :columns="columns" :data="data"></Table>
</template>

<script>
export default {
  data() {
    return {
      columns: [{
        title: '姓名',
        key: 'name'
      }, {
        title: '年龄',
        key: 'age'
      }, {
        title: '地址',
        key: 'address'
      }],
      data: [{
        name: 'John Brown',
        age: 18,
        address: 'New York No. 1 Lake Park'
      }, {
        name: 'Jim Green',
        age: 24,
        address: 'London No. 1 Lake Park'
      }, {
        name: 'Joe Black',
        age: 30,
        address: 'Sydney No. 1 Lake Park'
      }]
    }
  }
}
</script>