el-tree鼠标选中高亮，但是点击其他地方就会失去高亮，如何解决

el-tree鼠标选中高亮，但是点击其他地方就会失去高亮，如何解决

 解决:

1、

 2、

完整代码:

<template>
  <div>
    <el-row :gutter="40">
      <el-col :span="6">
        <div class="allot-users-title">请选择部门</div>
        <el-scrollbar ref="scrollDiv" style="width:100%;">
          <div  class="tree-container">
            <el-tree
              :highlight-current="highlightBd"
              :data="data"
              :props="defaultProps"
              node-key="id"
              default-expand-all
              :default-checked-keys="[5]"
              @node-click="handleNodeClick"
            ></el-tree>
          </div>
        </el-scrollbar>
      </el-col>

      <!-- 可分配人员开始 -->
      <el-col :span="9">
        <div class="allot-users-title">分配权限</div>
        <div class="content-border every-content" style="height: 54vh">
          <el-checkbox
            v-if="canAllotPeople.length >= 2"
            :indeterminate="isIndeterminateCanAllotPeople"
            v-model="canAllotPeopleCheckAll"
            @change="canAllotPeopleHandleCheckAllChange"
            >全选</el-checkbox
          >

          <el-scrollbar style="width:100%">
            <div class="el-dialog-every-content" style="width:100%">
              <el-checkbox-group
                v-model="checkedAllotPeople"
                @change="handleCheckedAllotPeopleChange"
              >
                <el-checkbox
                  v-for="(item, index) in canAllotPeople"
                  :label="item"
                  :key="index"
                  :disabled="item.feedBackStatus && item.feedBackStatus === 1"
                >
                  <div>
                    {{ item.nickName }}-{{ item.roleName }}-{{ item.deptName}} 
                  </div>
                </el-checkbox>
              </el-checkbox-group>
            </div>
          </el-scrollbar>
        </div>
      </el-col>
      <!-- 可分配人员结束 -->

      <!-- 已分配人员开始 -->
      <el-col :span="9">
        <div class="allot-users-title">已分配人员(保存后生效)</div>
        <div class="content-border every-content" style="height: 54vh" v-if="1">
          <el-scrollbar>
            <div
              class="el-dialog-every-content"
            >
              <span v-for="(item2, index2) in areadyData" :key="index2">
                {{ item2.nickName }}-{{ item2.roleName }}-{{ item2.deptName}} 
              </span>
            </div>
          </el-scrollbar>
        </div>
      </el-col>
      <!-- 已分配人员结束 -->
    </el-row>
  </div>
</template>
<script>
import {
  getData,
  getDataById,
  saveData,
  postSaveData,
} from "@/api/common/common";
export default {
  name: "ByBranch",
  description: "按部门分",

  props: {
    newId: {
      type: Number,
      default: 0,
    },
    menuName: {
      type: String,
      default: "",
    },
    title: {
      type: String,
      default: "",
    },
    byBranchGetTreeUrl: {
      type: String,
      default: "",
    },
    byBranchGetallotUrl: {
      type: String,
      default: "",
    },
    byBranchGetAlreadyAllotUrl: {
      type: String,
      default: "",
    },
    byBranchSaveDataUrl: {
      type: String,
      default: "",
    },
  },

  data() {
    return {
      id: "",
      data: [],
      canAllotPeopleCheckAll: false, //可分配人员全选
      checkedAllotPeople: [], //选择的可分配人员
      canAllotPeople: [], //可分配人员
      isIndeterminateCanAllotPeople: true, //可分配人员
      highlightBd: true,
      // 已分配人员
      areadyData: [],

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

  created() {},
  mounted() {
    this.initData();
  },
  methods: {
    initData() {
      getData(this.byBranchGetTreeUrl).then((res) => {
        this.data = res.data;
      });
    },

    // 查询可分配权限用户
    async handleNodeClick(data) {
      let deptId = data.id;
      let path = this.$route.path;
      let arr = path.split("/");
      let canUrl = `${this.byBranchGetallotUrl}/${deptId}/${this.newId}/${
        arr[arr.length - 1]
      }`;
      await getDataById(canUrl).then((res) => {
        this.canAllotPeople = res.data;
        console.log(this.canAllotPeople, "可分配权限用户");
      });

      // 查询已分配人员

      let areadyUrl = `${this.byBranchGetAlreadyAllotUrl}/${this.newId}/${
        arr[arr.length - 1]
      }`;
      // console.log(areadyUrl, "areadyUrl");
      // console.log(this.$route, "xxxxxxxxxxxxxx");
      // console.log(this.newId, "this.newIdthis.newIdthis.newId");
      await getDataById(areadyUrl).then((res) => {
        this.areadyData = res.data;
        // console.log(this.areadyData, "查询已分配权限");
      });
      this.canAllotPeople = this.canAllotPeople.concat(this.areadyData);
      this.checkedAllotPeople = this.areadyData;
      if (
        this.areadyData.length === this.canAllotPeople.length &&
        this.areadyData.length > 0
      ) {
        this.isIndeterminateCanAllotPeople = false;
        this.canAllotPeopleCheckAll = true;
      } else if (this.areadyData.length === 0) {
        this.isIndeterminateCanAllotPeople = false;
        this.canAllotPeopleCheckAll = false;
      } else {
        this.isIndeterminateCanAllotPeople = true;
        this.canAllotPeopleCheckAll = false;
      }

      // this.$nextTick(() => {
      //   //解决滚动条初始化消失的问题
      //   this.$refs.scrollDiv.update();
      // });
      // this.canAllotPeopleCheckAll = false;//全选默认不选中
    },

    // 可分配人员全选
    canAllotPeopleHandleCheckAllChange(val) {
      // console.log(val,"9999999999999999")
      let arr = [];
      this.areadyData.forEach((item) => {
        if (item.feedBackStatus && item.feedBackStatus === "1") {
          arr.push(item);
        }
      });

      this.checkedAllotPeople = val ? this.canAllotPeople : arr;
      this.isIndeterminateCanAllotPeople = false;
      this.areadyData = this.checkedAllotPeople;
    },

    // 可分配人员单选
    handleCheckedAllotPeopleChange(value) {
      let checkedCount = value.length;
      this.canAllotPeopleCheckAll = checkedCount === this.canAllotPeople.length;
      this.isIndeterminateCanAllotPeople =
        checkedCount > 0 && checkedCount < this.canAllotPeople.length;
      this.areadyData = value;
    },

    //保存
    handleSave() {
      let userIdsArr = [];
      this.areadyData.forEach((element) => {
        userIdsArr.push(element.userId);
      });
      if (this.newId && this.menuName) {
        let userIds = userIdsArr.join();
        let url = this.byBranchSaveDataUrl;
        let data = {};
        data.newId = this.newId;
        data.userId = userIds;
        data.name = this.menuName;
        data.newsName = this.title;
        postSaveData(url, data).then((res) => {
          // console.log(res, "7777777777777777777777");
          if (res.code === 200) {
            this.$message({
              message: "保存成功",
              type: "success",
            });
            this.$emit("updateData");
          } else {
            this.$message({
              message: "保存失败,请确认",
              type: "warning",
            });
          }
        });
      }
    },
  },
};
</script>

<style scoped>

.tree-container {
  /* width: 220px; */
  height: 56vh;
  overflow: auto;
}
.el-tree {
  display: inline-block;
  min-width: 100%;
}
.el-dialog-every-content {
  height: calc(54vh - 20px);
  line-height: 24px;
}
.el-dialog-every-content > span {
  display: inline-block;
  width: 100%;
}

.content-border {
  border: 1px solid #dcdfe6;
}

.every-content {
  padding: 5px 10px;
}
.el-checkbox-group {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
}
.el-checkbox {
  width: 100%;
  line-height: 24px;
  margin-right: 0px;
}
</style>