vue-pg-table

A paginated table component based element-ui

Install

npm install vue-pg-table

Usage

import PgTable form 'vue-pg-table';
export default {
  components: {
    [PgTable.name]: PgTable
  }
}

• common demo.

<pg-table
  :data="tableData"
  :columns="tableColumns"
  :pagination.sync="pagination"
  row-key="id"
  min-height="500"
  style="width: 100%"
  @query="queryData"
></pg-table>

• With slots <el-table-column> and columns props.
  The order is loop the columns and then inject the slot to after.
  Also provide the action slot after the deafult slot.

<pg-table 
  :data="tableData" 
  :columns="tableColumns" 
  :pagination.sync="pagination"
  row-key="id"
  style="width: 100%"
  header-row-class-name="thead-light"
  @sort-change="sortChange"
  @selection-change="selectionChange">
  <el-table-column width="180px" align="center" label="Actions">
    <div slot-scope="{$index, row}" class="p-1">
      <el-button
        v-if="perm('role:edit')"
        @click.native="handleEdit($index, row)"
      >
        编辑菜单权限
      </el-button>
    </div>
  </el-table-column>
</pg-table>

Props

| Name | Type | Default | Description | | --------------------- | ---------- | -------------- | --------------------------------------------------------------------------------------------------------------------------- | | columns | Array | [] | table columns | | pagination | Object | see the follow | pagination
| pagination.currentPage |number| see the follow|当前页数，支持 .sync 修饰符| | pagination.pageSize | number| see the follow|每页显示条目个数，支持 .sync 修饰符| | pagination.background| boolen |true | background | |...|

inherit All <el-table> props see the documents

https://element.eleme.io/#/zh-CN/component/table

inherit All <el-pagination> props with default Props

    background: true
    pageSizes: [10, 20, 50, 100],
    total: 0,
    pageSize: 10,
    currentPage: 1

https://element.eleme.io/#/zh-CN/component/pagination

Events

| Name | Description | | -------- | -------------------------------- | | query | watch to query the data |

Slots

| Name | Description | | -------- | -------------------------------- | | | default slot | action | action slot |

Donate

License

Copyright (c) Terry Cai. Licensed under the MIT license.