php form 添加滚动条,element 使用总结(1. tree使用 2. table修改滚动条样式 3. el-form 自定义label添加icon)...

一,  vue_elementUI_ tree树形控件

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

@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"});

}

});

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);

}

如下图：

二,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 修改滚动条样式结束

el-form  自定义label添加icon

菜单名称