Vue2.0 Datatables

Based on elemnet-ui, ES6

Install

npm install element-ui vue-el-datatables -save

Get Started

import ElementUI from 'element-ui'
import DataTables from 'vue-el-datatables'

Vue.use(ElementUI)
Vue.component(DataTables.name, DataTables)

or

import { Row, Col, Card, Table, TableColumn, Input } from 'element-ui'
import DataTables from 'vue-el-datatables'

Vue.use(Row)
Vue.use(Col)
Vue.use(Table)
Vue.use(TableColumn)
Vue.use(Input)
Vue.component(DataTables.name, DataTables)

Usage

对于服务器接口返回数据形式，数据会建立本地缓存，已获取的分页数据将不会进行重新请求，但为了保证搜索功能数据的完整性，使用搜索时将进行接口请求，而清除搜索条件后表格会自动回到分页缓存数据

<template>
  <DataTables :columnHead="columnHead" :tableData="tableData" :serverApi="serverApi" :searchBar="true" @apiError="apiError">
    <el-button type="primary" slot="toolBar">add User</el-button>
    <template scope="props">
      <el-button v-if="props.columnID === 'action'" @click.stop="apiError(props.ev.row.id)">Edit</el-button>
      <div v-if="props.columnID === 'status'" :class="formatStatus(props.ev.row.status)[0]">{{formatStatus(props.ev.row.status)[1]}}</div>
    </template>
  </DataTables>
</template>

slot

DataTables 内容可使用分发内容 toolBar 分发至表格顶部工具区域 template 内部分发至表格数据行内容，可通过scope="props"，获取当前行的数据，并进行格式化数据

Attributes

Contact

The project's website is located at https://github.com/Dess-Li/vue-el-datatables