一,  vue_elementUI_ tree树形控件

1.1默认点击tree节点的第一个(注意不是checked选中)

:expand-on-click-node="false" node-key="id" default-expand-all

@node-drop="handleDrop" ref="fileTree" draggable>

{{ node.label }}

@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

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 来显隐

三, el-form  自定义label添加icon

菜单名称

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树形控件有关子节点和父节点之间的各种选中关系详解

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

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相当于一个对实体类对像