vue-pg-table

A paginated table component based element-ui

Live Demo >>

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.