# wyh-element-template

**Repository Path**: wm_web/wyh-element-template

## Basic Information

- **Project Name**: wyh-element-template
- **Description**: 基于element-admin 集成动态顶部或侧边菜单、通用列表、自定义表单
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 4
- **Forks**: 0
- **Created**: 2021-03-21
- **Last Updated**: 2024-02-03

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 基于element 基于element  基于element (主要的事情说三次)
# 该项目是用于 动态路由  动态菜单设置  权限按钮  业务列表组件  自定义表单 的一个模板

# 基于element的自定义表单项目

# 原型 
**Live demo:** http://wm_web.gitee.io/wyh-element-template/dist/#/staticData

## 参数
| 参数      | 说明    | 类型      | 可选值       | 默认值   |
|---------- |-------- |---------- |-------------  |-------- |
| label     | 标题    | string    | — | —  |
| fieldES     | 唯一值(类似递增不重复id)    | string    | — | —  |
| controlType     |  类型    | string    | — | text  |
| value     | 默认值    | string    | — | —  |
| required     | 必填    | boolean    | true/false | true  |
| disabled     | 可填    | boolean    | true/false | true  |
| placeholder     | 占位符    | string    | — |  '请输入'+label |
| nzMax     | 数字框最大值    | number    | — |  2147483647 |
| nzMin | 数字框最小值    | number    | - |  -2147483648 |
| regular     | 输入框的正则   | string    | - |  - |
| row     | 占比   | number    | - |  1 |
| enum     | 枚举    | Array    | [{label:选项1,value:选项1的值}] |  [] |

## 使用技术/组件
基于 element 构建的一个项目
element 动态渲染组件
vuedraggable 拖拽


# wyh-element-table业务列表组件
> 基于element table 和lb-table 做的一个通用的业务列表组件

# 使用注意 
<font color="green"> 必须全局注册请求工具如：Vue.prototype.$http = service </font>  
<font color="green"> 必须全局注册请求工具如：Vue.prototype.$http = service </font>  
<font color="green"> 必须全局注册请求工具如：Vue.prototype.$http = service </font>   
<font color="green"> 默认$http </font>   

# 下载包
npm install wyh-element-table --save  

# 全局注册使用
在 `main.js` 文件中引入插件并注册  
import wyhElementTable from 'wyh-element-table'    
Vue.use(wyhElementTable)  

# 局部注册使用
在对应的文件中引入插件并注册  
import wyhElementTable from 'wyh-element-table'  
components: {  
    wyhElementTable,  
},   

## 组件属性参数
**publicTabel**
| 参数      | 说明    | 类型      | 可选值       | 默认值   |
|---------- |-------- |---------- |-------------  |-------- |
| pageSizes     | 分页数量的配置    | Array    | [] | [10, 25, 50, 100]  |
| isPagination     | 是否显示分页    | Boolean    | true/false | true  |
| layout     | 分页的种类    | string    | 'total, sizes,prev, pager, next, jumper' | 'total, sizes,prev, pager, next, jumper'  |
| type     |  类型    | string    | ''/radio/checkbox | ''  |
| myPages     | 动态参数    | Object    | — | {}  |
| baseParams     | 基本参数    | Object    | — | {}  |
| checkboxDeleteValue     | 每次刷新列表 清空已选的列表    | Boolean    | true/false | true  |
| checkboxAttribute     | 多选属性    | Object    | — |  {} |
| radioAttribute     | 单选属性    | Object    | — |  {} |
| maxHeight | 最大高度    | number/string    | - |  null |
| column | 列的设置    | Array    | [] |  [] |
| listServe     | 列表请求的url   | String    | - |  '' |
| list     | 静态列表数据   | Array    | - |  [] |
| definitionTotal     | 分页的Total Key    | String    |  |  totalCount |
| definitionData     | 分页的Data Key    | String    |  |  list |
| definitionPage     | 分页的Page Key    | String    |  |  page |
| definitionPageValue     | 分页的Page的默认值   | Number    |  |  1 |
| definitionPageSize     | 分页的PageSize Key    | String    |  |  pageSize |
| definitionPageSizeValue     | 分页的PageSize的默认值   | Number |  |  10 | 
| requestType     | 请求开源工具的类型   | String | '$http' |  '' | 

## 组件方法
**publicTabel**
| 参数      | 说明    | 类型      | 可选值       | 默认值   |
|---------- |-------- |---------- |-------------  |-------- |
| getList     | 获取列表    | Function    | null | null  |
| search     | 搜索列表(会把页码改成1)    | Function    | null | null  |
| reset     | 重置列表(把页码改成1并且初始化myPages的参数)  | Function | null | null |
| resetColumn   |  重置列(根据列的iif判断渲染或者不渲染) | Function    | null | null  |

## 项目
```bash
# clone the project
git clone https://github.com/qwe8511066/wyhElementTable.git

# enter the project directory
cd wyhElementTable

# install dependency
npm install

# develop
npm run dev
```