Vue3 el-select+el-tree组合+模糊搜索_vue3 tree filter-node-method

<template>

  <el-select

    v-model="value"

    multiple

    placeholder="请选择"

    :popper-append-to-body="false"

    @remove-tag="removetag"

    collapse-tags

    @clear="clearall"

    clearable

    size="default"

  >

//模糊查询搜索框

  <el-input class="input" placeholder="输入单位名称"

  :prefix-icon="Search" v-model="treeFilter" size="mini" clearable style="width:100%" >

  </el-input>

    <el-option :value="selectTree" class="setstyle" disabled >

      <el-tree

         :data="list"

         ref="tree"

         show-checkbox

         node-key="id"

         :props="defaultProps"

         @check-change="handleNodeClick"

         :filter-node-method="filterNode"

       />

    </el-option>

  </el-select>

</template>

<script setup>

import { reactive, ref, nextTick,watch, onMounted } from 'vue';

import { Search} from '@element-plus/icons-vue'

import { axios } from "@src/assets/core";

/**选择器显示

const value = ref([]);

/**实际选择的值

const selectTree = ref([]);

const defaultProps = ref({ children: "children", label: "label" });

 const list = ref([

       {

         id: 3,

         label: "二级 2-1",

         children: [

           {

             id: 4,

             label: "三级 3-1-1"

           },

          {

            id: 5,

             label: "三级 3-1-2"

           },

         

         ]

      },

       {

        id: 2,

         label: "二级 2-2",

         children: [

           {

             id: 6,

             label: "四级 3-2-1"

           },

           {

             id: 7,

             label: "四级 3-2-2"

           },

           {

             id: 8,

             label: "五级 3-2-3"

           }

         ]

       },

       {

         id: 40,

         label: "二级 2-4",

       

       },

       {

         id: 50,

         label: "二级 2-5",

       

       },

       {

         id: 60,

         label: "二级 2-6",

              },

      {

         id: 70,

         label: "二级 2-7",

       

       },

     

 ]);

const tree = ref();

/**

 * 选中全部节点

 *

 */

function clickAll(){

  if(props.clickDepart.length<=0){

    value.value = departList.value.map(item=>{

     return item.label

    })

    selectTree.value = departList.value.map(item=>{

      return item.id

    })

     tree.value.setCheckedKeys(selectTree.value, false)

  }

  else{

    for(let i of props.clickDepart){

      for(let j of departList.value){

        if(j.id == i){

          value.value.push(j.label)

          selectTree.value.push(j.id)

        }

      }

    }

     tree.value.setCheckedKeys(selectTree.value, false)

  }

  putClickDepart()

}

/**

 * 点击选择框选择

 *

 */

function handleNodeClick(data, self, child) {

 let dataList=[]

 dataList[0]=data

 if(self == true){

   dataList.forEach(item => {

   if(item.children){

    for(let i of item.children){

      if(selectTree.value.indexOf(i.id)<0){

        selectTree.value.push(i.id);

        value.value.push(i.label);

      }

    }

   }

   if(!item.children){

      if(selectTree.value.indexOf(item.id)<0){

        selectTree.value.push(item.id);

        value.value.push(item.label);

      }

   }

  });

 }

 if(self == false && child == false){

     if(!dataList[0].children){

      if(selectTree.value.indexOf(dataList[0].id)>=0){

          value.value.splice(value.value.indexOf(dataList[0].label),1)

          selectTree.value.splice(selectTree.value.indexOf(dataList[0].id),1)

        }

      }

      else{

        for(let i of dataList[0].children){

            if(selectTree.value.indexOf(i.id)>=0){

              value.value.splice(value.value.indexOf(i.label),1)

              selectTree.value.splice(selectTree.value.indexOf(i.id),1)

            }

        }

      }

  }

}

/**

 *

 * 清除所有选择

 *

 */

function clearall() {

  selectTree.value = [];

  value.value = [];

  nextTick(() => {

    tree.value.setCheckedNodes([]);

  });

}

/**

 *

 * 监听模糊搜索

 */

watch(treeFilter, (val) => {

  tree.value.filter(val)

})

function filterNode(value,data) {

  if (!value) return true

  return data.label.includes(value)

}

</script>

<style scoped>

.setstyle {

  min-height: 200px;

  padding: 0 !important;

  margin: 0;

  overflow: auto;

  cursor: default !important;

}

</style>