elememt el-tree使用(樣式修改+設定為單選,不含父節點)
阿新 • • 發佈:2021-02-02
elememt el-tree使用(樣式修改+設定為單選,不含父節點)
最近在使用element做練習,就單純的想對使用的元件和功能做一下下記錄—v—
直接在elememt官網找自己想要使用的元件就好
html
<el-tree ref="tree" :data="typeList" ---展示資料 :props="defaultProps"---配置選項 :show-checkbox="true" --節點是否可被選擇(顯示覆選框) :check-strictly="true" ---在顯示覆選框的情況下,是否嚴格的遵循父子不互相關聯的做法 node-key="mCode" ---每個樹節點用來作為唯一標識的屬性 @node-click="handleNodeClick" ---事件-節點被點選時的回撥 @check-change="treeNodeClick" ---事件-節點選中狀態發生變化時的回撥 :check-on-click-node="true" ---是否在點選節點的時候選中節點 :default-expand-all="true" ---是否預設展開所有節點 > </el-tree>
data
typeList:[{ mCode:1, label:'標題一', disabled:true, children:[ {mCode:4,label:"1-1"}, {mCode:5,label:"1-2"}, {mCode:6,label:"1-3"}, {mCode:7,label:"1-4"} ] },{ mCode:2, label:'標題二', disabled:true, children:[ {mCode:8,label:"2-1"} ] },{ mCode:3, label:'標題三', disabled:true, children:[ {mCode:9,label:"3-1"}, {mCode:10,label:"3-2"}, {mCode:11,label:"3-3"} ] }], defaultProps: { children: 'children', label: 'label', id:'mCode' },
methods
//tree樹形結構點選函式@node-click="handleNodeClick" handleNodeClick(item){ }, // tree單選 //setCheckedKeys:通過 keys 設定目前勾選的節點,使用此方法必須設定 node-key 屬性 //getCheckedKeys:若節點可被選擇(即 show-checkbox 為 true),則返回目前被選中的節點的 key 所組成的陣列 treeNodeClick (data, checked) { let res = [] if (checked){ this.$refs.tree.setCheckedKeys([data.mCode]);//設定選中mCode對應的節點 res=this.$refs.tree.getCheckedNodes(); }else { //當切換選擇時,可能有兩個節點發生狀態變化,res最後會記錄被動變化為未選中的節點的key res = this.$refs.tree.getCheckedKeys(); console.log(res,res.length); if(res.length == 0){ res = '' } } },
修改樣式
/* 設定樹形最外層的背景顏色和字型顏色 */
.el-tree {
background: palegoldenrod;
color: black;
width: 200px;
}
/*節點選中時樣式*/
.el-tree-node.is-current > .el-tree-node__content {
background-color: rgba(46,139,87,0.5) !important;
}
/*hover滑鼠移入節點時樣式*/
.el-tree-node__content:hover {
background-color: rgba(255,255,255,0.8) !important;
}
/* 改變節點高度 */
.el-tree-node__content {
height: 25px;
}
/*show-checkbox屬性開啟後,僅限子葉節點顯示勾選(隱藏父節點的勾選按鈕)*/
.is-leaf + .el-checkbox .el-checkbox__inner {
display: inline-block;
}
.el-checkbox .el-checkbox__inner{
display: none;
}
/* 設定三角形圖示的顏色 */
.el-tree-node__expand-icon {
color: red;
}
/* 設定節點滑鼠懸浮三角圖示滑鼠懸浮的顏色 */
.el-tree-node__content:hover .el-tree-node__expand-icon {
color: green;
}
/* 節點前邊的三角圖示並不會被節點樣式影響,需要單獨修改 當前啟用的顏色*/
.el-tree-node:focus > .el-tree-node__content .el-tree-node__expand-icon {
color: blue;
}