0.3.0 • Published 3 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 |