simple-element v0.5.3

介绍

对 element 常用组件的封装，易于上手。

安装

npm:

\$ npm install simple-element

yarn:

\$ yarn add simple-element

快速使用

// main.js
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import SimpleElement from 'simple-element'

// 引入Element组件，可按需引入 https://element.eleme.cn/#/zh-CN/component/quickstart#an-xu-yin-ru
Vue.use(ElementUI)
// 引入SimpleElement组件
Vue.use(SimpleElement)

通用组件

com-dialog

通用弹窗组件，内部实现滚动和关闭自动回滚到顶部的功能。用于作为组件根布局。

com-form

通用表单组件，封装了表单元素的自动生成、校验、确认按钮和取消按钮。

rowList 属性为二维数组，元素可为以下选项

1. 对象，用于单独实现一行表单数组。值为{ render: true, type: xxx, ...}，即必须包含 render 属性且值为 true。
2. 数组，对应的字段如下表。

radio-group 类型元素 options

回调事件

插槽

• default。renderAll 为 true 时对应的插槽。

• render-row。rowList 对象元素对应的插槽 。

  slot-scope 属性	类型	描述
  type	string	对象的 type 属性
  formData	array	表单数据

• render-item。rowList 数组元素某一项自定义内容对应的插槽 。

  slot-scope 属性	类型	描述
  formData	array	表单数据
  item	object	该项数据完整内容
  prop	string	数据的 prop 属性
  indexRow	number	数据对应的列索引
  indexItem	number	数据对应的行索引

• bottom-btn。自定义底部确认和取消按钮的插槽，非空时会替换默认的按钮。

com-form-item

表单元素的包装层，封装了 tooltip。

com-table

表格组件元素的包装层，封装顶部搜索栏、侧弹选项栏和底部分页栏。

搜索栏相关的属性

表格相关的属性

分页栏相关的属性

回调事件

插槽

• search-front。搜索栏前置区域的插槽。
• search-before-search。搜索按钮前区域的插槽。
• search-middle。搜索栏中间区域的插槽。
• more-options。侧弹栏的插槽。

• table-custom。表格自定义列的插槽。

  slot-scope 属性	类型	描述
  row	array	表单行数据
  column	object	表单列信息
  colKey	string	表格列对应的 field
  val	number	表格列 field 对应的值
  index	number	表格行索引

• bottom。表格底部搜索栏中间插槽。