zh-elm-ui

基于 elementUI 的二次封装，包括表格、表单、分页等

安装

推荐使用 npm 的方式安装，它能更好地和 webpack 打包工具配合使用。

 npm i zh-elm-ui -S

引入 zh-elm-ui

在 main.js 写入以下内容：

import Vue from 'vue'
import ElmUI from 'zh-elm-ui'
import App from './App.vue'
import 'zh-elm-ui/lib/zh-elm-ui.css'

Vue.use(ElmUI)

new Vue({
  el: '#app',
  render: (h) => h(App),
})

本地预览

yarn install

运行

yarn serve

elm-table 表格文档

API

| 参数 | 说明 | 类型 | 默认值 | | --------------- | --------------------------------------------------- | -------- | ------------------------------------ | | tableConfig | 表格配置 | Object | | | tableColumns | 表格子项 | Array | 同原生 | | tableOperations | 表格操作项 | Object | | | pageParams | 分页参数 | Object | | | dataProps | manualTrigger 为 false 时，接口返回数据格式时获取值 | Object | {records: 'records',total: 'total',} | | dataList | manualTrigger 为 true 时，自定义表格数据 | Array | [] |

tableConfigs props

| 参数 | 说明 | 类型 | 默认值 | | --------------- | ------------------ | -------- | ------ | | operationAlign | 操作项水平对齐方式 | String | -- | | operationWidth | 操作项宽度 | String | | | tableDataParams | 初始化数据入参 | Object | | | manual | 是否自定义数据函数 | Boolean | false | | hidePagination | 隐藏分页 | Boolean | false | | multiSelect | 表格多选 | Boolean | false |

tableOperations props

| 参数 | 说明 | 类型 | | ------- | -------- | ------ | | options | 操作配置 | Object | | list | 操作列 | Array |

options props

| 参数 | 说明 | 类型 | | ----- | ---------- | ------ | | width | 操作列宽度 | String | | 其他 | 同原生 | -- |

list props

| 参数 | 说明 | 类型 | | ------- | -------------- | ------------------- | | text | 按钮文本 | String | | type | 按钮类型 | String | | isShow | 是否隐藏和显示 | [Boolean, Function] | | handler | 按钮方法类 | Function |

tableConfigs events

| 事件名 | 说明 | 类型 | 参数 | | ----------------- | --------------------------------- | -------- | ---- | | getTableData | 获取数据的函数 | Function | | | selectChange | 表格多选方法，multiSelect 为 true | Function | | | checkSelectEnable | 是否禁止选择，multiSelect 为 true | Function | |

elm-form 表单文档

API

| 参数 | 说明 | 类型 | 默认值 | | ----------- | -------- | -------- | ------ | | formConfig | 表单配置 | Object | | | formColumns | 表单项 | Object | |

formConfigs props

| 参数 | 说明 | 类型 | 默认值 | | ---------- | ------------ | -------- | ------ | | rowLayout | 表单布局 | Object | | | labelWidth | 表单项宽度 | String | 同原生 | | size | 表单尺寸大小 | String | 同原生 |

formColumns props

| 参数 | 说明 | 类型 | 可选值 | 默认值 | | ---------- | -------------------------- | ------ | ----------------------- | ------ | | type | 表单类型 | String | select、radio、checkbox | -- | | component | 动态表单类型 | String | 除上述之外的表单类型 | -- | | label | 表单项名称 | String | '' | -- | | $attrs | 组件 props 的继承 | Object | -- | {} | | colLayout | 子项布局，优先于 rowLayout | Object | -- | -- | | labelWidth | label 的宽度 | String | -- | -- |

event

| 事件名 | 说明 | 类型 | 参数 | | --------- | -------- | -------- | ---------- | | on-submit | 提交事件 | Function | 表单返回值 | | on-rest | 重置事件 | Function | 重置表单 |