Admin Table Page component based on Vue3.js and Element-plus
- Write a table page with search fields, toolbar and pagination functions by simple configure
- Only need a promise function that fetchs data from the server to automatically complete the table data pulling and rendering
- Support automatic refresh and manual refresh of the table data when fetching data from the server
- Automatically pagination
- Select rows on different pages even when fetching data from the server
- When search fields or pagination changed, the table datas will be loaded automatically
- Customize each part of the component through different named slot
- Support Chinese and English language
- Adaptive layout for different device
If you have found a bug, please report it in this issues section. Thanks!
npm install / yarn install
npm run dev / yarn run dev
Open http://localhost:8173 to see the demo
npm install admin-table-page
yarn add admin-table-page
import AdminTablePage from "admin-table-page";
// Only one of the following two style files needs to be imported
// If you don't want to change the theme of element-plus, import like this:
import "admin-table-page/lib/style.css";
// If you custom your element-plus theme, import like this:
import "admin-table-page/style/index.scss";
import { createApp } from "vue";
const app = createApp(...);
app.use(ConfigTable);
<template>
<admin-table-page
:columns="columns"
:fetch-method="getDataApi"
:tool-buttons="toolButtons"
:refresh="5000"
:action-column="actionColumn"
selectable="multiple"
row-key="id"
/>
</template>
<script setup>
import { AdminTablePage } from "admin-table-page";
// Only one of the following two style files needs to be imported
// If you don't want to change the theme of element-plus
import "admin-table-page/lib/style.css";
// If you custom your element-plus theme
import "admin-table-page/style/index.scss";
const columns = [{
prop: "name",
label: "Name",
filterable: true
}, {
prop: "age",
label: "Age",
filterOptions: {
type: "select",
options: ["Under 10 years old", "10 to 20 years old"]
}
}];
const toolButtons = [{
text: "New Record",
icon: "Plus",
onClick: handleAdd
}]
const actionColumn = [{
text: "Edit",
onClick: row => handleEdit(row)
}, {
text: "Delete",
onClick: row => handleDelete(row)
}]
const getDataApi = () => {
return new Promise((resolve, reject) => {
resolve({
total: 2,
list: [{
name: "name1",
age: 1
}, {
name: "name2",
age: 2
}]
})
})
}
</script>
Then, you can get a page like this:
Props | Description | Type | Accepted Values | Default Value |
---|---|---|---|---|
columns | The defination of the table's columns. In addition to the original attributes of el-table-column, use filterable or filterOptions to define the filtering of the column Filter |
array | - | [] |
local-data | The local table data, same as ElTalbe's data property | array | - | [] |
total-key | To map the key for total count in the result when fetch datas from remote. | string | - | "total" |
list-key | To map the key for data list in the result when fetch datas from remote. | string | - | "list" |
fetch-method | The method to get the table data from remote server | (query: object) => Promise<{totalKey: number, listKey: array}> | - | - |
refresh | How to refresh the table data | string/number | string value: "" - Never to refresh Table "manual" - Refresh table data manually" number value: Table refresh period with milliseconds. For example,:refresh="5000" |
"" |
tool-buttons | Toolbar buttons. Toolbar button Attributes | array | - | - |
show-index | Display the index of the row when it's true. | boolean | false true |
false |
row-key | Same as el-table, it's required when set selectable to "single" or "multiple" | string | - | - |
selectable | How to select the rows in table. | boolean/string | string value: "single" - single select "multiple" - multiple select boolean value: false: not suppor selection |
false |
locale | i18n locale config | string | "zhCn", "en" | "zhCn" |
action-column | The action column shown in each row. | array | - | - |
action-column-label | The label of action column | string | - | en - "Actions" zhCn - "操作" |
extra-query | The extra query params need to send to server when fetch datas from remote. | object | - | - |
el-pagination-props | Other el-pagination Attributes | object | - | - |
tips | tips string for the table. | string | - | - |
In addition, other attributes of el-table can fallthrough.
Function | Description | Type |
---|---|---|
reload | Reload the table data. You can pass other parameters besides searchFields and pagination parameters | (params) => void |
getSelections | Return the selected rows or seleted row object. When multiple selecting, you can get the selected rows on different pages. | () => array or object |
In addition, all methods of el-table are alse suppored.
Event | Description | Parameters |
---|---|---|
select-change | triggers when selection change. Returns a row Object when selectable is "single". Returns rows Array when selectable is "multiple" |
row/rows |
Name | Description |
---|---|
search | The search |
tools | The toolbar |
actions | The action column |
actions_header | The header of the action column |
tips | The tips of the table |
extra_columns | Extra customed columns |
[column.prop] | Each column can be customed by slot named with the column's prop |
[column.prop]_header | The header of column can be customed by named slot |
Attributes | Required | Description | Type | Default Value |
---|---|---|---|---|
text | true | The text displayed on the button. | String | - |
onClick | true | The callback function for click events. | Function | - |
show | false | Whether to display the button. Default is true. | Boolean | true |
In addition, all attributes for el-button are supported. For example,
const toolButtons = [{
text: "test button",
onClick: () => { console.log("it's toolbar button")},
icon: "Plus",
type: "danger",
link
}]
Only support el-input、el-select and el-date-picker(type="date") for search components.
You can set filterable or filterOptions for each element in the array defined by columns.
- filterable is a boolean value. You can get a el-input filter component for the column when it's true.
- filterOptions is an object. You can set other properties for the filter component like defaultHidden to set whether it's hidden by default, or use other types of filter components we support.
Attributes | Type | Required | Description | Accepted Value | Default |
---|---|---|---|---|---|
type | string | false | The type of the search field. | "input" "select" "date" |
"input" |
defaultHidden | boolean | false | Whether this filter component is hidden by default. | true false |
false |
options | array | false | The select options. It's required when type is "select". The element for options Array can be string、number or object with keys named label and value. |
["options1", "options2",...] or [{ label: "option1", value: "option1" }] |
- |
In addition, all attributes for el-input/el-select/el-date-picker(type="date") are supported. For example,
const columns = [{
prop: "username",
label: "Username",
filterable: true
}, {
prop: "age",
label: "Age",
filterOptions:{
type: "select",
options: ["18", "19"],
defaultHidden: true
}
}]