vue-ele-protable

作用：

#### 生成一个中后台常见的搜索页面，根据tableColumns直接生成searchForm table pagination

安装:

``javascript
// npm
npm i vue-ele-protable -D

//yarn
yarn add vue-ele-protable

`

快速使用:

`javascript
// 在 main.js中全局使用，或者可在单独文件中注入

import VueEleProtable from 'vue-ele-protable'
import "vue-ele-protable/vueProtable.css"
import Vue from 'vue'

Vue.use(VueEleProtable);
`


简单案例:

`vue




``

预览效果

https://raw.githubusercontent.com/webguicai/vue-ele-protable/main/beifen/image.png

!image

表格配置

$3

table: Table Attributes
https://element.eleme.cn/#/zh-CN/component/table#table-attributes
form: Form Attributes
https://element.eleme.cn/#/zh-CN/component/form#form-attributes

| 参数 | 说明 | 类型 | 可选值 | 默认值 |
| --------- | ------------------------------------------------------------------------------------------- | ---------------------- | ---------------------- | ------ |
| label | 对应 el-table-column 的 label | string | - | - |
| type | 对应 el-table-column 的 type | string | selection/index/expand | - |
| prop | 对应 el-table-column 的 prop | string | - | - |
| render | 自定义渲染 table 中每一行值 | function (record) { return xxx } | - | - |
| renderItem | 自定义渲染 form 中每一项 | function () { return node } | - | - |
| width | 对应 el-table-column 的 width | string,number | - | - |
| hideInSearch | 是否在搜索栏中隐藏 | boolean | - | false |
| hideInTable | 是否在表格中隐藏 | boolean | - | false |
| align | 对应 el-table-column 的 align | string | left/center/right | left |
| fixed | 对应 el-table-column 的 fixed | string, boolean | true, left, right | - |