Khari-component NPM

kolor-element-ui

基于vue2+ 使用jsx二次封装element-ui的业务组件，通过全数据配置方式生成视图

Project setup

npm install / yarn

Compiles and hot-reloads for development

npm run serve / yarn serve / yarn start

Compiles and minifies for production

npm run build / yarn build

Lints and fixes files

npm run lint

Customize configuration

See Configuration Reference.

KolorTable组件 Attributes

根容器为el-table组件，组件的Attributes除了以下新增的之外，还支持所有el-table的Attributes

新增参数	说明	类型	可选值	默认值
data	表格数据对象	Array		-	-
columns	单元格数据对象(用于渲染)	Array	全部为el-table-column的Attributes	-
show-pagination	是否展示分页器	boolean	false/true	true
pagination	分页配置	Object	全部为el-pagination的Attributes	-

KolorTable组件 Events

除了下面新增的events之外，还支持所有el-table的events

事件名	说明	返回值
page-change	监听分页变化，映射组件的所有事件	{ currentPage, pageSize }

父组件访问el-table组件实例

<ko-table 
  :data="tableData" 
  :columns="columns" 
  :border="true" 
  :pagination="pagination"
  :show-pagination="true"
  @page-change="pageChange"
  @row-click="rowClick"
  stripe
  ref="kolorTable"
/>

...

this.$refs.multipleTable.ElTable();

// 拿到实例时候，可以执行所有官方el-table的Methods

// 例： 用于多选表格，清空用户的选择  其余Methods查看element-ui官方文档 

<[链接地址](https://element.eleme.cn/#/zh-CN/component/table#table-methods)>

this.$refs.multipleTable.ElTable().clearSelection();

KolorQueryFormJsx 组件 Attributes

根容器为el-form组件，组件的Attributes除了以下新增的之外，还支持所有el-form的Attributes和事件

新增参数	说明	类型	可选值	默认值
v-model	表单的双向绑定值	object		-	-
formItems	表单的数据对象(用于渲染)	FormItem[]	-	[]

FormItem数据结构

键名	说明	类型	可选值
type	表单项类型	string	select
itemLists	当type为'select'时传，下拉框列表	ItemList[]	-
其余参数全部为组件的prop	-	-	-

ItemList数据结构

键名	说明	类型	可选值
prop	下拉框v-model绑定值的字段名	string	-
dataLists	下拉框option的数据对象	any[]	any还可为的所有prop
formatDataKey	格式化dataLists中绑定到上面的label和value字段	object	-
其余参数全部为组件的prop	-	-	-