技術標籤：el-treeelememtvue

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

效果圖