|
|
@@ -15,6 +15,21 @@
|
|
|
- [Events](#events)
|
|
|
- [方法](#%E6%96%B9%E6%B3%95)
|
|
|
- [TreeNode](#treenode)
|
|
|
+- [SelectBox 树状选择组件](#selectbox--%E6%A0%91%E7%8A%B6%E9%80%89%E6%8B%A9%E7%BB%84%E4%BB%B6)
|
|
|
+ - [废话不多说 先贴图](#%E5%BA%9F%E8%AF%9D%E4%B8%8D%E5%A4%9A%E8%AF%B4-%E5%85%88%E8%B4%B4%E5%9B%BE)
|
|
|
+ - [树状选择效果图](#%E6%A0%91%E7%8A%B6%E9%80%89%E6%8B%A9%E6%95%88%E6%9E%9C%E5%9B%BE)
|
|
|
+ - [列表多选效果图](#%E5%88%97%E8%A1%A8%E5%A4%9A%E9%80%89%E6%95%88%E6%9E%9C%E5%9B%BE)
|
|
|
+ - [开始废话](#%E5%BC%80%E5%A7%8B%E5%BA%9F%E8%AF%9D)
|
|
|
+ - [开发背景](#%E5%BC%80%E5%8F%91%E8%83%8C%E6%99%AF-1)
|
|
|
+ - [接下来是组件的使用文档](#%E6%8E%A5%E4%B8%8B%E6%9D%A5%E6%98%AF%E7%BB%84%E4%BB%B6%E7%9A%84%E4%BD%BF%E7%94%A8%E6%96%87%E6%A1%A3)
|
|
|
+- [selectBox](#selectbox)
|
|
|
+ - [使用方法](#%E4%BD%BF%E7%94%A8%E6%96%B9%E6%B3%95-1)
|
|
|
+ - [Attributes](#attributes-1)
|
|
|
+ - [Events](#events-1)
|
|
|
+ - [props](#props)
|
|
|
+ - [TreeNode](#treenode-1)
|
|
|
+ - [iconConfig](#iconconfig)
|
|
|
+ - [searchConfig](#searchconfig)
|
|
|
|
|
|
<!-- END doctoc generated TOC please keep comment here to allow auto update -->
|
|
|
|
|
|
@@ -99,8 +114,8 @@ Vue.use(DrawFlow);
|
|
|
|
|
|
## 开始废话
|
|
|
### 开发背景
|
|
|
-#### 众所周知，大部分企业的管理后台的开发离不开权限管理，一般来说，我们会分析各种权限把他们量化为资源，然后分配到各个角色/部门中，然后再给用户赋予各种角色或者挂载到各个部门。 如果权限设计的足够复杂，第三方UI常用的穿梭框等组件就不能完美的满足我们的需求，进而需要开发人员去根据需求，寻找多个组件组合使用。 但是，里面的业务逻辑万变不离其宗。 接下来 介绍一下笔者写的这款树状选择组件。
|
|
|
-#### 简单来说组件分为左右两个模块 左侧为选择树（例如 部门-角色树 用户-权限树）或者多选列表。 右侧为已选数据。 点击保存 会返回三个数据，依次为 本次修改新增的数组ID 本次修改删除的数组ID 以及 所选择的所有数据ID集合
|
|
|
+ 众所周知，大部分企业的管理后台的开发离不开权限管理，一般来说，我们会分析各种权限把他们量化为资源，然后分配到各个角色/部门中，然后再给用户赋予各种角色或者挂载到各个部门。 如果权限设计的足够复杂，第三方UI常用的穿梭框等组件就不能完美的满足我们的需求，进而需要开发人员去根据需求，寻找多个组件组合使用。 但是，里面的业务逻辑万变不离其宗。 接下来 介绍一下笔者写的这款树状选择组件。
|
|
|
+ 简单来说组件分为左右两个模块 左侧为选择树（例如 部门-角色树 用户-权限树）或者多选列表。 右侧为已选数据。 点击保存 会返回三个数据，依次为 本次修改新增的数组ID 本次修改删除的数组ID 以及 所选择的所有数据ID集合
|
|
|
|
|
|
最后给我的老东家打个广告，金现代企业股份有限公司做的项目真的不错，在里面带的一年里，成长很多。在此感恩
|
|
|
## 接下来是组件的使用文档
|
|
|
@@ -154,9 +169,10 @@ Vue.use(DrawFlow);
|
|
|
|--------------|----------------------------|--------|----------|--------|---------------------------------------------|
|
|
|
| parentType | 左侧为树状图时父节点图标配置 | Object | true | -- | {key:'pre',icon:'el-icon-tree-rGroup'} |
|
|
|
| childrenType | 左侧为树状图时子节点图标配置 | Object | true | -- | {key:'permission',icon:'el-icon-tree-role'} |
|
|
|
-<h4> 在这里解释一下，组件里会根据父节点配置的key的值，与节点数据里面的type做对比，从而过滤掉选中的父节点。<h4/>
|
|
|
-<h4> 因为很多业务场景下，右侧的列表只希望展示选中的子节点，<h4/>
|
|
|
-<h4> 如果需要展示选中的父级节点，可以把parentType里面的key设置为空<h4/>
|
|
|
+
|
|
|
+ 在这里解释一下，组件里会根据父节点配置的key的值，与节点数据里面的type做对比，从而过滤掉选中的父节点。
|
|
|
+因为很多业务场景下，右侧的列表只希望展示选中的子节点，
|
|
|
+ 如果需要展示选中的父级节点，可以把parentType里面的key设置为空
|
|
|
|
|
|
### searchConfig
|
|
|
| 参数 | 说明 | 类型 | 是否必填 | 可选值 | 默认值 |
|
xiaoyang
