vue-element-ts

项目介绍

此项目为基于 ElementUI 二次封装的组件库，项目可本地运行

项目地址

组件使用文档

表格 VTableTs

特性

1. 基于 Element UI 中的 el-table 组件进行的二次封装，兼容 el-table 的属性和事件。
2. 通过配置 column 属性配置并渲染表格。
3. 内部集成 el-pagination，并可根据配置项修改分页器。
4. 内置表格高度自适应指令，可根据容器高度自动设置表格高度。

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

特性

1. 基于 Element UI 中的 el-menu 组件进行的二次封装，兼容 el-menu 的属性和方法。
2. 通过配置 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 | | |