Element树形控件整合带图标的下拉菜单(tree+dropdown+input)

<el-col :span="4" :xs="24">   <!--目录搜索功能-->  <div class="head-container">    <el-input      v-model="dirNameCn"      placeholder="请输入目录名称"      clearable      size="small"      prefix-icon="el-icon-search"      style="margin-bottom: 20px"    />  </div>  <!--树的展示-->  <div class="head-container">    <el-tree      :data="dirTreeOptions"      :props="defaultProps"      :expand-on-click-node="false"      :filter-node-method="filterNode"      ref="tree"      default-expand-all      @node-click="handleNodeClick"      icon-class="el-icon-folder-opened"      node-key="id"      :check-on-click-node="true"    >      <!--隐藏的新增等图标-->      <span class="custom-tree-node" slot-scope="{ node, data }" @mouseenter="mouseenter(data)" @mouseleave="mouseleave(data)">        <span>{{ node.label }}</span>        <div>          <i v-show="data.show" class="el-icon-circle-plus" style="color: #00afff" @click="addDial(node, data)"/>          <!--隐藏的下拉选-->          <el-dropdown trigger="click" placement="right" @command="(command) => {handleCommand(command)}">            <i v-show="data.show" class="el-icon-more" style="color: #D3D3D3"/>            <el-dropdown-menu slot="dropdown">              <el-dropdown-item command="a">重命名</el-dropdown-item>              <el-dropdown-item command="b">删除</el-dropdown-item>            </el-dropdown-menu>          </el-dropdown>        </div>      </span>    </el-tree>  </div></el-col>

<script>  export default {    name: 'reqmdoctree',    data() {      return {        // 左侧搜索框内容        dirNameCn: '',       	// 目录树选项        dirTreeOptions: undefined,        defaultProps: {          children: "children",          label: "label"        },        // 树形菜单中有无子节点        yesChild: undefined,        // 控制左侧新增提示信息框        show: 0,        // 查询需求文档信息参数        queryParams: {          docNo: undefined, // 文档编号          docNameEn: undefined, // 文档英文名称          dirNo: undefined,// 目录编号          current: 1, // 当前页数          size: 20 // 每页显示多少条        },        treeId: undefined,      }    },    methods: {      /** 查询需求目录下拉树结构 */      getTreeselect() {        treeselect().then(response => {          this.dirTreeOptions = response.data        })      },      // 搜索值为过滤函数      filterNode(value, data) {        if (!value) return true        return data.label.indexOf(value) !== -1      },      // 节点被点击时的回调函数      handleNodeClick(data) {        // console.log(data)        this.treeId = data.id        this.yesChild = data.children        this.queryParams.dirNo = data.id        this.getList()      },      // 树中三个点的事件      handleCommand(command) {        if (command == 'a') {          selectReqNo(this.treeId).then(response => {            this.uuid = response.msg            getObjTree(response.msg).then(response => {              this.form = response.data              this.open = true              this.title = '修改需求文档目录配置表'            })          })        }        if (command == 'b') {          if (this.yesChild != undefined) {            this.$notify.error({              title: '警告',              message: '此目录下还有别的文件夹'            })          } else {            selectReqNo(this.treeId).then(response => {              this.uuid = response.msg              this.$confirm('是否确认删除ID为' + this.uuid + '的数据项？', '警告', {                confirmButtonText: '确定',                cancelButtonText: '取消',                type: 'warning'              }).then(()=>{                return delObjTree(this.uuid)              }).then(data => {                this.getTreeselect()                this.msgSuccess('删除成功')              }).catch(function() {              })            })          }        }      },      // 左侧新建目录/文件      addDial(node, data) {        // console.log(node, '---', data)        this.reset()        this.form.dirParentId = data.id        this.open = true        this.title = '添加需求文档目录配置表'      },      // 左侧鼠标悬浮展示图标      mouseenter(data){        this.$set(data, 'show', true)      },      // 左侧鼠标离开不展示图标      mouseleave(data){        this.$set(data, 'show', false)      },      //打开新增资源弹窗 这里略......    }  }</script>