Element-UI 的树列表实现单选

最新推荐文章于 2024-06-18 10:14:03 发布

weixin_30369041

最新推荐文章于 2024-06-18 10:14:03 发布

阅读量332

点赞数

CC 4.0 BY-SA版权

文章标签： ui

原文链接：http://www.cnblogs.com/usebtf/p/10694146.html

本文介绍如何将Element-UI的el-tree组件从默认的多选模式修改为单选模式。通过监听check-change事件并使用setCheckedKeys方法，可以实现el-tree组件的单选功能。

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); */
  }
},

转载于:https://www.cnblogs.com/usebtf/p/10694146.html