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

Property	Type	Desc	Default values
columnHead	Array	表格头设置： property Type Desc minWidth Number 最小列宽度 width Number 列宽度 prop String 对应列内容的字段名 label String 标题名 headSearch Boolean 是否显示列搜索框 sortable Boolean|String 是否显示排序按钮,当值为'custom'时，排序将向serverApi传递排序值{prop: 'prop', order: "ascending"}，order值为ascending、descending、null slot Boolean 是否可分发 fixed String 列是否固定在左侧或者右侧，true 表示固定在左侧, 可选 left, right filters Array 数据过滤的选项,见element-ui文档 filterMethod Function 数据过滤的方法,见element-ui文档, 当使用接口模式时，请不要传递该方法，组件会自动调用filterChange filtersMultiple Boolean 数据过滤的选项是否多
tableData	Array	数据表值，使用serverApi参数时该项无用，结构：[{prop1: value, prop2: value}]
serverApi	Function	服务器数据获取接口方法，当使用该选项时，组件会调用该方法，传递参数： property Type Desc offset Number 数据分页起始值 limit Number 数据分页长度 search Object 当调用列搜索或表头模糊搜索框时传递，包含两个key：type(搜索裂隙)->fuzzy(模糊搜索),exact(精确搜索) 接口方法返回数据格式：{data: [{prop1: value, prop2: value}], total: 100} property Type Desc data Array 接口返回数据，格式同tableData total Number 通过接口方法返回初始数据时需要（第一次调用需要），分页查询、模糊查询、列查询不需要返回
useStore	Boolean	是否使用缓存模式	false
searchBar	Boolean	是否显示模糊搜索框	false
rowClick	Function	行点击事件，见element-ui文档	() => {}
rowContextmenu	Function	行右键点击事件，见element-ui文档	() => {}
rowDblclick	Function	行双击事件，见element-ui文档	() => {}
apiError	String	监控数据表调用接口返回错误结果,msg => {console.log(msg)}
reload	Functon	通过this.$refs['ref'].reload调用，如果是接口模式该方法将重新获取当前页面数据并请求返回数据总数，如果是非接口模式将重载页面并回到第一页

Contact

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