@yangjiaxin/super-components
Version:
带表单搜索、分页的表格组件
57 lines (44 loc) • 1.69 kB
Markdown
# 安装
## 兼容性
Super Components 支持最近两个版本的浏览器。
如果您需要支持旧版本的浏览器,请自行添加 Babel 和相应的 Polyfill 。
由于 Vue 3 不再支持 IE11,Super Components 也不再支持 IE 浏览器。
## 使用包管理器
**我们建议您使用包管理器(如 NPM、[Yarn](https://classic.yarnpkg.com/lang/en/) 或 [pnpm](https://pnpm.io/)安装 Super Components**,然后您就可以使用打包工具,例如
[Vite](https://vitejs.dev/) 或 [webpack](https://webpack.js.org/)。
```
# 选择一个你喜欢的包管理器
# NPM
$ npm install @yangjiaxin/super-components --save
# Yarn
$ yarn add @yangjiaxin/super-components
# pnpm
$ pnpm install @yangjiaxin/super-components
```
# 快速开始
本节将介绍如何在项目中使用 Super Components。
# 用法
本库依赖ElementPlus,需要先注册ElementPlus。
## 完整引入
```js
// main.ts
import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import SuperComponents from '@yangjiaxin/super-components'
import 'element-plus/dist/index.css'
import App from './App.vue'
const app = createApp(App)
app.use(ElementPlus)
/**
* 此处配置为表格接口查询字段key设置
* 默认值为
* {pageKey: 'page',pageSizeKey: 'pageSize',listKey: 'list',totalKey: 'total'}
**/
app.use(SuperComponents, {
pageKey: 'page', // 远程搜索请求参数 page
pageSizeKey: 'pageSize', // 远程搜索请求参数 pageSize
listKey: 'list', // 远程搜索接口响应 list(表格数据)
totalKey: 'total', // 远程搜索接口响应 total(数据总数)
})
app.mount('#app')
```