element - ui tree
一行代码两行泪,没有外网真可怕!好久没写博客了,更新一把。
<template>
<div>
<el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick"></el-tree> </div>
</template> <script>
export default {
data () {
return {
data: [{
label: '一级 1',
children: [{
label: '二级 1-1',
children: [{
label: '三级 1-1-1'
}]
}]
}, {
label: '一级 2',
children: [{
label: '二级 2-1',
children: [{
label: '三级 2-1-1'
}]
}, {
label: '二级 2-2',
children: [{
label: '三级 2-2-1'
}]
}]
}, {
label: '一级 3',
children: [{
label: '二级 3-1',
children: [{
label: '三级 3-1-1'
}]
}, {
label: '二级 3-2',
children: [{
label: '三级 3-2-1'
}]
}]
}],
defaultProps: {
children: 'children',
label: 'label'
}
}
},
methods: {
handleNodeClick(data) {
console.log(data);
}
}
}
</script> <style scoped> </style>
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
Vue.config.productionTip = false /* eslint-disable no-new */
new Vue({
el: '#app',
components: { App },
template: '<App/>'
})
element - ui tree的更多相关文章
- Element ui tree树形控件获取当前节点id和父节点id
低版本Element ui tree树形控件获取当前节点id和父节点id的方法:点击查看 最新版本Element ui tree树形控件获取当前节点id和父节点id教程: 1.找到node_modul ...
- Element UI tree 回显问题
Part.1 问题 写项目时遇到一个棘手的问题,在做关于权限功能时,点击修改需要显示角色原本对应的权限.涉及到了 tree 组件回显,但是有一个很尴尬的问题:tree 组件只要父节点选中,那么子节点就 ...
- Element ui tree结合Vue使用遇到的一些问题(一)
下图是一个后台管理系统,展示的是角色列表 当我点击编辑的时候,弹出一个模态框,如下图 功能需求:点击编辑按钮,弹出模态框,选择权限那块,默认选中当前角色拥有的权限. 问题:第一次点击编辑按钮时,不会选 ...
- element ui tree回显 setCheckedNodes,setCheckedKeys,setChecked等函数报undefined问题
在写项目的时候,需要用到tree组件进行回显来进行权限控制: 在回显过程中使用回显函数会报报undefined, 这时只需要给该函数包裹一层nextTick方法就行了, 在回显过程中我们有可能使用半选 ...
- Element ui tree树形控件获取父节点id
Element-ui官网给的方法 getCheckedKeys() { console.log(this.$refs.tree.getCheckedKeys()); }, 这种只有在所有子级都被选中的 ...
- Element ui tree 搜索
搜索框 属性 :filter-node-method="filterNode" 对树节点进行筛选时执行的方法,返回 true 表示这个节点可以显示,返回 false 则表示这个节点 ...
- vue的$nextTick使用总结,this.$refs为undefined的解决办法,element Ui的树形控件setCheckedKeys方法无法使用
其实这3个讲的是一个问题,先说下问题,我在watch里设置一个监听,当弹窗打开时,自动添加树形的默认选中项, 但奇怪的是this.$refs为undefined,自然setCheckedKeys无法使 ...
- 关于Element UI中页面样式小问题
一,修改组件dialog窗口的大小 二,在我使用upload组件上传一张美女图片时,发现当预览图片时,图片是灰色的,点击一下才会变亮,这种效果使我很不舒服,于是我通过添加下面的一条样式,问题解决了(可 ...
- element ui改写实现两棵树
使用element ui组件库实现一个table的两棵树的效果 效果如下,左边树自动展开一级,右边树默认显示楼层,然后可以一个个展开 代码如下 <el-table :data="rel ...
随机推荐
- 计算机网络知识点总结2:IP协议(IPV4)
一.Internet网络是一种数据报网络(另一种是虚电路网络,用于ATM等),主要功能是路由和转发. 二.IP数据报(分组)格式(IPV4版本) 首部 描述 版本号(4bit) 描述IP协议的版本号, ...
- Java总结---继承(不断完善ing..)
java三大特性:封装.继承.多态 继承 一.目的:实现代码的复用 二.简单例子(A继承了C): public class A extends C { //检测哪些可以在子类里使用 public vo ...
- java高并发_博客-网址-资料 推荐
大概说一下自己作为入门学习java高并发的博客地址,很不错在自己的博客里记录一下:如果能有刷到我的博客的骚年,又刚好想了解java高并发,强烈推荐看看 地址:http://www.itsoku.com ...
- Web前端助手-功能丰富的Chrome插件
整合优秀的前端实用工具.免费,可配置的强大工具集 示例 安装 github仓库: https://github.com/zxlie/FeHelper 官网地址:https://www.baidufe. ...
- 从零开始搭建前端监控系统(三)——实现控制iframe前进后退
前言 本系列文章旨在讲解如何从零开始搭建前端监控系统. 项目已经开源 项目地址: https://github.com/bombayjs/bombayjs (web sdk) https://gith ...
- Oracle联合注入总结
Oracle常规联合注入 Oracle Database,又名Oracle RDBMS,或简称Oracle.是甲骨文公司的一款关系数据库管理系统. Oracle对于MYSQL.MSSQL来说意味着更大 ...
- 实验吧之【who are you?】(时间盲注)补充
第二种方法 使用brup进行盲注 也是一个道理 不多贴了 这里提一下 burp怎么判断超时 Options->Connections->Tiimeouts->Normal这一空 ...
- CVE-2016-7124漏洞复现
CVE-2016-7124漏洞复现 __wakeup()魔术方法绕过 实验环境 操作机:Windows 10 服务器:apache 2.4 数据库:mysql 5.0 PHP版本:5.5 漏洞影响版本 ...
- IaaS基础平台
第一部分:IaaS云计算基础架构平台 服务器:先电 任务一.IaaS云平台搭建 基础环境: 1.使用命令行方式设置主机名,防火墙以及 SELinux 设置如下: (1)设置控制节点主机名 contro ...
- spring在IoC容器中装配Bean详解
1.Spring配置概述 1.1.概述 Spring容器从xml配置.java注解.spring注解中读取bean配置信息,形成bean定义注册表: 根据bean定义注册表实例化bean: 将bean ...