vue3项目的筛选是树状 el-tree 二级树结构（个人笔记）

先说一下筛选要求：可以多选，可以全选，可以取消全选（清空），可以关键字筛选（以下案例仅限于二级的树结构，多级的没有试）,截图如下：

废话不多说，上代码

<el-form class="form">
	<el-form-item label="证书类别">
            <el-select v-model="form.certificationCategory" 
              multiple placeholder="请选择" 
              :filter-method="handleFilter" 
              @remove-tag="handleRemoveTag" 
              @visible-change="handleSelectVisibleChange">
              <template #header>
                <div class="flex-b-">
                  <span class="f14 blue hand" @click="toggleAll3">全选span>
                  <el-input class="search" v-model="sear_str1" placeholder="请选择"/>
                  <span class="f14 blue hand" @click="deselectAll3">清空span>
                div>
              template>
              <el-tree ref="treeRefCert" :data="certificate_list" 
              :filter-node-method="filterNode" 
              show-checkbox 
              :props="defaultProps" 
              node-key="value" 
              @check="handleTreeCheck" >el-tree>
              <el-option value="" style="display:none">el-option> 
            el-select>
          el-form-item>
el-form>

let form = reactive({
      certificationCategory: [],
      ...
})
let certificate_list = ref([  //el-tree的内容
      {click:"AUTO", name:'电力业务许可证', value:'电力业务许可证', children:[
        {name:'发电类电力业务许可证', value:'发电类电力业务许可证'},
        {name:'输电类电力业务许可证', value:'输电类电力业务许可证'},
        {name:'供电类电力业务许可证', value:'供电类电力业务许可证'},
        {name:'电力业务许可证（细类不明）', value:'电力业务许可证（细类不明）'},
      ]},
      {click:"AUTO", name:"ITSS", value:"ITSS"},
      {click:"AUTO", name:'强制性产品认证（CCC）', value:'强制性产品认证（CCC）', children:[
        {name: "电线电缆", value: "电线电缆"},
        {name: "电路开关及保护或连接用电器装置", value: "电路开关及保护或连接用电器装置"},
        {name: "低压电器", value: "低压电器"},
        {name: "小功率电动机", value: "小功率电动机"},
        {name: "电动工具", value: "电动工具"},
        {name: "电焊机", value: "电焊机"},
        {name: "家用和类似用途设备", value: "家用和类似用途设备"},
        {name: "电子产品及安全附件", value: "电子产品及安全附件"},
        {name: "照明电器", value: "照明电器"},
        {name: "车辆及安全附件", value: "车辆及安全附件"},
        {name: "消防产品", value: "消防产品"},
        {name: "安全防范产品", value: "安全防范产品"},
        {name: "建材产品", value: "建材产品"},
      ]}
    ])
const treeRefCert = ref(null) //el-tree的ref
let sear_str1 = ref('')  //搜索的关键字

// 筛选
   function handleFilter(val){
     proxy.$refs.treeRefCert.filter(val)
   }
//删除
    function handleRemoveTag(removedTag){
      form.certificationCategory = form.certificationCategory.filter(
        (value) => value !== removedTag
      )
      treeRefCert.value?.setCheckedKeys(form.certificationCategory)
    }
// 下拉不显示的时候（select框隐藏时），关键字清空，并且树结构恢复到最开始
    function handleSelectVisibleChange(val) {
      if(!val) {  //select框隐藏时，重置树结构
        if(sear_str1.value) {
          handleFilter('')
          sear_str1.value = ''  //关键字清空
        }
      }
    }
    function getAllValues(nodes){
      let values = []
      nodes.forEach(node => {
        if (node.children && node.children.length > 0) {
          values = values.concat(getAllValues(node.children))
        }else{
          values.push(node.value)
        }
      })
      console.log(values)
      return values
    }
// 全选
	function toggleAll3(){
      console.log(treeRefCert.value)
      if(treeRefCert.value){
        const allValues = getAllValues(certificate_list.value)
        form.certificationCategory = allValues
        treeRefCert.value.setCheckedKeys(allValues)
      }
    }
// 清空
    function deselectAll3(){
      console.log(treeRefCert.value)
      if (treeRefCert.value) {
        treeRefCert.value.setCheckedKeys([]);
      }
      form.certificationCategory=[]
    }

function filterNode(value, data) {
      if(!value) return true
      return data['name'].toLowerCase().indexOf(value.toLowerCase()) !== -1
    }
function handleTreeCheck(data, checkedStatus){
      var checkedNodes = checkedStatus.checkedNodes.splice(0)
      if(data.children){
        checkedNodes = checkedNodes.splice(1)
      }
      if(checkedNodes.length){
        for(var i=0; i<checkedNodes.length; i++){
          if(checkedNodes[i].children){
            checkedNodes.splice(i,1)
          }
        }
      }
      form.certificationCategory = checkedNodes.map(node => node.value)
    }

// 监听 搜索的关键字
watch(sear_str1, (val)=>{
      proxy.$refs.treeRefCert.filter(val);
    })

el-tree 的 node-key ，这个属性要写，因为后边“全选” “清除” 的函数里还需要，不然会报错
全选的函数中（ treeRefCert.value.setCheckedKeys(allValues) ）
清除的函数中（ treeRefCert.value.setCheckedKeys([]) ）
函数中的 setCheckedKeys ，如果el-tree上没有设置node-key，这个函数会报错

另外，如果不监听关键字，可以在input上添加@input函数，内容就是 监听的内容。

说个题外话：监听多个的时候，要一个写一个watch，不能写一块，不知道是不是vue3就是这样的，还是我写的不对，我之前写了一个，不报错，也不执行，我把我写的房出来，有哪位可以知道一下，可以留言，感谢[玫瑰花]

watch({sear_str1, sear_str2}, ([new_val, new_val2], [old_val, old_val2])=>{
      console.log(new_val, old_val)
      console.log(new_val2, old_val2)
})