admin-table-page v1.0.1

Admin Table Page

English

基于Vue3和element-plus二次封装的一个表格页面组件

• 通过简单配置，能快速完成一个带字段搜索、工具栏按钮、分页功能以及刷新功能的后台管理页面
• 只需要配置一个从服务端获取数据的promise函数，就可以自动完成表格数据的获取和渲染
• 远程获取数据时，支持自动刷新和手动刷新表格数据
• 自动分页控制
• 即使在远程获取数据时，也可以跨页进行多选
• 当搜索框内容变化或者分页状态变化时，自动触发表格数据的筛选和更新
• 通过不同name的slot来自定义组件的各部分
• 支持中/英文切换
• 自适应布局

Issue Reporting

如果在使用过程中发现bug，请来这里反馈，非常感谢！

本地Demo

npm install / yarn install
npm run dev / yarn run dev

浏览器打开http://localhost:8173 查看Demo

安装

NPM

npm install admin-table-page

Yarn

yarn add admin-table-page

用法

全局引入

import AdminTablePage from "admin-table-page";

// 以下两种样式文件，只需引入其中一种即可

// 如果项目不需要更改element-plus组件的主题，或者没有使用element-plus，可引入下面的css文件
import "admin-table-page/lib/style.css";
// 如果项目使用element-plus，并需要自定义主题色，可引入下面的scss文件
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";
// 以下两种样式文件，只需引入其中一种即可
// 如果项目不需要更改element-plus组件的主题，或者没有使用element-plus，可引入下面的css文件
import "admin-table-page/lib/style.css";
// 如果项目使用element-plus，并需要自定义主题色，可引入下面的scss文件
import "admin-table-page/style/index.scss";
import { getDataApi } from "@/api/data";

const columns = [{
  prop: "name",
  label: "Name",
}, {
  prop: "age",
  label: "Age"
}];

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>

然后，你可以得到下面这样一个页面：

属性

除此之外，其他原el-table组件的属性也可以以透传attributes的方式配置。

方法

除此之外，还支持原el-table组件的所有方法调用。

事件

自定义Slot

工具栏按钮对象

除此之外，还支持el-button的所有属性。例如，

const toolButtons = [{
  text: "test button",
  onClick: () => { console.log("it's toolbar button")},
  icon: "Plus",
  type: "danger",
  link
}]

筛选

目前仅支持el-input、el-select以及el-date-picker（type="date")这三种类型的筛选组件 可以对columns数组中的每个元素设置filterable或者filterOptions属性，来定义列的筛选行为

• filterable 类型为boolean。如果设置为true，则为该列开启一个默认的el-input筛选组件
• filterOptions 类型为object。可以设置该列对应筛选组件的其他属性，或者选择el-input以外的其他筛选组件

除此之外，el-input/el-select/el-date-picker(type="date")的其他属性也支持配置。例如，

const columns = [{
  prop: "username",
  label: "Username",
  filterable: true
}, {
  prop: "age",
  label: "Age",
  filterOptions:{
    type: "select",
    options: ["18", "19"],
    defaultHidden: true
  }
}]