cmui-common v1.1.7

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

events

methods

原始表格数据结构参考

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

events

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

methods

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

events

4 布局组件

边框布局

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

5 右键菜单