SelectBox 树状选择组件

废话不多说 先贴图 并附上Git地址

这里是git地址

树状选择效果图

vue3 element plus 树形结构箭头更换图标 element ui树形组件_ico

列表多选效果图

vue3 element plus 树形结构箭头更换图标 element ui树形组件_vue.js_02

开始废话

开发背景

众所周知，大部分企业的管理后台的开发离不开权限管理，一般来说，我们会分析各种权限把他们量化为资源，然后分配到各个角色/部门中，然后再给用户赋予各种角色或者挂载到各个部门。 如果权限设计的足够复杂，第三方UI常用的穿梭框等组件就不能完美的满足我们的需求，进而需要开发人员去根据需求，寻找多个组件组合使用。 但是，里面的业务逻辑万变不离其宗。 接下来 介绍一下笔者写的这款树状选择组件。
简单来说组件分为左右两个模块 左侧为选择树（例如 部门-角色树 用户-权限树）或者多选列表。 右侧为已选数据。 点击保存 会返回三个数据，依次为 本次修改新增的数组ID 本次修改删除的数组ID 以及 所选择的所有数据ID集合

最后给我的老东家打个广告，金现代企业股份有限公司做的项目真的不错，在里面带的一年里，成长很多，尤其在那里接触到了UML统一建模语言，对专业技能提升真的很大。在此感恩。

接下来是组件的使用文档

selectBox

使用方法

// 首先把组件从git上down下来 然后引用到项目里，在项目里use一下
    import selectBox from "@/components/selectBox";
    Vue.use(selectBox);

Attributes

参数

说明

类型

是否必填

可选值

默认值

allNode

所有的节点数据

Array[TreeNode]

true

–

[]

checkedNode

已选择的节点Id集合

Array[String]

true

–

[]

defaultProps

配置选项，具体看下表

Object

false

–

–

listStyle

右侧展示方式类型

String

false

‘tree’/‘list’

‘tree’

boxDialogVisible

是否展示弹出框

Boolean

true

true/false

false

iconConfig

图标配置（里面有必填属性，起名不准确，之后会改，是一个依赖项）

iconConfig

true

–

iconConfig

title

对话框标题

String

true

–

“权限控制”

rightKey

右侧列表显示所对应数据里面key的属性（本来默与左侧显示一样，但确实有不一样的场景，就很蛋疼）

String

false

–

“name”

searchConfig

搜索框配 见下表置

Object

false

–

searchConfig

indep

树状图时叶子节点改变时，是否不与父节点产生关联

Boolean

false

true/false

false

Events

事件名称

说明

回调参数

close

当组件关闭时触发

null

save

点击保存时触发

返回三个参数(addList,deleteList,checkedNode)，依次为:本次修改后应该新增的Id数组，本次修改后应该删除的Id数组，本次修改后所有选中的数据集合

props

参数

说明

类型

是否必填

可选值

默认值

label

指定节点标签为节点对象的某个属性值

string, function(data, node)

true

–

‘id’

children

指定子树为节点对象的某个属性值

string

true

–

‘children’

disabled

指定节点选择框是否禁用为节点对象的某个属性值

boolean, function(data, node)

true

–

–

isLeaf

指定节点是否为叶子节点，仅在指定了 lazy 属性的情况下生效

boolean, function(data, node)

true

–

–

TreeNode

参数

说明

类型

是否必填

可选值

默认值

id

默认的节点唯一标识，如果需要更改 请参照element-ui的tree组件的props属性，或者看上表

String

true

–

–

name

左侧展示值，如果需要更改 请参照element-ui的tree组件的props属性，或者看上表

String

true

–

–

type

节点类型，用来过滤父级节点

String

true

–

–

pid

父节点ID，如果是根节点请设置为null

String

true

–

–

iconConfig

参数

说明

类型

是否必填

可选值

默认值

parentType

左侧为树状图时父节点图标配置

Object

true

–

{key:‘pre’,icon:‘el-icon-tree-rGroup’}

childrenType

左侧为树状图时子节点图标配置

Object

true

–

{key:‘permission’,icon:‘el-icon-tree-role’}

在这里解释一下，组件里会根据父节点配置的key的值，与节点数据里面的type做对比，从而过滤掉选中的父节点。
因为很多业务场景下，右侧的列表只希望展示选中的子节点，
如果需要展示选中的父级节点，可以把parentType里面的key设置为空

searchConfig

参数

说明

类型

是否必填

可选值

默认值

title

其实就是placeholder啦~

String

false

–

‘请输入’

http

这是你项目中搜索所调用的接口，接受一个默认参数（params），需要返回一个TreeNode结构的集合

Promise

true

–

–

show

是否显示搜索框,如果是false，其他的都可以不传

Boolean

false

true/false

true

key

搜索时用到的关键词

String

true

–

‘name’

// 可能比较难理解，在这里演示一下 searchConfig，在项目里有demo 可以拉下来看一下
/** 
 *  例如你的调用查询接口为 this.$axios  ，且this.$axios接受一个参数 
    参数形式为 
    @params : data:{params:{key:value}}
    @key ： searchConfig所配置的key
*/
const getData = params => {
    this.$axios(params).then(res=>{

    })
};
let searchConfig = {
   http:this.getData,
    key:'name'
}
笔者致力于开发遇到的各种复杂组件，虽说授人以鱼不如授人以渔，但是很多情况下我们是需要先恰饭的，所以先把鱼钓上来，希望帮各位刚上路的道友填饱肚子
以下是我所有组件开源的地址与博客 希望各位多点赞多star