若依前后端分離版實現基於el-tree實現選中部門樹節點同步選中多選框的操作

場景

ElementUI中el-tree控件封裝公共控件(部門列表)並請求后台數據獲取父子級數據並構建成前端數據結構數據：

https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/107862515

在上面已經實現的部門多選樹的效果為

 

 

現在要實現的效果為，鼠標單擊樹節點時直接能實現點擊左邊的勾選框的效果。

即不用點擊勾選框則能直接實現勾選效果，提高用戶體驗，具體效果如下

 

 

注：

博客：
https://blog.csdn.net/badao_liumang_qizhi
關注公眾號
霸道的程序猿
獲取編程相關電子書、教程推送與免費下載。

實現

在上面的博客中實現了多選樹節點實現的效果。

設置多選框的改變事件是通過設置

@check="handleCheck"

然后在事件中

      handleCheck(data, checked){
        let deptIdList = [];
        for(let i = 0;i<checked.checkedNodes.length;i++){
          if(!checked.checkedNodes[i].children){
            deptIdList.push(checked.checkedNodes[i].id)
          }
        }
        this.$emit('handleCheck', deptIdList)
      },

能通過參數直接獲取選中所有的節點

同理設置節點的點擊事件

@node-click="handleNodeCheck"

添加的地方為

    <el-tree
      :data="deptOptions"
      :props="defaultProps"
      :expand-on-click-node="false"
      :filter-node-method="filterNode"
      ref="tree"
      show-checkbox
      node-key="id"
      :default-expanded-keys="zKOptions"
      @check="handleCheck"
      @node-click="handleNodeCheck"
    />

然后對應的具體的事件實現

      handleNodeCheck(data, checked){
        let getCheckedNodes = this.$refs.tree.getCheckedNodes();//獲取之前選中的節點
        let dataNodes = tree([],data);//獲取當前選中的節點
        let getCheckedNodestemp = {};//用於判斷之前選中的節點是否存在當前選中的節點的子節點
        let delgetCheckedNodestemp = 'false';////用於判斷之前選中的節點是否存在當前選中的節點的子節點
        getCheckedNodes.map((item,index)=>{
          getCheckedNodestemp[item.id] = true
        })
        let dataNodestemp = {};//用於判斷當前選中的節點為父節點時是否取消勾選該父節點下所有子節點
        dataNodes.map((item,index)=>{
          if(item.children){
            item.children.map((item2,index2)=>{
              if(getCheckedNodestemp[item2.id]){
                delgetCheckedNodestemp = 'true';
              }
            })
            item.children.map((item3,index3)=>{
              if(delgetCheckedNodestemp === 'true'){
                dataNodestemp[item3.id] = true
              }
            })
          }
        })
        let newData = getCheckedNodes.concat(dataNodes);//合並成一個數組
        let temp = {};//用於id判斷重復
        let result = [];
        newData.map((item,index)=>{
          if(!temp[item.id] && !dataNodestemp[item.id] ){
            result.push(item);
            temp[item.id] = true
          }else{
            result.map((item2,index2)=>{
              if(item2.id === item.id){
                result.splice(index2,1);
              }
            })
          }
        })
        let handleChecked = {};
        handleChecked.checkedNodes = [];
        //只保留最后一級子節點的參數
        for(let i = 0;i<result.length;i++){
          if(!result[i].children){
            handleChecked.checkedNodes.push(result[i])
          }
        }
        this.$refs.tree.setCheckedNodes(handleChecked.checkedNodes)
        this.handleCheck(data,handleChecked);
      }

即可實現如上效果。