el-tree组件如何实现图中所说的需求？

Question

组件的双击是双击之前什么样双击之后还是什么样

Answer 1

先拦截默认的单击展开事件，再在node-click自定义一个判断是单击还是双击的方法去执行相应的事件，可以参考https://www.cnblogs.com/codeb...

Answer 2

或许你需要复选框

和这个

Answer 3

https://blog.csdn.net/weixin_...
这里有el-tree双击事件。

Answer 4

就还是用 el-dialog 去做自定义弹窗，只是我这边左侧内容不一样。我是用 el-menu 来实现的，点击选中不同的公司及企业进入下一级类目。
右侧就是一个可供选择的职员列表。然后就是一些查询的业务查询逻辑了。

---

你用 el-tree 也是可以的就可以结构更加紧凑一些。只是双击最好是修改成以选择框的形式来做（开启 show-checkbox 属性就好了）。直接点选部门和职员，点击箭头就是展开下级目录，做一下懒加载就很合适了。

---

我这边的模板结构如下：

<template>
  <el-dialog
    title="职员选择弹窗"
    width="800px"
    append-to-body
    :visible.sync="dialogVisible"
    :before-close="handleClose"
  >
    <el-row :gutter="50">
      <!-- 左侧企业及部门检索部分 -->
      <el-col :span="12">
        <el-input v-model="menuKeyword" style="width:250px" placeholder="输入以检索..." prefix-icon="el-icon-search" clearable />
        <el-breadcrumb style="margin:20px 0" separator="/">
          <el-breadcrumb-item>
            <el-button type="text" icon="el-icon-office-building" @click="handleClickGroup">全集团</el-button>
          </el-breadcrumb-item>
          <el-breadcrumb-item v-if="currentCompany">
            <el-button type="text" icon="el-icon-school" @click="handleClickCompany">
              {{ currentCompanyName }}
            </el-button>
          </el-breadcrumb-item>
        </el-breadcrumb>
        <el-menu
          v-loading="menuFetching"
          class="menu-list"
          :default-active="currentSelectKey"
          @select="handleMenuSelect"
        > ...
        </el-menu>
      </el-col>
      <!-- 右侧职员选择部分 -->
      <el-col :span="12">
        <div>
          <el-input v-model="userKeyword" style="width:250px" placeholder="输入姓名/工号以检索..." prefix-icon="el-icon-search" clearable />
        </div>
        <div v-loading="contentFetching">
         ...
        </div>
      </el-col>
    </el-row>
    <div class="selected-user-list">
      <span>已选择:</span>
      <el-tag
        v-for="item in selectedList"
        :key="item.uid"
        closable
        @close="handleRemoveStaff(item)"
      >{{ item.realName }}({{ item.uid }})
      </el-tag>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="handleSubmit">确 定</el-button>
      <el-button @click="handleClose">取 消</el-button>
    </span>
  </el-dialog>
</template>