ele-easy-table

安装

npm install ele-easy-table -S

引入

import 'ele-easy-table'

代码演示

<ele-easy-table :form="form" :table="table" :formData.sync="formData" @getList="handleSearch"></ele-easy-table>

详见 demo源码

注意

依赖 element-ui,你的项目必须安装 element-ui

源码使用的 Element-ui 版本

"element-ui": "^2.4.5"

API

Props

属性	说明	类型	默认值
form	表格查询条件区域	Object	{}
table	表格展示区域	Object	{}
formData.sync	表格查询字段	Object	{}
pagination	是否显示分页区域	[Boolean,Object]	true
other attributes	el-table原生属性	参考el-table原生属性	-

• form 子配置项

属性	说明	类型	默认值	备注
class	表格查询条件区域样式设置	Object	-	-
style	表格查询条件区域内联样式设置	Object	-	-
foldNum	表格查询条件超过多少个时折叠	Number	-	无此参数则全部展示
list	表格查询条件列表	Array	-	详见demo源码

• table 子配置项

属性	说明	类型	默认值	备注
list	表格数据列表	Array	-	-
columns	表格头部列表	Array	-	详见demo源码
isLoading	是否显示表格加载动画	Boolean	-
showIndex	是否显示序号列	Boolean	true
indexFixed	是否固定序号列	Boolean	false
indexLabel	自定义序号列表头文字	String	序号
selection	表格多选配置	Object	{}

• selection 子配置项

属性	说明	类型	默认值	备注
config	表格多选属性	Object	-	-

• pagination 子配置项

el-pagination原生属性

Methods

@getList()

页码切换或者每页显示数目更改时执行，获取数据，然后赋值给 table.list 更新列表

other element table events

el-table原生事件，例如：@selection-change="handleSelectionChange" 详见demo源码

History

v1.1.3

• 1.新增表格多选配置
• 2.使用 v-bind="$attrs" v-on="$listeners" 移植el-table原生属性
• 使用方法详见 ele-easy-table-demo

v1.1.4

• el-pagination 组件新增原生配置项

v1.1.5

• 新增自定义表头内容

v1.1.6

• 表格序号显示条件优化

v1.1.7

• 新增输入框支持enter按键查询表格

v1.1.8

• 修复表格序号显示bug

v1.1.9

• 修复无翻页情况下表格序号显示bug

v1.2.0

• 查询条件支持折叠

v1.2.1

• slot类型查询条件支持配置是否折叠

v1.2.2

• 表格handleClick事件支持第二个参数scope，可以获取到 row, column, $index 和 store（table 内部的状态管理）的数据，用法参考demo源码

v1.2.3

• 新增 handleExpand 事件（条件折叠后的回调事件）

事件	说明	参数
handleExpand	条件折叠后的回调事件	isExpand

• 表格新增内联样式 overflow: visible; 实现表头粘性布局只需添加以下样式即可

  注意：如果是 scoped 样式需使用 >>> 操作符（详情见文档CSS作用域）

  /* 全局样式 */
  .el-table__header-wrapper{
    position: sticky;
    top: 0;
    z-index: 999;
  }
  /* scoped 局部样式 */
  .ele-easy-table-demo >>> .el-table__header-wrapper {
    position: sticky;
    top: 0;
    z-index: 999;
  }

  详情见demo源码

  注意：无法与列固定同时使用，要同时使用可以用element原生表格属性，设置表格高度，无需设置此样式

v1.2.4

• 查询条件支持配置placeholder

v1.2.5

• 自定义事件改用 kebab-case 命名,详情见vuejs官网-自定义事件#事件名

v1.2.6

• el-form 和 el-form-item 支持原生配置项

v1.2.7

• 查询条件按钮支持动态配置disabled

v1.2.8

• 查询条件按钮支持动态配置显示文字