详解vue-element Tree树形控件填坑路


Posted in Javascript onMarch 26, 2019

通过tree树形控件的default-checked-keys属性来设置默认选中的节点

html.vue

<el-form-item label="角色权限:">
 <el-tree :data="data2" 
  show-checkbox 
  node-key="id" 
  @check="handleNodeClick" 
  :default-expanded-keys="[]" 
  ref="tree" 
  :default-checked-keys="default_select" 
  :props="defaultProps">
 </el-tree>
</el-form-item>

html.js

data() {
  return {
   data2: [],
   defaultProps: {
    children: 'child',
    label: 'name'
   },
   menu_ids: [],
   // 默认选中
   default_select: [],
   role_id: 0,
  }
 },
 methods: {
  /**
   * 获取详情
   */
  getDetail() {
   let that = this;
   that.$http.post(that.adminApi.api_url + "/Role/show_edit", {
    token: that.token,
    role_id: that.role_id
   }, {
    emulateJSON: true
   }).then(
    function (res) {
     var data = res.body;
     if (data) {
      that.ruleForm.name = data.name;
      that.ruleForm.sort = data.sort;
      that.ruleForm.status = data.status.toString();
      
      
      /**重点开始*/
      if(typeof (data.menu_id) == 'object'){
       //转数组
       data.menu_id = Object.keys(data.menu_id).map(key=> data.menu_id[key]);
      }
      //赋值
      data.menu_id.forEach((value)=>{
       that.default_select.push(value);
      });

      setTimeout(function () {
       that.default_select.forEach((value)=>{
        that.$refs.tree.setChecked(value,true,false)
       });
      },100);
      that.menu_ids = data.menu_id;
      /**重点结束*/
     }
    });
  },

  /**
   * 属性控件
   */
  handleNodeClick(e, data) {
   console.log(data);
   console.log(e);
   this.menu_ids = data.checkedKeys
  },
 }

总结,Tree树形控件通过后台接口获取到数组数据,还需要再次遍历,将它再遍历为数组,这样我们才可以调用,如果直接从后台获取到数组来调用的时候,我们是获取不到这个数组中的内容。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
增强的 JavaScript 的 trim 函数的代码
Aug 13 Javascript
一些常用的JS功能函数代码
Jun 23 Javascript
JavaScript 继承详解(一)
Jul 13 Javascript
JS实现图片产生波纹一样flash效果的方法
Feb 27 Javascript
基于JavaScript创建动态Dom
Dec 08 Javascript
jquery validate表单验证插件
Sep 06 Javascript
jquery 正整数数字校验正则表达式
Jan 10 Javascript
js图片轮播手动切换特效
Jan 12 Javascript
Bootstrap 网格系统布局详解
Mar 19 Javascript
不得不知的ES6小技巧
Jul 28 Javascript
mpvue小程序循环动画开启暂停的实现方法
May 15 Javascript
详解JavaScript中的执行上下文及调用堆栈
Apr 29 Javascript
vue-router 起步步骤详解
Mar 26 #Javascript
JS div匀速移动动画与变速移动动画代码实例
Mar 26 #Javascript
vue cli3.0结合echarts3.0与地图的使用方法示例
Mar 26 #Javascript
详解用JS添加和删除class类名
Mar 25 #Javascript
详解javascript设计模式三:代理模式
Mar 25 #Javascript
js实现鼠标拖拽缩放div实例代码
Mar 25 #Javascript
Vue框架下引入ActiveX控件的问题解决
Mar 25 #Javascript
You might like
PHP实现随机生成水印图片功能
2017/03/22 PHP
一些常用且实用的原生JavaScript函数
2010/09/08 Javascript
多种方式实现JS调用后台方法进行数据交互
2013/08/20 Javascript
jQuery回车实现登录简单实现
2013/08/20 Javascript
vue插件tab选项卡使用小结
2016/10/27 Javascript
利用JS屏蔽页面中的Enter按键提交表单的方法
2016/11/25 Javascript
JS实现从对象获取对象中单个键值的方法示例
2019/06/05 Javascript
Layui数据表格 前后端json数据接收的方法
2019/09/19 Javascript
你知道JavaScript Symbol类型怎么用吗
2020/01/08 Javascript
JS Web Flex弹性盒子模型代码实例
2020/03/10 Javascript
js函数柯里化的方法和作用实例分析
2020/04/11 Javascript
JS实现数据动态渲染的竖向步骤条
2020/06/24 Javascript
python实现web方式logview的方法
2015/08/10 Python
Python编写一个优美的下载器
2018/04/15 Python
python 获取指定文件夹下所有文件名称并写入列表的实例
2018/04/23 Python
django解决跨域请求的问题详解
2019/01/20 Python
django框架自定义模板标签(template tag)操作示例
2019/06/24 Python
Python箱型图处理离群点的例子
2019/12/09 Python
tensorflow实现训练变量checkpoint的保存与读取
2020/02/10 Python
浅析python标准库中的glob
2020/03/13 Python
Python虚拟环境库virtualenvwrapper安装及使用
2020/06/17 Python
Links of London官方网站:英国标志性的珠宝品牌
2017/04/09 全球购物
Stuart Weitzman欧盟:美国奢华鞋履品牌
2017/05/24 全球购物
美国购买舞会礼服网站:Couture Candy
2019/12/29 全球购物
香港零食网购:上仓胃子
2020/06/08 全球购物
工作分析计划书
2014/04/30 职场文书
学习演讲稿范文
2014/05/10 职场文书
科技之星事迹材料
2014/06/02 职场文书
司法局火灾防控方案
2014/06/05 职场文书
圣诞节活动策划方案
2014/06/09 职场文书
小学课外活动总结
2014/07/09 职场文书
师范生见习报告范文
2014/11/03 职场文书
春节慰问简报
2015/07/21 职场文书
学校学期工作总结
2015/08/13 职场文书
教师信息技术学习心得体会
2016/01/21 职场文书
带你了解CSS基础知识,样式
2021/07/21 HTML / CSS