element-datatables

v2.1.0

Published

4 years ago

一个基于element-ui的Table组件

0High
0Medium
0Low

ldwqh0

ele-data-tables

一个基于element-ui 的表格组件,该组件封装了Ajax请求和分页,最初的灵感来自于DataTables,在项目中经过实践,有个这个组件的雏形.

需要手动引入axios,element-ui ,qs库
由于axios依赖于Promise,因此如果要在IE9/IE10/IE11+上使用时,需要导入相应的polyfill,IE9-慎入
代码中包含一个可运行的实例,通过下面的命令来启动实例

npm i && npm run dev

基本用法

安装相关依赖

npm i -S axios element-ui qs element-datatables

在项目中引入element-ui依赖,具体引入方式参见http://element.eleme.io.
你需要在你的入口文件中引入element相关的css文件.
通过以下两种方式之一展示数据
- 通过ajax获取数据


<template>
    <div id="app">
        <h1>ele-data-tables</h1>
        <ele-data-tables ajax="/users" ref="renovate">
            <el-table-column prop="id" label="ID" align="center" />
            <el-table-column prop="name" label="姓名" />
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <a style="margin-right: 10px;cursor: pointer" @click="op(scope.row)" class="link">操作</a>
                </template>
            </el-table-column>
        </ele-data-tables>
    </div>
</template>
<script>
    import EleDataTables from 'element-datatables'
    import { TableColumn as ElTableColumn } from 'element-ui'

    export default {
        components: {
            EleDataTables,
            ElTableColumn
        },
        data () {
        },
        methods: {
            op (value) {
                alert('你点击了' + JSON.stringify(value))
            }
        }
    }
</script>

通过设置data属性获取数据


<template>
    <div id="app">
        <h1>ele-data-tables</h1>
        <ele-data-tables :data="users" ref="renovate">
            <el-table-column prop="id" label="ID" align="center" />
            <el-table-column prop="name" label="姓名" />
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <a style="margin-right: 10px;cursor: pointer" @click="op(scope.row)" class="link">操作</a>
                </template>
            </el-table-column>
        </ele-data-tables>
    </div>
</template>
<script>
    import EleDataTables from 'element-datatables'
    import { TableColumn as ElTableColumn } from 'element-ui'

    export default {
        components: {
            EleDataTables,
            ElTableColumn
        },
        data () {
            users: [{
                id: 1,
                name: '张三'
            }, {
                id: 2,
                name: '李四'
            }, {
                id: 3,
                name: '王五'
            }]
        },
        methods: {
            op (value) {
                alert('你点击了' + JSON.stringify(value))
            }
        }
    }
</script>

有关el-table-column使用方法，请参考element-ui相关说明

其它table的高级功能

如果你要使用element table中的其它高级功能。请使用slot方式插入到表格中。

简介

element-datatable支持两种模式的数据显示,一是ajax服务模式,二是data的本地数据模式.当我们设置组件的data属性时,会启用本地数据模式,否则会启用服务器模式.本组件的主要功能是服务器端模式,通过少量的代码,实现较为复杂的服务器分页查询等逻辑.

服务器模式

当我们没有设置data的时候,组件启用服务器模式,我们可以通过设置服务器相关的参数来和从服务器获取数据.

与服务器相关的属性

ajax: 表示发送到服务器的请求,可以是一个字符串或者是一个完整的ajax对象.如果是一个字符串,则会向字符串指定的地址发送get请求以获取数据.本组件使用axios发送ajax请求,相关的ajax对象与axios 的config相同
server-params: 表示作为发送到服务器的附加参数,如果ajax请求的类型为get,则会将附件参数作为params发送到服务器,其它类型的请求会将数据作为data发送到服务器.

发送到服务器的参数

这几个查询参数：包括{draw,page,size},将始终通过params的方式发送到服务器.

draw: 请求标记，服务器应该原样返回该数据
page: 从0开始的分页号
size: 每页长度
server-params属性,在get请求时,会作为params发送到服务器,其它请求时会作为data发送到服务器
一个示例地址：get http://localhost/users?draw=0&page=0&size=10&keywords=good

服务器响应

为了正确展示数据，服务器必须按照一定的规则响应数据，组件需要如下响应才能正常工作

{
  "draw"
:
  Number, // 服务器应当原样返回该标记，主要是做请求响应适配
    "success"
:
  Boolean, // 服务器是否正确的响应了查询
    "recordsTotal"
:
  Number, // 数据总量
    "error"
:
  String, // 错误信息，当success===true时，通常需要提供该信息，该信息会展示在表格中
    "data"
:
  Array //如果success===false,不需要该信息
}

以下是一个响应示例

{
  "draw": 1,
  "success": true,
  "recordsTotal": 100,
  "data": [
    {
      "id": 1,
      "name": "张三"
    },
    {
      "id": 2,
      "name": "李四"
    },
    {
      "id": 3,
      "name": "王五"
    }
  ]
}

数据过滤

当server-params改变时，会向服务器发送查询请求，并重新获取数据

本地数据

我们可以通过直接设置data属性来设置显示本地数据

ele-data-tables属性说明

ele-data-tables实例方法

可供外部调用的实例方法有

$refs.table.reloadData() 根据当前的信息重新载入数据
其它的实例方法不建议使用

更新历史

2.1.0 更新一些数据逻辑，使用vue-datalist V1.1.2作为数据底层组件,修改一些bug
2.0.15 添加一些element原始表格的方法到表格中
2.0.14 对外$emit一些底层事件
2.0.12 修改一个底层数据加载模块的错误
2.0.10 增加加载loading框
2.0.9 添加默认分页组件对齐方式的属性
2.0.7 修改分页条默认的内容类型，并且添加layout属性，可以通过layout配置分页条的内容
2.0.6 修改项目的发布方式为umd,解决不能正确被vue-cli识别的bug
2.0.5 增加字符串为默认排序设置的功能
2.0.4 修改表格排序不正常的bug
2.0.3 修复一个不能排序的bug
2.0.2 修复一个row-click事件异常的bug
2.0.x 一个全新的版本。
1.0.8 添加一个name=table插槽，使得前端可以自定义表格内容
1.0.7 重新修改插件模式和typescript定义文件
1.0.4 重新构建打包配置，使用webpack打包成commonjs2的模块发布到npm
1.0.3 增加类型声明文件
1.0.2 加入防抖属性debounceTime，实现输入防抖
1.0.0 去掉0.X版本老旧数据格式的依赖，
0.3.3
修正了一个在新版本的响应体下，返回>1的页面没有数据时，不自动刷新到上一页的bug
0.3.1
修正了表格多次请求之后，数据不匹配的bug
0.3.0 更新了数据请求的方式，现在不会再强制要求后台处理draw参数，支持处理后台返回的Spring Data 的Page<?>类型数据。
0.2.6
当使用ajax加载数据时，如果指定页面没有数据，而数据总条目不位0时，则会自动重新加载上一页的数据，递归引用，直至加载到数据
0.2.5
修正了自定义服务器参数时，sort不能正确传输到后台的bug
0.2.4
修正了一个多次点击表头排序，会导致传入后台的参数丢失的问题
0.1.7 功能，增加表头排序
0.1.3 修正：当请求参数改变时，会回第一页了
0.1.1 修正了一个引入element相关组件，在某些工程中编译报错的bug
0.1.0 修正了一个切换每页长度后，表格不能正常刷新的bug,基本趋于稳定的一个版本了
0.0.6 修改依赖包的引入方式，修改IE兼容性问题
0.0.5
修改了显示加载动画的问题, 增加了一个选项，用于控制是否显示加载对话框
0.0.4 修改说明文件，修改说明示例, 修改发布脚本增加事件响应增加分页项目配置
0.0.1-0.0.3 初始版本