2.0.2 • Published 2 months ago
comps-elementui-table v2.0.2
comps-elementui-table
vue + elementUI 基于 vue 和 elementUI 二次开发的表格组件，支持 el-table 基础功能，扩展分页查询，可支持动态和静态数据，目的是提高开发效率，减少代码量。
开始
npm install comps-elementui-table --save使用
import comTable from 'comps-elementui-table'由于组件数据是通过组件内部请求发起，故需要将 axios 挂在到组件上；原因：分页时需要重新拉取数据，一般项目会对请求和返回头进行封装，例如设置 token，故将 axios 对象传入。 注：组件已与后端约定好数据返回格式
Vue.use(comTable, { axios })props
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| size | Table 的尺寸 | String | medium / small / mini | medium |
| pagination | 分页配置，是否展示 show,分页大小:pageSize,页码按钮的数量，当总页数超过该值时会折叠 pagerCount | Object | {show:true,pageSize:0,pagerCount:5} | -- |
| border | 是否带有纵向边框 | Boolean | true/false | true |
| opts | 数据请求配置，必填 dataType 静态或动态数据类型,type 请求类型,url 请求地址,params 默认请求参数,tableList 静态数据 dataType 为 static 时生效 | Object | {dataType: 'remote',type: 'get',url: '',params: '',tableList:[]} | -- |
| showIndex | 是否显示序号 | Boolean | true/false | false |
| cols | 表格列设置；reserveSelection 在 isSelect 为 true 时生效,一般情况设置首列为{isSelect: true,reserveSelection: true},checkSelectable 设置当前列是否可选,sortable 设置是否排序 | Array | {title: '列名',key: '字段',isSelect:false,reserveSelection:true,checkSelectable:true,sortable: true,width:'宽度',expand:'是否展开',fixed:'浮动',renderHeader:'',render:(h,row)=>{}} | |
| maxHeight | Table 的最大高度。合法的值为数字或者单位为 px 的高度 | string/number | -- | -- |
| stripe | 是否为斑马纹 table | Boolean | true/false | true |
| showOverflowTooltip | 表格列超出是否显示 tooltip | Boolean | true/false | true |
| summaryConf | 合计行相关配置 | Object | {summary: false, sumText: '',showSummary: '',objectSpanMethod: () => {},summaryMethod: () => {},} | -- |
函数
| 方法名 | 说明 | 参数 |
|---|---|---|
| refresh | 刷新 | params:Object,可传入附加参数或覆盖已有参数 |
事件
| 事件名 | 说明 | 参数 |
|---|---|---|
| selectOne | 当用户手动勾选数据行的 Checkbox 时触发的事件 | selection, row |
| selectAll | 当用户手动勾选全选 Checkbox 时触发的事件 | selection |
| selection-change | 当选择项发生变化时会触发该事件 | selection |
| getData | dataType 为 remote 时，数据获取成功事件 | dataList,total |