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 的树列表实现单选的更多相关文章

  1. element ui改写实现两棵树

    使用element ui组件库实现一个table的两棵树的效果 效果如下,左边树自动展开一级,右边树默认显示楼层,然后可以一个个展开 代码如下 <el-table :data="rel ...

  2. 循序渐进VUE+Element 前端应用开发(8)--- 树列表组件的使用

    在我前面随笔<循序渐进VUE+Element 前端应用开发(6)--- 常规Element 界面组件的使用>里面曾经介绍过一些常规的界面组件的处理,主要介绍到单文本输入框.多文本框.下拉列 ...

  3. Element ui tree结合Vue使用遇到的一些问题(一)

    下图是一个后台管理系统,展示的是角色列表 当我点击编辑的时候,弹出一个模态框,如下图 功能需求:点击编辑按钮,弹出模态框,选择权限那块,默认选中当前角色拥有的权限. 问题:第一次点击编辑按钮时,不会选 ...

  4. 【Element UI】使用问题记录

    [Element UI]使用问题记录 转载:https://www.cnblogs.com/yangchongxing/p/10750994.html 下载地址: https://unpkg.com/ ...

  5. element UI table 过滤 筛选问题

    一.问提描述    使用elementUI table 官方筛选案例,发现筛选不是服务器端筛选,而是浏览器端对每一页进行单独筛选. 如何在服务器端筛选? 二.查询Element UI 官网table组 ...

  6. element UI Cascader 级联选择器 编辑 修改 数组 路径 问题(转载)

    来源:https://segmentfault.com/a/1190000014827485 element UI的Cascader级联选择器编辑时 vue.js element-ui 2 eleme ...

  7. vue+element ui 的上传文件使用组件

    前言:工作中用到 vue+element ui 的前端框架,使用到上传文件,则想着封装为组件,达到复用,可扩展.转载请注明出处:https://www.cnblogs.com/yuxiaole/p/9 ...

  8. 封装一个优雅的element ui表格组件

    现在做后台系统用vue + elementUI 的越来越多,那element ui的 el-table 组件肯定也离不开.虽然element ui的table组件很好.但是表格和分页是分离的.每次写表 ...

  9. 基于element UI 的上传插件

    为了不再重复的上传文件,做了一个统一选择文件和上传文件的 基于 element UI :http://element-cn.eleme.io 前端实现文件下载和拖拽上传 演示 用法 <uploa ...

随机推荐

  1. java多线程面试题_线程并发面试题

    1.什么是线程?线程是操作系统能够进行运算调度的最小单位,它被包含在进程之中,是进程中的实际运作单位.程序员可以通过它进行多处理器编程,你可以使用多线程对运算密集型任务提速.比如,如果一个线程完成一个 ...

  2. Java基本数据类型的类型转换规则

    基本类型转换分为自动转换和强制转换. 自动转换规则:容量小的数据类型可以自动转换成容量大的数据类型,也可 以说低级自动向高级转换.这儿的容量指的不是字节数,而是指类型表述的范围. 强制转换规则:高级变 ...

  3. jQuery实现网页定位导航

    代码: <!doctype html> <html> <head> <meta charset="UTF-8"> <title ...

  4. 1、cmd中检测远程的ip和端口是否处于监听状态

    一.使用 ping 命令测试远程的ip是否可连通 cmd  (右键 管理员角色) ---  ping   IP 二.使用 telnet 测试远程某一个ip的端口是否开放 1.为了安全起见,window ...

  5. Kotlin学习笔记

    Kotlin的注释 Kotlin 的代码注释和Java一模一样 Kotlin的运行方式也是先kotlinc生成字节码,再kotlin字节码 如果一行里面只有一条语句,那么可以不写分号.但如果打算在同一 ...

  6. EcShop二次开发学习方法和Ecshop二次开发必备基础

    ecshop二次开发学习方法 近年来,随着互联网的发展,电子商务也跟着一起成长,B2B,C2C,B2C的电子商务模式也不断的成熟.这时催生出了众多电子商务相关的php开源产品.B2C方面有Ecshop ...

  7. 【LeetCode 17】电话号码的字母组合

    题目链接 [题解] 用回溯法搞一下. 一搞就有~ 注意输入空串的时候别返回那个空串.. [代码] class Solution { public: string dic[10]; vector< ...

  8. NX二次开发-UFUN打开本地文本文档uc4504

    NX9+VS2012 #include <uf.h> #include <uf_cfi.h> #include <uf_ui.h> using std::strin ...

  9. jmeter登录之-动态参数

    jmeter登录之-动态参数 1.抓包查看提交的登录参数 发现参数authenticity_token是动态的,每次都不一样,所以回放的时候就会失败 2.提取动态变化的参数-后置处理器(相当于LR的关 ...

  10. 带头节点的单链表-------C语言实现

    /***************************************************** Author:Simon_Kly Version:0.1 Date:20170520 De ...