vue_elementUI_ tree树形控件 获取选中的父节点ID
一, vue_elementUI_ tree树形控件
1.1默认点击tree节点的第一个(注意不是checked选中)
<el-tree :data="fileData" @node-click="treeClick" :highlight-current="true"
:expand-on-click-node="false" node-key="id" default-expand-all
@node-drop="handleDrop" ref="fileTree" draggable>
<span slot-scope="{ node, data }">
<span class="task_left_bottom_img">
<img :src="fileDataIcon">
{{ node.label }}
</span>
</span>
</el-tree>
@node-click 点击事件 :highlight-current高亮 :expand-on-click-node点击展开按钮展开点击行不展开
node-key id作为唯一标识 default-expand-all 默认全部展开 @node-drop 拖拽事件 draggable 可拖拽 ref tree的唯一标识
1,添加高亮属性 :highlight-current="true"
2,添加tree的“ref”属性 ref="treeBox"
3,添加唯一标识的字段 node-key="id"
4,设置默认选中
let para = {keyword: this.searchFileData};
taskFileList(para).then(res => {
if(res.data.code == 200) {
this.fileData = res.data.model;
this.$nextTick(() => {
this.$refs.fileTree.setCurrentKey(this.fileData[0].id);
});this.loadList();
} else {
this.$notify({
title: "错误",
message: res.data.msg,
type: "error"
});
}
});
1.2. 获取选中的父节点ID
el-tree 的 this.$refs.tree.getCheckedKeys()
只可以获取选中的id 无法获取选中的父节点ID
想要获取选中父节点的id;需要如下操作
1. 找到工程下的node_modules文件夹 然后查找 element-ui.common.js文件
node_modules\element-ui\lib\element-ui.common.js
2. 按Ctrl+F搜索TreeStore.prototype.getCheckedKeys这个方法
3. 把
// if (child.checked && (!leafOnly || leafOnly && child.isLeaf)) {
// checkedNodes.push(child.data);
// }
改为
if ((child.checked || child.indeterminate) && (!leafOnly || leafOnly && child.isLeaf)) {
checkedNodes.push(child.data);
}
如下图:
二, el-table相关
2.1 el-table滚动条样式修改
//el-table 修改滚动条样式开始
.tableBoxs .el-table__body-wrapper::-webkit-scrollbar {
width: 8px;
height: 8px;
}
//滚动条的滑块
.tableBoxs .el-table__body-wrapper::-webkit-scrollbar-thumb {
background-color: #D5D5D5;
border-radius: 4px;
}
//el-table 修改滚动条样式结束
2.2 ,el-table 表头添加icon
2.3 v-for 循环el-table-column 并通过 v-if 来显隐
三, el-form 自定义label添加icon
<el-form :model="addForm" :rules="addFormRules" ref="addForm">
<el-row>
<el-col :span="12">
<el-form-item prop="name" label-width="90px">
<span slot="label" style="position: relative;">
<span>菜单名称</span>
<el-tooltip content="支持汉字、英文字母、数字、英文格式的下划线,且必须以字母或汉字开始" placement="top" effect="light" popper-class="addTooltip">
<i class="el-icon-question" style="position: absolute;right: -10px;"></i>
</el-tooltip>
</span>
<el-input v-model.trim="addForm.name" placeholder="请输入菜单名称" style="width:100%;"></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="英文名称" prop="enName" label-width="90px">
<el-input v-model.trim="addForm.enName" placeholder="请输入英文名称"></el-input>
</el-form-item>
</el-col>
</el-row>
</el-form>
vue_elementUI_ tree树形控件 获取选中的父节点ID的更多相关文章
- Element ui tree树形控件获取当前节点id和父节点id
低版本Element ui tree树形控件获取当前节点id和父节点id的方法:点击查看 最新版本Element ui tree树形控件获取当前节点id和父节点id教程: 1.找到node_modul ...
- Element ui tree树形控件获取父节点id
Element-ui官网给的方法 getCheckedKeys() { console.log(this.$refs.tree.getCheckedKeys()); }, 这种只有在所有子级都被选中的 ...
- vue+element-ui之tree树形控件有关子节点和父节点之间的各种选中关系详解
做后端管理系统,永远是最蛋疼.最复杂也最欠揍的事情,也永远是前端开发人员最苦逼.最无奈也最尿性的时刻.蛋疼的是需求变幻无穷,如同二师兄的三十六般变化:复杂的是开发难度寸步难行,如同蜀道难,难于上青天: ...
- BootstrapBlazor实战 Tree树形控件使用(2)
继续上篇实战BootstrapBlazor树型控件Tree内容, 本篇主要讲解整合Freesql orm快速制作数据库后台维护页面 demo演示的是Sqlite驱动,FreeSql支持多种数据库,My ...
- BootstrapBlazor实战-Tree树形控件使用(1)
实战BootstrapBlazor树型控件Tree的使用, 以及整合Freesql orm快速制作数据库后台维护页面 demo演示的是Sqlite驱动,FreeSql支持多种数据库,MySql/Sql ...
- ElementUI Tree树形控件renderContent return时报错
问题描述: 使用Tree树形控件使用render-content渲染时return后报错或npm run dev时候报错,报错信息相同,如下: 问题分析: renderContent函数中需要使用js ...
- vue-element Tree树形控件通过id默认选中
一.设置 1.给树形控件设置 ref="tree" node-key="id" 2.在获取数据的位置加上 this.$nextTick(() => { t ...
- Element ui 使用 Tree 树形控件
使用树形控件需要映入 jsx才能运行链接:https://github.com/vuejs/babel-plugin-transform-vue-jsx#usage npm install\ babe ...
- elementUI Tree 树形控件--官方文档
一.基础用法基础的树形结构展示,props相当于一个对实体类对像 <template> <el-tree :data="data" :props="de ...
随机推荐
- java模拟http请求(代理ip)
java实现动态切换上网IP (ADSL拨号上网) java动态设置IP java模拟http的Get/Post请求 自动生成IP模拟POST访问后端程序 JAVA 动态替换代理IP并模拟POST
- Solve Docker for Windows error: docker detected, A firewall is blocking file Sharing between Windows and the containers
被这个“分享硬盘”问题烦了我好几个小时,终于在一个叫Marco Mansi外国人博客上找到解决方法了,真的很无奈 https://blog.olandese.nl/2017/05/03/solve-d ...
- char 与 varchar 区别
MySQL中的字符串有两个常用的类型:char和varchar,二者各有优势,下面我们来详细分析一下. 转载加补充 在建立数据库表结构的时候,为了给一个String类型的数据定义一个数据库的数据库类 ...
- 12.vue属性.监听.组件
1.计算属性 https://cn.vuejs.org/v2/guide/computed.html new Vue({ computed:{//定义 show(){ } } }) ++计算属性1.h ...
- a标签强制不换行
a标签文字强制不换行 强制不换行 a{ white-space:nowrap; } 再补充说明所有关于换行的CSS样式: white-space: normal|pre|nowrap|pre-wrap ...
- XSS笔记
XSS测试代码: <img src="javascript:alert(/xss/)"> <script src=http://evil.com/xss.js&g ...
- python 发送无附件邮件
import smtplibimport tracebackfrom email.mime.text import MIMETextfrom config.config import * ...
- ivew定制主题 less ^3.0 时报错 .bezierEasingMixin(); Inline JavaScript is not enabled. Is it set in your options?
按照 ivew 提供的方法定制主题,创建一个 less 文件,在其中覆盖变量,再在 main.js 中引入.戳这里 出现报错: 问题貌似是在于 less 版本...两种解决方法: 1.打开项目pack ...
- python框架之Django(12)-认证系统之auth模块
我们在开发一个网站的时候,无可避免的需要设计实现网站的用户系统.此时我们需要实现包括用户注册.用户登录.用户认证.注销.修改密码等功能,这还真是个麻烦的事情呢. Django作为一个完美主义者的终极框 ...
- PHP多维数组转一维
目录 1. array_column函数 2. array_walk函数 3. array_map函数 4. foreach循环 5. array_map变种 参考:https://www.awaim ...