element tree的开发使用

1.树的插槽，实现右边点击三个点打开操作的效果

<div class="el-tree-box">
        <el-tree
          class="filter-tree"
          :data="data"
          :props="defaultProps"
          @node-click="nodeClick"
          default-expand-all
          node-key="orgId"
          :filter-node-method="filterNode"
          ref="tree"
          :expand-on-click-node="false"
        >
          <span class="custom-tree-node" slot-scope="{ node, data }">
            <!-- <span>{
    { node }}</span> -->
            <span class="em-tree-text" :title="node.label">{
   { node.label }}</span>
            <span
              class="operation"
              v-if="node.level < 9"
              @click.stop="operationClick(node, data, $event)"
              >···</span
            >
          </span>
        </el-tree>
      </div>

2.三个点全部靠右，并且超出盒子时会显示…并且鼠标移入有完整节点信息（默认是贴着左侧节点名称，通过修改css实现）

实现方式：html

<span class="custom-tree-node" slot-scope="{ node, data }">
            <!-- <span>{
    { node }}</span> -->
            <span class="em-tree-text" :title="node.label">{
   { node.label }}</span>
            <span
              class="operation"
              v-if="node.level < 9"
              @click.stop="operationClick(node, data, $event)"
              >···</span
            >
          </span>

css：

.custom-tree-node {
    
      display: flex;
      flex: 1;
      width: 100%;
      align-items: center;
      justify-content: space-between;
      padding-right: 10px;
      position: relative;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      .em-tree-text {
    
        display: inline-block; //block一样
        overflow: hidden;
        white-space: nowrap;
        width: 100%;
        text-overflow: ellipsis;
      }
    }

知识点：鼠标移入有完整节点信息是利用了ｓｐａｎ的：ｔｉｔｌｅ属性，只要绑定了，鼠标移入就会有提示
参考网址：https://www.cnblogs.com/LindaBlog/p/11136712.html　，　https://www.cnblogs.com/leah-blogs/articles/15987330.html

3.更改前方图标展开和收起的图标

html:(只是为了加上el-tree-addordel这个类)

 <el-tree
                :data="treeData"
                :props="defaultProps"
                class="el-tree-addordel"
                node-key="id"
                default-expand-all
                key="1"
              >
                <span class="custom-tree-node" slot-scope="{ node, data }">
                  <span>{
   { node.label }}</span>
                  <span class="operation">
                    <el-radio-group v-model="data.isPublic" @change="changeMenuData(node, data)">
                      <el-radio :disabled="data.disabled" :label="true">公开</el-radio>
                      <el-radio :label="false">禁止</el-radio>
                    </el-radio-group>
                  </span>
                </span>
              </el-tree>

css：（加了el-tree-addordel这个类的tree展开和收起是 + - 号 ，没加这个类的还是默认的ˇ）

.el-tree-addordel {
    
  // 更换+ - 图标
  .el-tree-node__expand-icon.expanded {
    
    -webkit-transform: rotate(0deg) !important;
    transform: rotate(0deg) !important;
  }
  .el-icon-caret-right:before {
    
    // 加号图片
    content: url('../assets/img/tree-add.png') !important;
    font-size: 16px;
  }
  .expanded:before {
    
    // 减号图片
    content: url('../assets/img/tree-del.png') !important;
    font-size: 16px;
  }
  .is-leaf.el-tree-node__expand-icon.el-icon-caret-right:before {
    
    content: '' !important;
    font-size: 16px;
  }
}

参考地址：https://segmentfault.com/a/1190000020133617

4.树形组件tree的每一行与单选框做绑定

 <el-tree
                :data="treeData"
                :props="defaultProps"
                class="el-tree-addordel"
                node-key="id"
                default-expand-all
                key="1"
              >
                <span class="custom-tree-node" slot-scope="{ node, data }">
                  <span>{
   { node.label }}</span>
                  <span class="operation">
                    <el-radio-group v-model="data.isPublic" @change="changeMenuData(node, data)">
                      <el-radio :disabled="data.disabled" :label="true">公开</el-radio>
                      <el-radio :label="false">禁止</el-radio>
                    </el-radio-group>
                  </span>
                </span>
              </el-tree>

注意点，这里跟单选框绑定之后，会直接去修改你tree绑定的data。并且v-model应该与slot中的data绑定而不是node，否则会报错（element tree中node不可更改）

5.element-tree默认选中第一个节点（js代码实现）

authOrgListWithTree().then((res) => {
    
        this.data = res
        if (res.length > 0) {
    

          //'nextTick()' 下次dom更新时触发回调函数
          //默认点击
          this.$nextTick().then(() => {
    
            const firstNode = document.querySelector('.el-tree-node')
            firstNode.click();
            if (this.filterText) {
    
              this.$refs.tree.filter(this.filterText);
            }
          })
        }
      })

参考地址：https://blog.csdn.net/qq_42307369/article/details/106386730

6.在一个页面新建成功后回来还是点击的该节点

业务场景：比如选中了一个树节点，点击了新建在改节点下去新建一个用户，新建完成之后回来，该树节点应该还是保持选中状态（比如我这里选择了网安监督组，新建进入到新建页面，回来之后选中的依然应该是网安监督组。）

我这里是抽成了一个方法。如果有选中的节点currentNodeData，那么新建成功就回去找到这个节点并且选中，没有的话，就默认选中第一个节点。利用的是element-tree的setCurrentKey方法（ 通过 key 设置某个节点的当前选中状态，使用此方法必须设置 node-key 属性 ，保证树节点唯一性 ）

js：

backToOriginTreeStatus () {
    
      this.$refs.tree.setCurrentKey(this.currentNodeData !== '' ? this.currentNodeData.orgId : this.data[0].orgId)
      this.$nextTick(() => {
    
        document.querySelector(".is-current").firstChild.click()
      })
    },

参考网址：https://blog.csdn.net/qq_37548296/article/details/108664219

7.element-tree修改选中的背景颜色

.el-tree {
    
  background: transparent !important;
  color: #c0d0e7 !important;
  .el-tree-node__content{
    
    height: 32px;
    .el-checkbox.is-disabled{
    
      display: none !important;
    }
  }
  .el-tree-node__content:hover {
    
    background-color: #3e4c64 !important;
  }
  .el-tree-node:focus > .el-tree-node__content {
    
    background-color: #3e4c64 !important;
  }

  .el-tree-node.is-current > .el-tree-node__content {
    
    background-color: #3e4c64 !important;
  }
  // 禁用的颜色
  .el-checkbox__input.is-disabled .el-checkbox__inner {
    
    background-color: red !important;
    display: none !important;
  }
}

https://blog.csdn.net/ywy_wc/article/details/88617702

8.编辑时树节点回显（点击列表中的编辑，会打开弹框，树中会显示该用户的角色）

利用element中的setCheckedKeys方法（ (keys, leafOnly) 接收两个参数，1. 勾选节点的 key 的数组 2. boolean 类型的参数，若为 true 则仅设置叶子节点的选中状态，默认值为 false ）。

注意点：该方法第一个参数一定是个数组，哪怕是你要回显一个选中的，你都要包装成数组。另外就是需要设置node-key属性保证节点的唯一性

9.只有角色前面才有选择框，部门前面没有选择框。（js配合css实现）

思路：首先给el-tree加上show-checkbox这个属性显示所有的选择框，其次在返回的要绑定的数据:data=“popTreeData”，对该数据做处理，将类别时部门的全部加上 disabled:true这个属性。此时页面上就会有两种选择框（一个可选，一个不可选）。最后利用css将这个不可选的选择框的display改为none

js处理的就不贴出来了，就是一个递归处理数据的过程。

css:

.el-tree {
    
  // 禁用的颜色
  .el-checkbox__input.is-disabled .el-checkbox__inner {
    
    background-color: red !important;
    display: none !important;
  }
}

10.只有叶子节点（最底层没有children的）才显示多选框

.el-tree-node {
    
  .is-leaf + .el-checkbox .el-checkbox__inner {
    
      display:inline-block;
  }
  .el-checkbox__input> .el-checkbox__inner {
    
      display:none;
  }
}

11.叶子节点单选，只能选择一个树节点。

参考网址：https://www.it610.com/article/1297066866610610176.htm

与z-tree的使用感受：element-tree抽出来的东西用起来比较顺手，但是很多地方就是没办法更改的，这个没办法。z-tree就是基本上能看到的都有api给你去改。但是使用比较麻烦，得把jq的改成vue的。如果业务树组件不太复杂，element-tree能满足需求还是尽量使用element-tree。如果满足不了的话，那就上z-tree