当前位置:首页 > 经验笔记 > VUE > 正文内容

element-ui Tree 树形控件实现单选 最简方法VUE

han32686年前 (2020-07-30)VUE14446

做项目时需要用到Tree树形控件单选但是Tree组件没有单选设置,网上找了几个方法不太适应,看了官网文档发现很简单 代码如下

          <el-tree
            ref="treeForm"
            default-expand-all
            node-key="id"
            :data="findCapitalAreasData"
            :props="defaultProps"
            show-checkbox
            :check-strictly="true"
            @check="handleCheckChangeArea"
          ></el-tree>
    //当复选框被点击的时候触发
    handleCheckChangeArea(data) {
      var labvalojb = data; //暂存选中节点
      // console.log(data);
      this.$refs.treeForm.setCheckedKeys([]); //删除所有选中节点
      this.$refs.treeForm.setCheckedNodes([labvalojb]); //选中已选中节点
    },







扫描二维码推送至手机访问。

版权声明:本文由瀚文博客发布,如需转载请注明出处。

本文链接:https://hanwenblog.com/post/20.html

分享给朋友:

相关文章

ElementUI的el-cascader级联选择器组件获取选中的label | VUE

ElementUI的el-cascader级联选择器组件获取选中的label | VUE

例如上图,需要拿到全部/设备:设备123<el-cascader   ref="myCascader"   :options=&q...

基于vue的移动端图片裁剪压缩处理

效果展示:原作者介绍:传送门原作者github:传送门基于原作者封装的组件:传送门基于原作者+vant UI封装的组件:传送门...

基于Vue的移动端图片裁剪组件(Clipic)可自动压缩

基于Vue的移动端图片裁剪组件(Clipic)可自动压缩

安装:Bashnpm install --save clipic使用代码:Markup<template>     ...

vue-cli3.x不同环境打包运行不同api接口及打包后动态配置API地址

vue-cli3.x不同环境打包运行不同api接口及打包后动态配置API地址

今天接到一个测试反馈说“我能不能我直接打包测试环境项目不用手动去改API”我第一反应就是这个测试这么懒!改个API都嫌麻烦,但是仔细一想毕竟"懒惰使人进步"嘛! &nbs...

vue跳转时打开新窗口的方法

    1、<vue-link>标签实现新窗口打开    官方文档中说 v-link 指令被 <rou...