一,  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

    

    <el-table-column property="name" label="名称" :render-header="renderHeader"></el-table-column>
    methods中添加如下方法:
    renderHeader(h, { column }) { // h即为cerateElement的简写,具体可看vue官方文档
            return h('div',[
                    h('span', column.label),
                    h('i', {
                        class: 'fa fa-asterisk',
                        style: 'color:red; font-size:12px; transform : scale(0.5,0.5);'
                    })
                ]
            );
        },

    

   2.3 v-for 循环el-table-column 并通过 v-if 来显隐

<template v-for="(item,index) in invoiceHeadersList">
             <el-table-column align="center" :key="index" :label="item.name" :prop="item.code" v-if="item.show"></el-table-column>
         </template>
 

三, 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的更多相关文章

  1. Element ui tree树形控件获取当前节点id和父节点id

    低版本Element ui tree树形控件获取当前节点id和父节点id的方法:点击查看 最新版本Element ui tree树形控件获取当前节点id和父节点id教程: 1.找到node_modul ...

  2. Element ui tree树形控件获取父节点id

    Element-ui官网给的方法 getCheckedKeys() { console.log(this.$refs.tree.getCheckedKeys()); }, 这种只有在所有子级都被选中的 ...

  3. vue+element-ui之tree树形控件有关子节点和父节点之间的各种选中关系详解

    做后端管理系统,永远是最蛋疼.最复杂也最欠揍的事情,也永远是前端开发人员最苦逼.最无奈也最尿性的时刻.蛋疼的是需求变幻无穷,如同二师兄的三十六般变化:复杂的是开发难度寸步难行,如同蜀道难,难于上青天: ...

  4. BootstrapBlazor实战 Tree树形控件使用(2)

    继续上篇实战BootstrapBlazor树型控件Tree内容, 本篇主要讲解整合Freesql orm快速制作数据库后台维护页面 demo演示的是Sqlite驱动,FreeSql支持多种数据库,My ...

  5. BootstrapBlazor实战-Tree树形控件使用(1)

    实战BootstrapBlazor树型控件Tree的使用, 以及整合Freesql orm快速制作数据库后台维护页面 demo演示的是Sqlite驱动,FreeSql支持多种数据库,MySql/Sql ...

  6. ElementUI Tree树形控件renderContent return时报错

    问题描述: 使用Tree树形控件使用render-content渲染时return后报错或npm run dev时候报错,报错信息相同,如下: 问题分析: renderContent函数中需要使用js ...

  7. vue-element Tree树形控件通过id默认选中

    一.设置 1.给树形控件设置 ref="tree" node-key="id" 2.在获取数据的位置加上 this.$nextTick(() => { t ...

  8. Element ui 使用 Tree 树形控件

    使用树形控件需要映入 jsx才能运行链接:https://github.com/vuejs/babel-plugin-transform-vue-jsx#usage npm install\ babe ...

  9. elementUI Tree 树形控件--官方文档

    一.基础用法基础的树形结构展示,props相当于一个对实体类对像 <template> <el-tree :data="data" :props="de ...

随机推荐

  1. Linux服务器中创建Oracle数据库实例

    紧接上篇,在Linux服务器已经完成对Oracle数据库软件的安装后,接下来要创建Oracle实例,看图说话: [su – oracle echo $DISPLAY export DISPLAY=10 ...

  2. error_match问题

    当nginx的sendfile处于on的情况下,在docker的环境下修改js文件会出现error_match的问题,应该要在nginx的配置中把sendfile设为off

  3. perl 递归删除目录和目录中的文件

    #!/usr/bin/perl use autodie; use utf8; use Encode qw(decode encode); sub del_dir{ my $path = shift @ ...

  4. css 使元素居中

    css使元素水平居中 1.对于行内元素的水平居中 给父元素设置text-align:center <div style="text-align:center;">居中显 ...

  5. p1010幂次方---(分治)

    题目描述 任何一个正整数都可以用222的幂次方表示.例如 137=27+23+20137=2^7+2^3+2^0 137=27+23+20 同时约定方次用括号来表示,即aba^bab 可表示为a(b) ...

  6. 【转载】解决gridview空行时不显示的问题

    问题: GridView控件应用很是广泛,通常将它与DataSourceControl搭配使用,当然也可以手工指定DataSource属性来完成数据绑定.如果数据源返回一个空行的数据集(例如查询不到指 ...

  7. Spring-Boot之Redis基础

    Spring-Boot之Redis基础 准备 Redis下载地址:github.com/MSOpenTech/redis/releases Redis数据库的默认端口号是 6379 开启Redis服务 ...

  8. jquery截取地址栏中url参数的值

    <script> /*http://127.0.0.9/index.php?s=/Home/Index/fangguan_shuju&zc=2*/ function getQuer ...

  9. Linux在终端命令行模式下智能补全功能以及组合键

    linux命令行下也有很多热键(快捷键).先来看看tab键 1.如果想看看linux下以c开头的命令可直接在命令行下敲入c然后连续敲两次tab,再选择y,会显示所有以c开头的命令. 2.涉及到文件时, ...

  10. PHP计算年龄

    <?php $birthday = strtotime('1992-10-03'); $time = time();//2019-03-14; function datediffage($bir ...