# 基于vue+elementui封装table组件

**Repository Path**: xinjian185/utable

## Basic Information

- **Project Name**: 基于vue+elementui封装table组件
- **Description**: 基于vue+elementui实现对table的封装，table组件的功能有：数据显示，排序，分页，操作列按钮折叠，表格内容超出折叠等。
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 3
- **Created**: 2022-03-28
- **Last Updated**: 2022-05-26

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# utable组件
## 功能说明
该组件是基于vue+elementui组件，是对el-table组件的封装，实现的功能点有：
- 数据显示
- 分页
- 操作列按钮超出实现折叠展开
- 表格内容超出折叠
- 排序（需要结合后台实现）
- 自定义DOM
## 属性
  
 |  参数   | 说明  | 类型|可选值|默认值
 | ----  | ---- |----|---|---| 
 cols|表格的列|Array|label:String列名 <br/>prop:String 对应的字段名<br/>minWidth:Number/String 最小列宽<br/>align:String 表格对其方式<br/>headerAlign:String 表头对齐方式，若不设置此项，则使用表格的对齐方式<br/>sortable:Boolean/String 对应列是否可以排序，如果设置为‘custom’，则代表远程排序，需要监听Table的sort-change事件  默认为false<br/>overflow:Boolean 内容超出隐藏并显示省略号，鼠标上浮显示全部内容<br/>hidden:Boolean  是否隐藏列 默认为false<br/>formatTime:Boolean 格式化时间，只显示日期，只要是prop是‘createTime’自动格式化为日期<br/>render:Function  渲染自定义Dom方法，有两个参数h，scope，h是reateElement 别名，scope是el-table组件行scope|
 action|操作列的操作按钮，如果要实现按钮折叠，则所有按钮需要写在此数组中|Array|btnClass:String 自定义按钮class控制按钮css<br/>isShowBtn:Boolean 是否显示按钮，可做权限控制<br/>handle:Function 按钮点击回调方法<br/>render:Function 自定义Dom，有两个参数h,scope，h是reateElement 别名，scope是el-table组件行scope|
 data|表格数据|Array|
 pagination|是否显示分页|Boolean|true,false|true|
 showBorder|是否显示边框|Boolean|true,false|false
 index|是否显示表格序号|Boolean|true,false|false|
 selection|表格是否可选，为true时显示多选框|Boolean|true,false|false
 maxHeight|表格的最大高度|Number|——|550|
 emptyText|表格数据为空时，出现在表格中的提示文字|String|——|‘暂无数据’
 pageSize|每页显示的数据数量|Number|——|5|
 pageSizes|每页显示个数选择器的选项设置|Array|_|[5,10,15,20,30]|
 pageNumber|页码|Number|——|1
 total|数据总数|Number|——|0
 tableBtnIsCollapse|操作按钮超出列宽是否实现折叠展开功能|Boolean|——|true
 isFullScreen|组件高度是否根据满屏需要来计算|Boolean|——|true 

## 方法
事件名称|说明|回调参数
|---|---|---|
rowClick|当某一行被点击时触发该时间|row,column,event
selection|当选择项改变时触发该事件|被选中行组成的数组
pageSize|pageSize改变是触发该事件|每页条数
pageNumber|页码改变时触发事件|当前页
sortChange|当表格的排序条件发生变化时触发该事件|column,prop,order}