Zh-elm-ui NPM | npm.io

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	--	--