详解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 相关文章推荐
ext 代码生成器
Aug 07 Javascript
三种AngularJS中获取数据源的方式
Feb 02 Javascript
jQuery实现最简单的切换图效果【可兼容IE6、火狐、谷歌、opera等】
Sep 04 Javascript
javascript解析ajax返回的xml和json格式数据实例详解
Jan 05 Javascript
基于JavaScript实现无限加载瀑布流
Jul 21 Javascript
JavaScript中运算符规则和隐式类型转换示例详解
Sep 06 Javascript
微信小程序中setInterval的使用方法
Sep 29 Javascript
JQuery实现ajax请求的示例和注意事项
Dec 10 jQuery
微信小程序实现页面浮动导航
Jan 28 Javascript
详解Vue前端对axios的封装和使用
Apr 01 Javascript
微信小程序关键字变色实现代码实例
Dec 13 Javascript
Javascript中Microtask和Macrotask鲜为人知的知识点
Apr 02 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字符串截取的简单方法
2013/07/04 PHP
php设置session值和cookies的学习示例
2014/03/21 PHP
不使用php api函数实现数组的交换排序示例
2014/04/13 PHP
PHP使用CURL获取302跳转后的地址实例
2014/05/04 PHP
php使用pdo连接并查询sql数据库的方法
2014/12/24 PHP
PHP类的特性实例分析
2016/09/28 PHP
[JS源码]超长文章自动分页(客户端版)
2007/01/09 Javascript
javascript高亮效果的二种实现方法
2008/09/14 Javascript
理解Javascript_07_理解instanceof实现原理
2010/10/15 Javascript
node.js中的console.warn方法使用说明
2014/12/09 Javascript
Jquery插件实现点击获取验证码后60秒内禁止重新获取
2015/03/13 Javascript
jquery实现点击label的同时触发文本框点击事件的方法
2015/06/05 Javascript
jQuery匹配文档链接并添加class的方法
2015/06/26 Javascript
原生JS实现左右箭头选择日期实例代码
2017/03/14 Javascript
使用MUI框架模拟手机端的下拉刷新和上拉加载功能
2017/09/04 Javascript
jQuery使用动画队列自定义动画操作示例
2018/06/16 jQuery
小程序视频列表中视频的播放与停止的示例代码
2018/07/20 Javascript
vue element-ui实现动态面包屑导航
2019/12/23 Javascript
vue实现动态表格提交参数动态生成控件的操作
2020/11/09 Javascript
python基于BeautifulSoup实现抓取网页指定内容的方法
2015/07/09 Python
通过Python来使用七牛云存储的方法详解
2015/08/07 Python
python用户管理系统的实例讲解
2017/12/23 Python
python清除字符串中间空格的实例讲解
2018/05/11 Python
Python的argparse库使用详解
2018/10/09 Python
浅谈django的render函数的参数问题
2018/10/16 Python
python for 循环获取index索引的方法
2019/02/01 Python
详解Python 定时框架 Apscheduler原理及安装过程
2019/06/14 Python
python3.6根据m3u8下载mp4视频
2019/06/17 Python
python生成requirements.txt的两种方法
2019/09/18 Python
Python环境配置实现pip加速过程解析
2020/11/27 Python
毕业生的自我评价
2013/12/30 职场文书
中医临床专业自我鉴定范文
2014/01/15 职场文书
小学竞选班长演讲稿
2014/09/09 职场文书
坚守艰苦奋斗精神坚决反对享乐主义整改措施
2014/09/17 职场文书
初中历史教学反思
2016/02/19 职场文书
python常见的占位符总结及用法
2021/07/02 Python