0.3.0 • Published 4 years ago
vue-element-ts v0.3.0
vue-element-ts
项目介绍
此项目为基于 ElementUI 二次封装的组件库，项目可本地运行
组件使用文档
表格 VTableTs
特性
- 基于 Element UI 中的 el-table 组件进行的二次封装，兼容 el-table 的属性和事件。
- 通过配置 column 属性配置并渲染表格。
- 内部集成 el-pagination，并可根据配置项修改分页器。
- 内置表格高度自适应指令，可根据容器高度自动设置表格高度。
VTableTs 属性
VTableTs 继承了 el-table 的所有属性和事件，并增加了以下属性
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| columns | 表格项配置 | Array | ||
| selection | 是否显示多选框 | Boolean | false | |
| columnIndex | 是否显示序号 | Boolean | false | |
| pagination | 分页器配置 | Boolean, Object | ||
| total | 数据总条数 | Number | 0 |
column 属性
column 继承了 TableColumn，并扩展了新的属性
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| hidden | 对应列是否隐藏 | Boolean | false | |
| scopedSlots | 对应列是否使用自定义插槽 | Object |
scopedSlots 属性
scopedSlots 是用于配置自定义插槽的属性
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| cellSlotName | 单元格插槽名称 | String | ||
| headerSlotName | 表头插槽名称 | String |
Pagination 分页配置项
Pagination 集成自 ElPagination 并扩展新的属性，用于设置内置的分页器
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| background | 是否为分页按钮添加背景色 | Boolean | true | |
| disabled | 是否禁用 | Boolean | false |
组件对外暴露了 Pagination 的 slot，通过配置在配置项 layout 中增加 slot，并通过 pagination(slotName) 加入插槽
导航菜单 VMenuTs
特性
- 基于 Element UI 中的 el-menu 组件进行的二次封装，兼容 el-menu 的属性和方法。
- 通过配置 menus 属性自动渲染菜单。
VMenuTs 属性
options 为 Element UI 原生属性集合，具体可参考 Element 文档
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| options | el-menu 原生属性集合 | Object | ||
| menus | 菜单配置 | Array | 数组对象，参考 MenuItem |
MenuItem 属性
MenuItem 属性集成自 Element UI 中的 Submenu，并在此之上扩展了新的属性
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| name | 菜单标题，即菜单中显示文字 | String | ||
| icon | 菜单 icon 图标 class 名 | String | ||
| hidden | 是否隐藏菜单项（连同子级一起隐藏） | Boolean | false | |
| children | 子级菜单（组件内部会递归渲染） | MenuItem |