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();
<[链接地址](https:
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 |
- |
- |
- |