vue樹形element元件樣式方法

阿新 • • 發佈：2020-12-19

技術標籤：vue

1、temple中的程式碼

  <el-tree
        ref="tree"
        node-key="id"
        :data="data2"
        show-checkbox
        :props="defaultProps"
        @check-change="checkChange"
      >
      </el-tree>

data樹形結構的資料
show-checkbox 顯示覆選框

ref 可以this.$refs.DeviceGroupTree拿到此控制元件
node-key 給節點的編號【樹形資料結構中有id欄位】
check-stricty 父、子節點之間沒有關聯【不寫這個，選了父節點，會預設選擇全部的子節點】
check 複選框選擇、取消選擇時觸發的事件
:props=“defaultProps”，在data中繫結子節點的名稱(label)和子節點（children）
@check-change="checkChange"繫結checkChange方法，當樹結構改變的時候觸發這個方法

  defaultProps: {
        label: 
 "label",
        children: "children",
      },

2、繫結的:data屬性

  data2: [
        {
          id: 1,
          label: "企業點",
          children: [
            {
              id: 4,
              label: "工貿企業",
            },
            {
              id: 5 
,
              label: "危險化學品",
            },

            {
              id: 6,
              label: "建築施工",
            },
            {
              id: 7,
              label: "教育",
            },
            {
              id: 8,
              label: "民爆及煙花爆竹",
            },
            {
              id: 9,
              label: "礦山企業",
            },
            {
              id: 10,
              label: "其他企業",
            },
          ],
        },
        {
          id: 2,
          label: "風險點",
        },
        {
          id: 3,
          label: "隱患點",
        },
      ],
       defaultProps: {
        label: "label",
        children: "children",
      },

3、拿到選中的所有的label（名稱）

1、當樹形框改變之後，頁面拿到所有選中的值的實體資訊，並把實體資訊進行foreach迴圈儲存在新建的陣列中
getCheckedNodes（拿到所有的選中節點）

 checkChange() {
      let res = this.$refs.tree.getCheckedNodes();
      let arr = [];
      res.forEach((item) => {
        arr.push(item.label);
      });}

2、開啟頁面並渲染指定的資料
setCheckedNodes設定資料

 this.$nextTick(() => {
        //  this.$nextTick(()是一個非同步事件，
        this.$refs.tree.setCheckedNodes(this.data2);
      });

4、樹形元件樣式

1、自定義樣式

/* 設定樹形最外層的背景顏色和字型顏色 */
.el-tree {
  color: #fff;
  background: transparent;
}
 
/* 設定三角形圖示的顏色 */
.el-tree-node__expand-icon {
  color: #fff;
}
 
/* 設定節點滑鼠懸浮三角圖示滑鼠懸浮的顏色 */
.el-tree-node__content:hover .el-tree-node__expand-icon {
  color: #000;
}
/* .el-tree-node__content:hover .el-tree-node__expand-icon.is-leaf {
  color: transparent;
} */
 
/* 樹節點滑鼠懸浮式改變背景色，字型顏色 */
.el-tree-node__content:hover {
  background-color: #3274e6;
  color: #fff;
}
 
/* 改變節點高度 */
.el-tree-node__content {
  height: 36px;
}
 
/* 節點前邊的三角圖示並不會被節點樣式影響，需要單獨修改 當前啟用的顏色*/
.el-tree-node:focus > .el-tree-node__content
  .el-tree-node__expand-icon {
  color: #fff;
}
 
/* 改變被點選節點背景顏色，字型顏色 */
.el-tree-node:focus > .el-tree-node__content {
  background-color: #3274e6;
  color: #fff;
}

2、如果父元件帶 scoped
在這裡插入圖片描述
則要帶上自定義樣式下面的深度樣式（因為我的放在.leftbox下面在）

.leftbox /deep/.el-checkbox__label {
  display: inline-block;
  padding-left: 0.3rem;
  line-height: 15px;
  font-size: 15px;
  font-weight: bolder;
  color: white;
}
/* 設定樹形最外層的背景顏色和字型顏色 */
.leftbox /deep/.el-tree {
  color: #fff;
  background: transparent;
}

/* 設定三角形圖示的顏色 */
.leftbox /deep/ .el-tree-node__expand-icon {
  color: #fff;
}

/* 設定節點滑鼠懸浮三角圖示滑鼠懸浮的顏色 */
.leftbox /deep/ .el-tree-node__content:hover .el-tree-node__expand-icon {
  color: #000;
}
/* .el-tree-node__content:hover .el-tree-node__expand-icon.is-leaf {
  color: transparent;
} */

/* 樹節點滑鼠懸浮式改變背景色，字型顏色 */
.leftbox /deep/ .el-tree-node__content:hover {
  background-color: #3274e6;
  color: #fff;
}

/* 改變節點高度 */
.leftbox /deep/ .el-tree-node__content {
  height: 26px;
}

/* 節點前邊的三角圖示並不會被節點樣式影響，需要單獨修改 當前啟用的顏色*/
.leftbox
  /deep/
  .el-tree-node:focus
  > .el-tree-node__content
  .el-tree-node__expand-icon {
  color: #fff;
}

/* 改變被點選節點背景顏色，字型顏色 */
.leftbox /deep/.el-tree-node:focus > .el-tree-node__content {
  background-color: #3274e6;
  color: #fff;
}