Element-UI 的树列表实现单选
1. Element-UI 的 el-tree 组件当设置了 show-checkbox 属性以后,默认是只能多选的,如果我们想要将其改选为单选,就要进行一些特殊的处理,首先看效果图。

2. 组件代码(只列出el-tree组件相关的代码)
...
<el-tree
class="filter-tree"
:data="temp3Msg.currentCourseList"
:props="defaultProps"
default-expand-all
node-key="id"
:filter-node-method="filterNode"
show-checkbox
ref="tree3"
@check-change="handleCheckChange"
>
</el-tree>
...
3. 处理 handleCheckChange 事件
handleCheckChange (data, checked, indeterminate) {
/* 主要通过checked进行判断 */
if (checked) {
let arr = [data.id];
this.$refs.tree3.setCheckedKeys(arr);
/* 右侧列表相关的代码 */
/* this.temp3Msg.currentSelectCourseList = []; */
/* this.temp3Msg.currentSelectCourseList.push(data); */
}
},
Element-UI 的树列表实现单选的更多相关文章
- element ui改写实现两棵树
使用element ui组件库实现一个table的两棵树的效果 效果如下,左边树自动展开一级,右边树默认显示楼层,然后可以一个个展开 代码如下 <el-table :data="rel ...
- 循序渐进VUE+Element 前端应用开发(8)--- 树列表组件的使用
在我前面随笔<循序渐进VUE+Element 前端应用开发(6)--- 常规Element 界面组件的使用>里面曾经介绍过一些常规的界面组件的处理,主要介绍到单文本输入框.多文本框.下拉列 ...
- Element ui tree结合Vue使用遇到的一些问题(一)
下图是一个后台管理系统,展示的是角色列表 当我点击编辑的时候,弹出一个模态框,如下图 功能需求:点击编辑按钮,弹出模态框,选择权限那块,默认选中当前角色拥有的权限. 问题:第一次点击编辑按钮时,不会选 ...
- 【Element UI】使用问题记录
[Element UI]使用问题记录 转载:https://www.cnblogs.com/yangchongxing/p/10750994.html 下载地址: https://unpkg.com/ ...
- element UI table 过滤 筛选问题
一.问提描述 使用elementUI table 官方筛选案例,发现筛选不是服务器端筛选,而是浏览器端对每一页进行单独筛选. 如何在服务器端筛选? 二.查询Element UI 官网table组 ...
- element UI Cascader 级联选择器 编辑 修改 数组 路径 问题(转载)
来源:https://segmentfault.com/a/1190000014827485 element UI的Cascader级联选择器编辑时 vue.js element-ui 2 eleme ...
- vue+element ui 的上传文件使用组件
前言:工作中用到 vue+element ui 的前端框架,使用到上传文件,则想着封装为组件,达到复用,可扩展.转载请注明出处:https://www.cnblogs.com/yuxiaole/p/9 ...
- 封装一个优雅的element ui表格组件
现在做后台系统用vue + elementUI 的越来越多,那element ui的 el-table 组件肯定也离不开.虽然element ui的table组件很好.但是表格和分页是分离的.每次写表 ...
- 基于element UI 的上传插件
为了不再重复的上传文件,做了一个统一选择文件和上传文件的 基于 element UI :http://element-cn.eleme.io 前端实现文件下载和拖拽上传 演示 用法 <uploa ...
随机推荐
- _declspec(dllexport)和.def(转)
节选自:windows下编译和使用动态库dll http://blog.eonew.cn/archives/865 Microsoft 在 Visual C++ 的 16 位编译器版本中引入了 __e ...
- vue 使用Better-Scroll
注意点 1. 外层容器wrapper要设置高度,并且overflow:hidden. 2. wrapper里面的需要一个div包裹所有内容 3. 样式成功 4. 以上就是可以滚动的情况,wrappe ...
- loj2472[九省联考2018]IIIDX
题意:要求构造一个d的排列使得满足d[i/k]<=d[u]且字典序最大. 标程(bzoj上并不能过): #include<bits/stdc++.h> #define mid ((l ...
- io.File+递归
import java.io.File ; import java.io.IOException ; public class FileDemo11{ public static void main( ...
- vue 表格 多选 换页保存前一页的状态
表格多选 点击下一页,上一页的状态没消失. 在表格 添加 row-key="id" 在表格行里添加 reserve-selection
- 8、iota枚举
1.iota常量自动生成器,每一行,自动累加1 2.iota给常量赋值使用 3.如果iota遇到const,就会重置为0 4.可以可以只写一个iota 5.如果是同一行,值是一样的 // 09_iot ...
- 阿里云智能推荐AIRec产品介绍
一.智能推荐(AIRec)简介 AIRec背景介绍 智能推荐(简称AIRec)基于阿里巴巴集团领先的大数据和人工智能技术,结合阿里巴巴在电商.内容.新闻.视频直播和社交等多个行业领域的积累,为全球企业 ...
- 快速求排列C(m,n)加取模
快速求排列组合C(m,n)%mod 写在前面: 1. 为防止产生n和m的歧义,本博文一律默认n >= m 2. 本博文默认mod = 10^6+3 3. 本博文假设读者已知排列组合公式 C(m, ...
- TeleportArea可瞬移的目标位置
TeleportArea.png 1.可以自定义mesh ,想要什么区域就可以设置什么区域的mesh网格.2.Collider 组件必须有,否则无法进行位置移动,它用来检测激光笔是否打到该区域.3.M ...
- 为什么 Go 语言把类型放在后面
不是为了与众不同.而是为了更加清晰易懂. Rob Pike 曾经在 Go 官方博客解释过这个问题(原文地址:http://blog.golang.org/gos-declaration-syntax) ...