# tw-components
**Repository Path**: lesterL/tw-components
## Basic Information
- **Project Name**: tw-components
- **Description**: tw-components是基于elementplus的一款二次封装仓库，核心是table和form2大核心组件。理念是让数据驱动布局，让代码更精简，让开发更迅速
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 0
- **Forks**: 2
- **Created**: 2024-03-25
- **Last Updated**: 2024-03-25
## Categories & Tags
**Categories**: Uncategorized
**Tags**: None
## README
# tw-vue-el
这个组件是基于在Vite中使用Vue 3和ElmentPlus（二次封装）进行开发，可以帮助您快速开发form和列表页面。
## 自定义配置
请参见 [Vite配置参考](https://vitejs.dev/config/)。
## 项目使用
```sh
npm install tw-vue-el
```
### 完整引入
```sh
import { createApp } from "vue"
import App from './App.vue'
import router from "./router/index"
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import zhCn from 'element-plus/es/locale/lang/zh-cn'
import twVueEl from 'tw-vue-el'
// 因为表格组件和form组件需要引入相关css
import 'tw-vue-el/dist/style.css'
const app = createApp(App)
app.use(ElementPlus,{locale: zhCn})
app.use(router)
app.use(twVueEl)
app.use(store)
app.mount('#app')
```
### 相关组件
```sh
// --- 表格搜索
```
### 表格搜索（ContentMain）
>ContentMain 是tw-form和tw-table的集合它只接收一个参数mainData,内部的参数才是使用规则.此处只有基础配置属性，详情请跳转相关组件属性查看
#### ContentMain 属性
| 属性名 | 说明 | 类型 | 默认值 |
|---------------------|------------------------------------------|----------|-----------------------------------------|
| lists | 用于渲染表格上面搜索 | Array | [] |
| foldNumber | 第一行默认显示数量 | Number | 3 |
| rules | 验证规则（同el-form） | Object | {} |
| formData | 同lists的key绑定使用，同时也会默认和表格api绑定获取数据 | Object | {} |
| labelWidth | 搜索区域文字描述宽度 | String | '120px' |
| isFormBnts | 是否显示tw-form相关的操作按钮 | Boolean | true |
| beforeChange | 点击搜索按钮时间前触发的事件 | Function | - |
| url | 表格请求地址 | String | - |
| id | table的唯一id，一页面多表格场景须赋值，否则无法动态计算高度 | String | - |
| method | 表格动态url请求类型 | String | post |
| columns | 表格每一列渲染数据 | Array | [] |
| lists | 表格每一行渲染数据 | Array | [] |
| tableParams | 表格默认请求数据，这里代指mainData.formData。他们是绑定关系 | Object | { pageNumber: 1, pageSize: 25 } |
| tableHeight | 表格固定高度 | Number | 0 |
| isRradio | 单选 | Boolean | false |
| showPagination | 分页显示开关 | Boolean | true |
| botHeight | 是分页栏加上边距加底部空白位置高度 | Number | 50 |
| indexFixed | 索引左侧定位开关 | Boolean | false |
| isCheck | checkbox显示开关 | Boolean | false |
| checkFixed | checkbox左侧定位开关 | String | 'left' |
| showIndex | 索引显示开关 | Boolean | false |
| size | 表格大小配置 | String | 'large' |
| stripe | 斑马纹显示开关 | Boolean | true |
| border | 边框线显示开关 | Boolean | false |
| pageSizesArr | 分页页码 | Array | [25, 50, 100] |
| tableBtns | 单例按钮渲染数据 | Object | - |
| small | 每页显示条数 | Boolean | false |
| headBtns | 顶部操作按钮 | Array | [] |
| isTableHeader | 默认显示表格顶部操作栏 | Boolean | true |
| isLoadStatus | 默认首次不加载table数据 | Boolean | false |
| highlightCurrentRow | 是否高亮显示当前选中行 | Boolean | true |
| rowClassName | 行样式名称，同elTable一样 | Function | - |
| selectable | isCheck必须为true 用于判断选项是否可以点击，返回true或false | Function | { return true} |
| autoScrollToTop | 请求数据后是否自动滚动到顶部 | Boolean | true |
| layout | 表格分页布局默认配置，依赖elPagination | String | total, prev, pager, next, sizes, jumper |
| background | 表格的背景颜色 | Boolean | true |
| loadingBg | 表格接口加载状态下背景颜色 | String | rabg(225,225,225) |
| emptyText | 列表无数据时展示的文字 | String | 暂无数据 |
#### ContentMain 事件
| 事件名 | 说明 | 类型 |
| ---- |---------------------------------------------------------------| ---- |
| tableCallback | 表格api加载完成后响应的事件 | Function |
| checkSelect | 表格点击checkbox响应的事件，对应eltable - select事件 | Function |
| rowCheck | 表格点击行数据响应的事件 | Function |
| tableCurrentChange | 当表格的当前行发生变化的时候会触发该事件，如果要高亮当前行，请打开表格的 highlight-current-row 属性 | Function |
| resetForm | form点击重置按钮响应的事件 | Function |
| submitForm | form点击搜索按钮响应的事件 | Function |
| selectionChange | 表格的check选择， 对应eltable - selection-change事件 | Function |
#### ContentMain Exposes
| 事件名 | 说明 | 类型 |
| ---- |--------------------------| ---- |
| getTable | 主动触发表格加载 | Function |
| seekTable | 模拟触发form搜索事件功能 | Function |
| getAllCheck | 获取表格已勾选数据 | Function |
| getTableLists | 获取表格已渲染行数据 | Function |
| setTableLists | 设置表格待渲染的行数据 | Function |
| setCurrentRow | 设置表格行高亮 | Function |
| clearSelection | 清空表格已勾选数据 | Function |
| toggleRowSelection | 设置表格行数据选择 | Function |
| setTableTotal | 设置表格Total数值 | Function |
| setTableDataHeight | 重新计算表格的自适应高度 | Function |
#### ContentMain 插槽
>tw-form lists单个对象自定义key就是自定义插槽，适场景使用。虽然提供此功能，但不建议使用
| 事件名 | 说明 |
| ---- |----------------|
| tableHeader | 表格按钮上方自定义区域 |
| table-l | 同表格按钮一行，左侧可操作区域 |
| table-c | 同表格按钮一行，中间可操作区域 |
| table-r | 同表格按钮一行，右侧可操作区域 |
| tableBotHeader | 表格按钮下方自定义区域 |