目錄

• 需求說明：
• 實現步驟：

本文主要講述：自定義樹形控制元件<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-cl
 
ick-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>
         cyQMOtRsi
 
 </el-dropdown>
        </div>
      </span>
    </el-tree>
  </div>
</el-col>

2、元件對應的

注意：樹的資料是從後端查詢回來的，儲存在dirTreeOptions裡面

<script>
  export default {
    name: 'reqmdoctree',data() {
      return {
        // 左側搜尋框內容
        dirNameCn: '',// 目錄樹選項
        dirTreeOptions: undefined,defaultProps: {
          children: "children",label: "label"
        },// 樹形選單中有無子節點
        yesChild: undefined,// 控制左側新增提示資訊框
        show: 0,// 查詢需求文件資訊引數
        queryhttp://www.cppcns.com
 
Params: {
          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'
           http://www.cppcns.com   }).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,false)
      },//開啟新增資源彈窗 這裡略......
    }
  }
</script>

說明：

參考文件：element UI、樹形控制元件整合下拉選

到此這篇關於Element樹形控制元件整合帶圖示的下拉選單(tree+dropdown+input)的文章就介紹到這了,更多相關Element帶圖示的下拉選單內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！