el-select和el-tree结合的下拉树

<template><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>
</template><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>
<style>
.setstyle {min-height: 200px;padding: 0 !important;margin: 0;overflow: auto;cursor: default !important;
}
</style>

el-select和el-tree结合的下拉树相关推荐

xm-select下拉框，下拉树
使用案例先上图 layui中使用xm-select下拉选择树 1.引入js <script src="../static/res/bootstrap/js/jquery-3.4.1. ...
extjs tree下拉列表_使用ztree来代替Extjs的下拉树
[Struts2+Spring2.5+Hibernate3(JPA)+ExtJS3基本后台将ExtJS替换为3..2版本后发现下拉数有些异常:之前展开下来树的下级节点时,下拉菜单不会关掉.但是在3. ...
Linux下的tree命令 --Linux下目录树查看
Linux下的tree命令 --Linux下目录树查看有时我们需要生成目录树结构,可以使用的有ls -R,但是实际效果并不好这时需要用到tree命令,但是大部分Linux系统是默认不安装该命令的, ...
antd select多选_antd多选下拉框一行展示的实现方式
我们都知道antd的select多选时,如果下拉框宽度不足,则自动浮动到下一行将下拉框撑大,但是这回影响到页面的整体布局. 我们期望的效果是,下拉框只显示一行的值,超出一行的部分自动隐藏. 下面有2种 ...
带线的无限级下拉树列表-完整示例篇
2019独角兽企业重金招聘Python工程师标准>>> 前言: 今天在群里有人问起了我一个比较远古的问题:带线的无限级下拉树列表他运行不起来. 最关键的又扯上了CYQ.Data 框架 ...
php生成extjs下拉树json数据格式
菜单项curd以及extjs下拉树json数据构造 <?php // +------------------------------------------------------------- ...
在ExtJS的ComboBox组件中实现下拉树效果
2019独角兽企业重金招聘Python工程师标准>>> 看了很多关于EXT下拉树的实现, 发现很多例子都是对EXT原有的类进行扩展, 而且都发现用起来很费劲,在这里,本人实现的EXT ...
extjs多选下拉树
extjs多选下拉树发表于 2012 年 7 月 15 日由 q601046124 extjs多选下拉树 extjs多选下拉树详情见 http://blog.aigouw.net ...
mysql写下拉树_PHP+mysql实现从数据库获取下拉树功能的方法
这篇文章主要介绍了PHP+mysql实现从数据库获取下拉树功能,结合实例形式分析了php+mysql数据库查询及select下拉框输出查询结果的实现技巧,需要的朋友可以参考下本文实例讲述了PHP+m ...
java下拉树_参数模板中下拉树级联下拉数据集查询
背景说明在参数表单的制作中会遇到各种各样的需求,如为了方便参数的输入,需要将输入框设计成树状:若参数模板中有两个输入框,每个输入框对应的参数有某种关系,前一个输入框输入参数后,后一个输入框自动关联到 ...

el-select和el-tree结合的下拉树

el-select和el-tree结合的下拉树相关推荐

最新文章

热门文章