基于 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/