zoukankan      html  css  js  c++  java
  • 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); */
      }
    },
    
  • 相关阅读:
    从头认识java-2.6 逗号操作符
    JavaScript基础知识
    特性选择器
    文本缩进
    如何使图片与导航栏对齐
    如何使用CSS选择器应用于子元素
    图像
    布局
    列表,表格和表单
    盒子
  • 原文地址:https://www.cnblogs.com/usebtf/p/10694146.html
Copyright © 2011-2022 走看看