Element 트 리 컨트롤 아이콘 이 있 는 드 롭 다운 메뉴 통합(tree+dropdown+input)

사용자 정의 트 리 컨트롤<el-tree>필요 설명:
Element UI 홈 페이지 에서 제공 하 는 트 리 컨트롤 은 기본 적 이 고 선택 가능 하 며 사용자 정의 노드 내용,노드 필터 가 있 는 트 리 와 끌 수 있 는 노드 의 트 리 구 조 를 다음 과 같이 포함 합 니 다.

내 가 원 하 는 효 과 는 검색 효 과 를 지원 하 는 트 리 입 니 다.마 우 스 를 뜨 면 수정 아이콘 을 추가 하고 아이콘 을 클릭 하면 해당 페이지 를 팝 업 합 니 다.또한 폴 더 마다 사용자 정의 아이콘 을 추가 합 니 다.
구현 효과:

실현 절차:
1.슬롯 사용(slot)

<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>

2.구성 요소 에 대응 하 는 JS
메모:트 리 의 데 이 터 는 백 엔 드 에서 조회 되 어dirTreeOptions에 저 장 됩 니 다.

<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>

설명:
참고 문서:element UI,트 리 컨트롤 통합 드 롭 다운 선택
Element 트 리 컨트롤 에 아이콘 이 있 는 드 롭 다운 메뉴(tree+dropdown+input)를 통합 하 는 글 을 소개 합 니 다.더 많은 Element 아이콘 이 있 는 드 롭 다운 메뉴 내용 은 이전 글 을 검색 하거나 아래 글 을 계속 찾 아 보 세 요.앞으로 도 많은 응원 부 탁 드 려 요!