vue-el-datatables

A Vue2 DataTablse Project

Usage no npm install needed!

<script type="module">
  import vueElDatatables from 'https://cdn.skypack.dev/vue-el-datatables';
</script>

README

Vue2.0 Datatables

Based on elemnet-ui, ES6

preview

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