cmui-common

一、 安装与使用

yarn add cmui-common --save

如果要删除模块
yarn remove cmui-common

1 全局引入cmui-common

在入口main.js中

import Vue from 'vue'
import CmuiCommon from 'cmui-common'
Vue.use(CmuiCommon)

后续组件可以直接如下使用，而不用在当前vue组件中进行import然后注册

<im-tree></im-tree>

2 局部按需引入单个组件

<im-tree></im-tree>
...

import {ImTree} from "cmui-common"
export default {
	components: {ImTree}
}

组件api说明文档

1 基础扩展组件

按钮

/* 添加 */
<button-add />
/* 取消 */
<button-cancel />
/* 删除 */
<button-delete />
/* 编辑 */
<button-edit />
/* 保存 */
<button-save />
/* 查询 */
<button-search />

2 树组件

普通树

在element-ui树形组件el-tree基础上拓展，基本属性,事件，方法请参考：https://element.eleme.cn/#/zh-CN/component/tree#props

拓展功能:远程url加载，数据适配，节点图标,数据过滤

使用方法：

<im-tree url="http://"></im-tree> 
or
<im-tree :model="[]"></im-tree>

以下列出了拓展的属性说明

props

| 参数 | 说明 | 类型 | 默认值 | | ------------ | ------------ | ------------ | ------------ | | url | 远程加载数据的请求地址 | String | - | | query | 请求附加的查询参数(get)，根据需求配置 | String | - | | method | 请求方式 | String | GET | | ajax-request-cache | 请求地址是否缓存 | Boolean | true | | request-data-root | 请求数据根,暂时请使用read-property支持读取数据的一级根| String | - | | read-property | 请求数据json的哪个属性作为树的数据源（数组） | String | data | | request | 如果定义了此函数，在配置url情况下会调用此函数加载数据，返回AxiosPromise类型 | Function | - | | tool-options | 是否显示工具栏上的过滤搜索组件，并提供全部展开和全部折叠图标按钮 | Array | - | | operations | 节点右侧操作按钮图标[{icon: 'icon-edit', handler: edit},{text: '保存', handler: edit},{text: '删除', handler: delete, onShow: ifShow}] | Array | | | model | 静态模型数据,当配置了url时会忽略静态数据加载，除了支持树型数据外，也支持原始表格数据（通过id-key和parent-key关联） | Array | - | | id-key | 主键标识 , 如果不设置，数据中必须有id属性 | String | id | | title-key | 数据中哪个字段作为显示文本的key，如果不设置默认label | String | label | | parent-key | 数据中哪个字段作为建立父子关系的标识, 当数据类型是树状结构时可以不设置此字段| String | pid | | children-key | 数据中哪个字段作为建立父子关系的标识，当数据类型是表格结构时可以不设置此字段 | String | children | | show-icon | 是否在节点前面显示图标,如果要修改父子节点图标，可以通过folder-icon和leaf-icon属性指定，如果数据中有icon属性会以数据中的icon属性为准 | Boolean | false | | folder-icon | 文件夹图标（判定标准为是否含有子节点） | String | el-icon-folder | | leaf-icon | 子节点图标 | String | el-icon-document |

events

| 方法名 | 说明 | 参数 | 参数说明 | | ------------ | ------------ | ------------ |------------ | | node-click | 节点单击事件 | (data, node) | data是节点数据，node是内置节点对象| | node-dblclick | 节点双击事件 | (data, node) |data是节点数据，node是内置节点对象| | current-change | 当前选择变化 | (data, node) |data是节点数据，node是内置节点对象| | on-load-before | 远程请求加载前事件，可以自定义参数 | (params, requestConfig) | requestConfig可以配置自定义的请求头如token等| | on-load | 请求完成事件 | (result) | 后台响应json数据| | on-data-rendered | 数据处理完成事件 | (result) | 后台响应json数据| | on-load-success | 最后加载成功事件 | (tree) | 树对象|

methods

| 方法名 | 说明 | 参数 | 参数说明 | | ------------ | ------------ | ------------ |------------ | | toggleExpand | 全部展开或全部折叠 | () | - | | getOriginalTree | 获取内置el-tree对象 | () |-| | getTreeData | 获取树型数据 | () | - | | select | 选中节点,需要设置id-key | (val) | 主键id或者节点对象| | getSelectedKey | 获取选择节点的主键，需要设置id-key | () | - | | getSelected | 获取选择的节点对象Node | () | -| | getSelectedLabel | 获取选择节点的显示的文本 | () | 树对象| | getCheckedKeys | 获取所有勾选了复选框的主键集合 | (leafOnly) | leafOnly标识是否只返回叶子节点| | getCheckedNodes | 获取所有勾选了复选框的节点集合 | (leafOnly) | leafOnly标识是否只返回叶子节点| | getCheckedLabels | 获取所有勾选了复选框的显示文本集合 | (leafOnly) | leafOnly标识是否只返回叶子节点| | setCheckedKeys | 设置指定节点复选框选中,使用此方法必须设置 id-key 属性 | (keys, leafOnly) | -| | setCheckedNodes | 设置指定节点复选框选中,使用此方法必须设置 id-key 属性 | (nodes, leafOnly) | -| | setChecked | 通过 key / data 设置某个节点的勾选状态，使用此方法必须设置 id-key 属性 | (data, checked, deep) | -| | filter | 触发过滤操作 | (val) | 入参字符串，过滤的关键字| | reload | 远程重新加载刷新 | () | | | clear | 清除数据 | () | |

原始表格数据结构参考

     [
        {id: 1, title: "全国"},
        {id: 2, title: "北京", parentId: 1},
        {id: 3, title: "河北", parentId: 1}
        {id: 4, title: "海淀区", parentId: 2}
     ]

下拉树

实际上是下拉控件+树形组件组合

使用方法：

<im-select-tree url="http://" v-model="val"></im-select-tree> 
or
<im-select-tree :model="[]" v-model="val"></im-select-tree>

下拉树中与树有关的属性配置完全参考im-tree,以下拓展属性说明

props

| 参数 | 说明 | 类型 | 默认值 | | ------------ | ------------ | ------------ | ------------ | | width | 下拉树控件的宽度,单位px,如果要使用百分比可以配置style="width:100%;" | Number | - | | value / v-model | 下拉树绑定的值 | String, Number, Array | - | | readonly | 是否只读,如果只读点击控件不会弹出 | Boolean | false | | filter-on-input | 是否在下拉控件中的文本框中支持搜索过滤 | Boolean | false | | placeholder | 下拉控件未选择时占用提示文本 | String | 请选择 | | multiple | 是否支持多选，如果多选，绑定的值为数组 | Boolean | false | | multiple-tags | 多选选择后是否以标签形式展现 | Boolean | false | | max-content-height | 下拉弹出的dom的最大高度,单位px，如果超过则显示滚动条，如果不配置将根据数据量显示实际高度 | Number | - | | fixed-position | 当因为层级因素导致下拉树被遮挡时，可设置此属性 | Boolean | false |

events

参考im-tree,以下拓展事件

| 方法名 | 说明 | 参数 | 参数说明 | | ------------ | ------------ | ------------ |------------ | | on-change | 节点单击事件 | (val, oldVal, currentText) | val是绑定值， currentText 是当前选择的文本|

methods

| 方法名 | 说明 | 参数 | 参数说明 | | ------------ | ------------ | ------------ |------------ | | clear | 清除数据 | () | | | getText | 获取下拉树选择的文本 | () |-| | getValue | 获取下拉树绑定的值 | () | - | | getTreeValue | 同getValue | () | | | getSelected | 获取选择的节点对象 | () | -| | load | 重新加载数据（配置url场景下） | () | |

3 表格组件

在element-ui表格组件el-table基础上拓展，基本属性,事件，方法请参考：https://element.eleme.cn/#/zh-CN/component/table

拓展功能:远程url加载，数据适配，分页控件集成, 字段维护（动态字段，字段交换排序，字段隐藏显示），海量数据（受限于内存）虚拟滚动加载，slot拓展

使用方法：

<im-table url="http://" :columns="columns"></im-table> 
or
<im-table :model="[]" :columns="columns"></im-table>

props

| 参数 | 说明 | 类型 | 默认值 | | ------------ | ------------ | ------------ | ------------ | | url | 远程加载数据的请求地址 | String | - | | query | 请求附加的查询参数(get)，根据需求配置 | String | - | | method | 请求方式 | String | GET | | ajax-request-cache | 请求地址是否缓存 | Boolean | true | | request-data-root | 请求数据根,支持多级表达式如： 'res.data.list'| String | - | | read-property | 请求数据根下的哪个属性作为树的数据源（数组） | String | data | | request | 如果定义了此函数，在配置url情况下会调用此函数加载数据，返回AxiosPromise类型 | Function | - | | pagination | 是否显示分页控件，可以简单的配置true或者对象如:pagination="{total: 'total', currentPage: 'page', pageSize: 'size'}"去适配远程数据 | Object,Boolean,String | - | | enable-page-selection | 是否启用翻页选中功能,必须配置id-key有效，翻页时记录当前页选择的keys集合 | Boolean | false | | model | 静态模型数据,当配置了url时会忽略静态数据加载 | Array | - | | id-key | 数据中id属性，可选 | String | id | | fit-height | 在定义了表格高度的情况下撑满表格高度，如果有分页控件会置底| Boolean | false | | sortable | 开启行拖拽改变数据顺序功能 | Boolean | false | | columns-sortable | 开启列拖拽改变列顺序功能 | Boolean | false | | enable-hide-columns | 开启列维护功能，可以修改要显示或隐藏的列列表 | Boolean | false | | size | 当配置为mini，配合fixed-row-height会固定行高度为25px | String | - | | fixed-row-height | 是否固定行高，如果开启后，即使某列的数据很多超出默认行高，也不会折行显示，但是会显示不全，如果要看完整的信息，需要配合slot自定义tooltip |Boolean|false | | enable-virtual-scroll | 开启虚拟滚动，支持海量数据滚动渲染 |Boolean|false | | virtual-flow-limit | 流水数据最大限制，虚拟滚动场景下，支持定时或者实时往列表push数据，并置顶显示，类似告警流水窗口，如果做了限制，在达到指定数据后会从尾部清除数据，保证数量上限 |Boolean|false |

events

| 方法名 | 说明 | 参数 | 参数说明 | | ------------ | ------------ | ------------ |------------ | | on-load-before | 远程请求加载前事件，可以自定义参数 | (params, requestConfig) | requestConfig可以配置自定义的请求头如token等| | on-load-success | 最后加载成功事件 | (tree) | 树对象| | on-pagesize-change | 分页大小改变事件 | (currentPage,pageSize,query) | | | on-page-load | 分页页码变化事件 | (currentPage,pageSize,query) | |

4 布局组件

边框布局

上右下左中布局（东南西北中布局）

5 右键菜单