el-select和el-tree结合使用-树形结构多选框

接上篇文章需求，选择树形结构的时候有多选的情况，用上一篇的单选并不能解决问题，下图是这次达到的效果

话不多说，上代码

html

<el-select v-model="value" multiple placeholder="请选择" :popper-append-to-body="false"@remove-tag="removetag"  collapse-tags @clear="clearall" clearable ><el-option :value="selectTree" class="setstyle" disabled><el-tree :data="list" :props="defaultProps" ref="tree"show-checkbox check-strictly :expand-on-click-node="false" node-key="id"check-on-click-node @check-change="handleNodeClick"></el-tree></el-option>
</el-select>

<script>export default {data() {return {value:[],selectTree:[],defaultProps:{children: 'children',label: 'label'},list: [{id: 1,label: '一级 2',children: [{id: 3,label: '二级 2-1',children: [{id: 4,label: '三级 3-1-1'}, {id: 5,label: '三级 3-1-2',}]}, {id: 2,label: '二级 2-2',children: [{id: 6,label: '三级 3-2-1'}, {id: 7,label: '三级 3-2-2',}]}]}],}},methods: {handleNodeClick(data,self,child) {console.log(this.$refs.tree.getCheckedNodes())let datalist = this.$refs.tree.getCheckedNodes()this.selectTree = [] //置空this.value = []datalist.forEach((item)=>{this.selectTree.push({id:item.id,label:item.label})this.value.push(item.label)})},removetag(){this.selectTree.splice(0,1)let setlist = this.$refs.tree.getCheckedNodes()setlist.splice(0,1)this.$nextTick(() => {this.$refs.tree.setCheckedNodes(setlist) })},clearall(){this.selectTree = []this.$nextTick(() => {this.$refs.tree.setCheckedNodes([]) })},},}
</script>

css 纠正样式问题，其中cursor修改禁用后的鼠标状态，

.setstyle {min-height: 200px;padding: 0 !important;margin: 0;overflow: auto;cursor: default !important;
}

思路：通过el-tree来选择所需要的节点和获取数据，将el-select的选择关闭，防止点击时报错，通过el-tree获取的数据来关联el-select并渲染输入框的内容，而不是通过option来获取数据（所以el-option的状态时disabled）。

重点：

1.this.$refs.tree.getCheckedNodes() 获取选中的节点

2.cursor：default 修改鼠标状态

3.check-change 节点选中状态发生变化时触发

涉及内容：

popper-append-to-body

是否将弹出框插入至 body 元素。在弹出框的定位出现问题时，可将该属性设置为 false

boolean

show-checkbox

节点是否可被选择

boolean

check-strictly

在显示复选框的情况下，是否严格的遵循父子不互相关联的做法，默认为 false

boolean

expand-on-click-node

是否在点击节点的时候展开或者收缩节点，默认值为 true，如果为 false，则只有点箭头图标的时候才会展开或者收缩节点。

boolean

check-on-click-node

是否在点击节点的时候选中节点，默认值为 false，即只有在点击复选框时才会选中节点。

boolean

第二版修改：

在之前的基础上进行了优化，增加了删除的功能，

原来的删除中，数组件不会跟随修改，这次优化后，使组件功能更加完善。

思路：

通过删除已选模块时触发的方法，对树组件中数据选择情况进行重新修改渲染，触发清空时，将已选数据置空，并且把树组件中已选项全部修改为未选。

涉及内容：

getCheckedNodes 若节点可被选择（即 show-checkbox 为 true），则返回目前被选中的节点所组成的数组 (leafOnly, includeHalfChecked) 接收两个 boolean 类型的参数，1. 是否只是叶子节点，默认值为 false 2. 是否包含半选节点，默认值为 false

setCheckedNodes

设置目前勾选的节点，使用此方法必须设置 node-key 属性

(nodes) 接收勾选节点数据的数组

node-key

每个树节点用来作为唯一标识的属性，整棵树应该是唯一的

String

remove-tag	多选模式下移除tag时触发	移除的tag值
clear	可清空的单选模式下用户点击清空按钮时触发	—

collapse-tags

多选时是否将选中值按文字的形式展示

boolean

设置collapse-tags后，展示效果：

上图箭头所指向的模块是通过getCheckedNodes获取到的列表中的第一个元素，所以上面删除方法中使用了splice（0，1）来进行删除。

el-select和el-tree结合使用-树形结构多选框相关推荐

tree命令-以树形结构显示目录下的内容
一.命令详解 1.1[功能说明] tree命令功能是以树形结构列出指定目录下的所有内容,包括所有文件.子目录及子目录里的目录和文件. 1.2 [语法格式] [root@7bfe451a2fe1:~]# ...
bootstrap - selectree树形结构下拉框
1.首先导入Bootstrap js.样式 <script src="/static/common/ztree/js/jquery.ztree.all.js" type=&q ...
Linux tree命令以树形结构显示文件目录结构
我用的是阿里云服务器,CentOS7,默认没有tree这个命令,需要安装,用下面的命令就可以安装: sudo yum install tree 怎么样使用tree这个命令其实有个非常简单的办法,就是 ...
在vue项目中使用树形结构的穿梭框
先看一下最后的效果: 一个基于elementui的穿梭框组件:el-tree-transfer 第一步:安装组件 npm install el-tree-transfer --save 第二步:写代码 ...
bootstrap带有下拉按钮的输入框_关于bootstrap--表单（下拉select、输入框input、文本域textare复选框checkbox和单选按钮radio）...
html 里面的 role 本质上是增强语义性,当现有的HTML标签不能充分表达语义性的时候,就可以借助role来说明.通常这种情况出现在一些自定义的组件上,这样可增强组件的可访问性.可用性和可交互性 ...
Java学习笔记＜十六＞(树形结构存储)
1.树形结构的介绍 * 树形结构简介 * 树形结构是一种非线性结构,存储的是"一对多的"关系的数据元素的集合 * * 树形结构的相关术语: * 节点(Node):使用树结构 ...
非线性数据结构之树形结构
树形结构是一层次的嵌套结构. 一个树形结构的外层和内层有相似的结构, 所以这种结构多可以递归的表示.经典数据结构中的各种树状图是一种典型的树形结构:一颗树可以简单的表示为根, 左子树, 右子树. ...
easyUI tree 多选框设置是否级联选中
问题 easyUI的tree树前默认带有多选框级联选中,造成很多麻烦: 如,勾选子节点时,父节点也被选中解决方案加入cascadeCheck:false 属性,取消默认级联关系 $('#tt'). ...
el select 清空_解决element-ui里的下拉多选框 el-select 时,默认值不可删除问题
这是一个项目中常见的需求,el-select 为下拉多选,默认值不可删除,或者指定值不可删除. 实现效果: el-select 如下源码中 tag closable 属性为 el-select 的 d ...

el-select和el-tree结合使用-树形结构多选框

el-select和el-tree结合使用-树形结构多选框相关推荐

最新文章

热门文章