> chll-commom工具库是根据个人实战开发经验，基于Vue2和ElementUI封装的业务组件库。目前提供的几个业务组件，后续还会不断的完善：
npm install chll-commonyarn add chll-commonnpm install chll-commonpnpm install chll-common
import chllCommon from 'chll-common'
Vue.use(chllCommon)
- 按需引入
import chllCommon from 'chll-common'
const {
DateRangePicker,
Select,
SearchForm,
TextEllipsis,
TableList } = chllCommon
Vue.use(DateRangePicker).use(Select).use(SearchForm).use(TextEllipsis)
支持的业务组件
$3
> TextEllipsis是一个超长文本显示省略号的组件，主要解决webkit内核场景下浏览器渲染问题。支持单行超长文本隐藏，也支持多行文本#### 参数解读 - prop
|prop| 默认值 | 解释 |
| -- | --- | --- |
| value | 必填 | 要显示的文案
| width | 100% | 指定超长文案隐藏的边界 |
| mulRows | boolean | 是否是多行文本 |
| maxRows | number | 最大行数，换行超过最大行数的时候，显示省略号
#### 使用方式
width="200"
mulRows
:maxRows="2"
/>
---
Select
> 基于ElementUI的select组件封装。ElementUI的select组件使用起来很麻烦，每次都要写options的for循环。该组件主要就是优化了options的写法。$3
| prop | 类型 | 默认值 | 说明
|--|--|--|--|
|value | string \| number \| Array | 必填 | 双向绑定的值
| list| Array | 必填 | 提供下拉选择的枚举项，就是options循环遍历的数组
| ……| 其他的字段基本与原生的一致， 保留了原生的能力 |$3
:list="options"
@change="selectChange"
>selectItem: '',
options: [
{
key: '123',
value: '123'
},
{
key: '456',
value: '456'
}
]
--
DateRangePicker
> 基于原生的DateTimePicker组件的封装，对业务常用的一些快捷项进行结合，提供了快捷的日期范围选择。$3
| prop | 类型 | 默认值 | 说明
|--|--|--|--|
|value | Array | 必填 | 双向绑定的值
| showPickerOptions | {} | 配置项 | 提供快捷的选择项，今天、昨天、本周、上周、本月、上月、过去7天、过去30天等$3
/>
---
SearchForm
> 基于el-form和表单其他项封装的组件，主要作用是填充后台查询模块的查询表单。目前支持Input、Select和 DateRangePicker等三个类型的项，后续会不断的扩充。
$3
| prop | 类型 | 默认值 | 说明
|--|--|--|--|
|value| {} | 必填 | 表单的双向绑定值
| formFields | {} | 必填 | 查询项的配置
| formRules | {} | 非必填 | 表单的校验
| boforeSubmit | Fn | 非必填 | 点击查询，触发请求之前的表单自定义校验$3
:formFields="formFields"
@search="queryTableData"
@reset="resetTable"
/>
---
TableList
> 基于原生的el-table组件，结合了el-paginaion功能。支持表格列的配置和、请求参数的构造、请求发起时的loading、响应值的处理和翻页等功能。是一个高集成的功能强大的组件,支持自定义表格数据和表格头。$3
| prop | 类型 | 默认值 | 说明
|--|--|--|--|
tableConfig|对象 | {data: [], columnList: [], total: null, laoding: false} | data:是表格要渲染数据的集；columnList：代表表格列的配置项；total：代表当前查询条件下的数据总数；loading：代表表格查询时的加载状态
| pageConfig| | {pageSizes:[100, 200, 300, 400],pageSize: 100} | 翻页配置项
|requestFn| Fn | 非必填 | 请求方法
|requestParams| {} | 非必填 | 请求方法的参数
|handleResponseFn| Fn| 非必填 | 处理返回值的方案
|……||||$3
:tableConfig="tableConfig"
:requestFn="getLogOffList"
:requestParams="buildSearchFormParams()"
:pageConfig="pageConfig"
selection
:selectable="filterSelectableRow"
@selectionChange="handleSelectionChange"
>