mr-components (基于element-ui)

安装

npm install mrduan-components --save
或者
yarn add mrduan-components

引用

import MComponents from 'mrduan-components'
Vue.use(MComponents)

用途

更为简洁的封装了elementui中的table，内嵌table+pagination和自动计算表格高度

使用方式

MTable 属性说明

| 参数 | 说明 | 类型 | 默认值 | | ------------- | ----------------------------------- | -------------- | ------ | | data | 要显示的表格数据 | array | [] | | headers | 显示的列数据 | array | [] | | auto-height | 是否自动高度（随机值） | number|string | -- | | offset-bottom | 距离底部距离（可选） | number | 0 | | pagination | 分页的一些配置，与elementui文档一致 | object | -- | | height | 固定高度，与elementui文档一致 | string|number | -- |

pagination 配置详情

默认配置：
{
    total: 100,
    currentPage: 1,
    pageSize: 20,
    pageSizes: [10, 20, 30, 40, 50, 100],
    pageKey: 'pageNum', // 后端的入参
    limitKey: 'pageSize', // 后端的入参
    align: 'right', // 分页的整体布局，默认靠右
    changeName: 'pageChange', // 页码改变时的事件名称
    layout: 'total, sizes, prev, pager, next, jumper'
}

headers属性说明

| 参数 | 说明 | 类型 | 默认值 | | ----- | ---------------------------------- | ------- | ------ | | label | 用于显示表头 | string | -- | | prop | 用于显示列字段 | string | -- | | slot | 用于开启插槽，prop字段为插槽的name | boolean | false |

MTable Event

| 事件名 | 说明 | 参数 | | ---------- | ---------------------- | ---- | | pageChange | 页码变动和翻页监听事件 | row |