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

最新推荐文章于 2024-03-13 12:00:47 发布
最新推荐文章于 2024-03-13 12:00:47 发布
阅读量846 收藏 3
点赞数 1
分类专栏： 面试 学习路线 阿里巴巴 文章标签： android 前端 后端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_67390969/article/details/126099697
版权
本文介绍了如何在前端开发中结合使用el-select和el-tree组件，实现树形结构的多选功能。通过el-tree获取选中节点，关闭el-select的默认选择，并利用数据关联el-select的输入内容。关键点包括：getCheckedNodes获取选中节点，调整cursor样式，监听check-change事件。文章适合有一定前端基础，需要实现类似功能的开发者参考。
摘要由CSDN通过智能技术生成

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

话不多说，上代码

html

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

js

<script>
	export default {
		data() {
			return {
				value:[],
				selectTree:[],
				defaultProps:{
					children: 'children',
					label: 'label'
				},
				list: [{
					id: 1,
					label
最低0.47元/天 解锁文章
m0_67390969
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
el-select-tree:ElementUI的el-select与el-tree结合
05-07
精选树 ElementUI的el-select与el-tree结合在一起。 在线示例 用法 安装 npm install --save el-select-tree 需要element-ui 如果您的项目不使用element-ui，则需要引入一个单独的element-ui包，如下所示： import 'el-select-tree/lib/element-ui' ; 全球注册 import Vue from 'vue' ; import ElSelectTree from 'el-select-tree' ; Vue . use ( ElSelectTree ) ; 组件内注册 import ElSelectTree from 'el-select-tree' ; export default { components : { ElSelectTree } } ; 完
vue 组件el-tree添加结构指示线条
最新发布
CONSOLE11的博客
06-30 622
vue中element组件el-tree添加线条样式
el-select与el-tree结合使用，实现select框下拉使用树形结构选择数据
qingdatiankong的博客
08-09 2461
el-select与el-tree结合使用，实现select框下拉使用树形结构选择数据
el-select与el-tree结合，实现下拉框树结构，可搜索，自动定位到树结构下的第一个节点处
qq_41984913的博客
08-19 1169
*
el-select+el-tree实现树形分组+多选+搜索的选择器
weixin_60886885的博客
05-31 3254
【代码】el-select+el-tree实现树形分组+多选+搜索的选择器。
el-tree-select:基于el-select和el-tree改造的树形选择器（下拉框）组件
05-10
"el-tree-select:基于el-select和el-tree改造的树形选择器（下拉框）组件"是一个自定义的前端UI组件，它结合了Element UI库中的el-select和el-tree两个组件的功能，创建了一个适用于数据层级关系展示的选择器。...
el-select 下拉框多选实现全选的实现
10-16
第二种方法是使用el-checkbox组件创建一个复选框来实现全选功能。这个复选框通过v-model绑定一个名为checked的布尔型数据。当复选框的选中状态发生变化时，会调用selectAll方法来更新选中的选项数组。除了添加一个复...
el-select数据过多懒加载的解决(loadmore)
10-16
主要介绍了el-select数据过多懒加载的解决(loadmore)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
Element的el-tree控件后台数据结构的生成以及方法的抽取
10-15
在Element UI中，el-tree控件需要的数据结构通常是一个包含多个对象的数组，每个对象代表树的一个节点。每个节点对象至少需要包含以下几个字段： 1. `label`：节点的显示文本。 2. `value` 或 `key`：标识节点的...
el-select结合el-tree实现树形多选
m0_67841039的博客
10-10 7307
el-select结合el-tree实现树形多选
组合element里面的select和tree实现的treeSelect选择器
08-09
SelectTree是组合element里面的select和tree两者实现的，可以实现多选，单选，同时选中以后关闭下拉框等操作
el-select和el-tree结合下拉选
泪的结晶的博客
02-25 1336
实现效果： 代码： <template> <el-select style="width: 100%" :value="valueTitle" :clearable="clearable" :filterable="filterable" :disabled="disabled" @clear="clearHandle" remote :remote-method="remoteMethod"> <el-option .
el-select中嵌套el-tree
weixin_44524835的博客
12-08 2630
实现效果： 代码： <template> <div> <el-select v-model="value" multiple @change="selectChange"> <el-option style="height: auto" :value="selectedValue">
el-select和el-tree树形结构下拉单选和多选
ingenuou_的博客
07-18 6349
el-select和el-tree树形结构下拉单选和多选
el-select + el-tree
趟过java，遇见web
12-22 325
el-select ，el-table，树组件
el-select + el-tree下拉树
weixin_51010848的博客
09-19 1441
el-select + el-tree下拉树。
通过el-select选择器和el-tree树形结构二次封装(vue2+elementUI)，开发element-plus的TreeSelect树形选择器
qq_43217258的博客
03-13 2177
领导看我在另一个vue3项目的el-tree-select挺好的，叫我移入vue2的项目中。 但是vue2版本的elementUI，并没有这个组件，所以只能自己找，找半天找不到和它差不多的，通过网友写的组件改写的
vue批量新增el-select和el-tree结合使用-树形结构多选框
06-11
如果你想要结合`el-select`和`el-tree`，并且希望实现树形结构的多选框，可以按照以下步骤操作： 1. 创建一个`selected`数组，用于存储用户选择的节点。 2. 在`el-select`组件中，设置`multiple`属性为`true`，并将`v-model`指向`selected`数组。 3. 在`el-tree`组件中，设置`show-checkbox`属性为`true`，并将`v-model`指向`selected`数组。 下面是示例代码： ``` <template> <div> <el-select v-model="selected" placeholder="请选择" multiple> <el-option v-for="node in nodes" :key="node.id" :label="node.name" :value="node.id"></el-option> </el-select> <el-tree :data="treeData" :node-key="node => node.id" show-checkbox :default-checked-keys="defaultCheckedKeys" :check-strictly="checkStrictly" :props="props" v-model="selected"></el-tree> </div> </template> <script> export default { data() { return { selected: [], nodes: [ { id: 1, name: '节点1' }, { id: 2, name: '节点2' }, { id: 3, name: '节点3' }, ], treeData: [ { id: 1, label: '一级 1', children: [ { id: 4, label: '二级 1-1', }, ], }, { id: 2, label: '一级 2', children: [ { id: 5, label: '二级 2-1', }, { id: 6, label: '二级 2-2', }, ], }, ], defaultCheckedKeys: [4, 5], checkStrictly: true, props: { children: 'children', label: 'label', value: 'id', checkStrictly: true, emitPath: false, multiple: true, checkDescendants: true, }, } }, } </script> ``` 在这个示例中，我们创建了一个`selected`数组，用于存储用户选择的节点。在`el-select`组件中，我们设置了`multiple`属性为`true`，并将`v-model`指向`selected`数组。在`el-tree`组件中，我们设置了`show-checkbox`属性为`true`，并将`v-model`指向`selected`数组。同时，我们还设置了其他一些属性，例如`checkStrictly`、`props`等，以便实现树形结构的多选框。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值