mixins混入
# 介绍
什么是混入，官方给了这样的解释：
混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。
简单来说：
我们定义了混入文件js，里面包含了data、methods，然后将这个js引入到vue文件中时，该vue也就包含了js中的那些data、methods
# 优先级
通过以上介绍，我们不难发现一个问题，mixins文件中如果和vue文件中定义了同样名字的data或者methods时怎么办，会不会报错。
答案是不会的，mixins是一个非常灵活的解决方案，如果发生了以上情况（实际场景中也经常会出现这个情况），那么会以vue组件中定义的data为准，也就是说vue中定义的data和method优先级更高。
mixins相当于把常用的data封装了，不需要在每个页面都写一遍，那么如果我页面中需要自定义该属性，只要重写即可，vue重写的data，优先级会更高。
# ThListMixins
下面我们介绍一下ith-vue中我们使用到的mixins场景。
众所周知，列表是非常常见的场景，并且包含的接口调用、传参、分页都是基础一致的，不一样的地方仅仅是url不同而已，因此我们将列表共用的内容全部封装到了mixins文件中，生成了ThListMixins.js文件。
在ThListMixins中，目前分为了data、created、methods三个部分的内容
- data：
| 名称 | 描述 | 类型 | 说明 |
|---|---|---|---|
| listLoading | 属性 | Boolean | 绑定table的加载状态 |
| queryParam | 属性 | Object | 查询条件，用于绑定筛选区域的值 |
| ipagination | 属性 | Object | 绑定分页传参，包含current、pageSize、total |
| dataSource | 属性 | Array | 数据源，用于绑定table的列表数据 |
| isorter | 属性 | Object | 排序参数 |
| filters | 属性 | Object | 筛选条件，与queryParam的区别是，内置的重置方法不会清空filters中的内容 |
| defaultNotLoad | 属性 | Boolean | 页面默认是否在创建时直接加载列表数据，默认为false，加载 |
| area | 属性 | Array | 选择地区筛选存放的参数 |
| listTableHeight | 属性 | number | 数据表格内容高度,根据页面尺寸变化自动计算,需要在使用el-table 地方增加属性 :max-height="listTableHeight" |
| windowHeightCha | 属性 | number | 页面窗口头部高度, 默认250 可在调用组件中手动设置替换该值 |
| tableHeaderCache | 属性 | boolean | 表格头部缓存, 默认false 可在调用组件中手动设置替换该值,使用参考产品ith-admin中系统管理->参数设置->参数管理页面 |
| tableHeaderCacheKey | 属性 | boolean | 表格头部缓存key后缀,用于同一个路由下多个table需要缓存时使用, 默认'' 可在调用组件中手动设置替换该值 |
- created：
| 名称 | 描述 | 类型 | 备注 |
|---|---|---|---|
| created | created | Method | 组件创建时的钩子函数，在此函数中，我们判断defaultNotLoad参数，然后决定是否直接加载数据 |
- methods：
| 名称 | 描述 | 类型 | 备注 |
|---|---|---|---|
| loadData | 方法 | Method | 加载列表的方法，包含处理请求，处理回参 |
| requestList | 方法 | Method | 加载方法，对axios的二次封装 |
| getQueryParams | 方法 | Method | 整合查询条件的方法，将queryParam、filters、ipagination进行合并 |
| searchQuery | 方法 | Method | 提供给vue组件的点击查询事件 |
| searchReset | 方法 | Method | 提供给vue组件的点击重置事件 |
| handlerHeaderDragend | 方法 | Method | 提供给vue组件的拖拽表格宽度事件 |
| saveHeaderCache | 方法 | Method | 提供给vue组件的th-column-select @col事件保存缓存 |
# 滚动条使用问题
项目中列表数据过多需要在table内滚动的页面,需要给el-table设置一个max-height, 高度不用单独计算,直接使用ThListMixin.js中 listTableHeight 字段即可. 因为高度是基于可视区域计算的,若出现多个滚动条,需要调整windowHeightCha值的大小即可,如个别页面出现滚动条,只需要在当前页面data中定义一个windowHeightCha即可