0.1.6 • Published 2 years ago
czhl-tmp v0.1.6
基于 Vue 3 + Typescript + Vite + Element Plus 的常用组件库
使用方法
npm install czhl-tmp
组件使用说明
表单筛选框配置 queryConfig
| 属性 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| label | - | string | - | - |
| prop | 必填，对应表单键名 | string | - | - |
| type | 表单类型 | string | input/select/year/month/date/datetime/week/datetimerange/daterange | - |
| placeholder | - | - | - | - |
| options | 仅当 type 为 select 时有效，select 下拉数据，格式参照 element | array | - | - |
| valueFormat | 仅当 type 为时间相关类型时有效，格式化所选择时间的值 | string | 参照时间类型 | YYYY-MM-DD HH:mm:ss |
表单筛选框事件
| 事件名 | 说明 | 回调参数 |
|---|---|---|
| onSearch | form 表单值改变时触发 | form 表单数据 |
表格数据属性设置 data
注意：data 为包含 list 和 total 的结构体 默认为 { list:[], totla: 0 }
表格配置 tableConfig
| 属性 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| selection | 选择功能 | boolean | - | false |
| multiple | 当 selection 为 true 时有效，是否多选 | boolean | - | true |
| column | 表单项 | array | - | - |
| toolBar | 操作栏项 | array | - | - |
表格 column 配置 tableConfig.column
| 属性 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| label | - | string | - | - |
| prop | - | string | - | - |
| formatter | 列格式化 | function | - | - |
| selectable | 默认勾选，当 selection 为 true 时有效，实验性功能 | array | - | - |
表格 toolBar.column 配置 tableConfig.toolBar
toolBar 为 object,也支持设置 width 和 label，这里主要说 column 配置
| 属性 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| type | 操作按钮类型 | string | 参考 element button 类型 | - |
| show | 动态展示按钮 | function | - | - |
| disabled | 禁用按钮 | function | - | - |
| label | 按钮文字 | string | - | - |
| labelFunction | 动态按钮文字 | function | - | - |
表格分页配置 pageConfig
| 属性 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| show | 是否显示分页器 | boolean | - | - |
| pageSize | - | number | - | - |
| currentPage | - | number | - | - |
| layout | 参考 element 分页 layout | boolean | - | - |
官方源
npm config set registry=https://registry.npmjs.org/
淘宝源
npm config set registry=https://registry.npm.taobao.org/