elementPlus 中的 el-tree-select 在懒加载的同时，实现远程搜索。并且防止在多个 el-tree-select 组件之间切换时，出现上一个组件的显示值变成一个 id 的问题

背景

项目中，对于结构复杂的树形数据选择，一般会使用懒加载的方式。但是懒加载的同时，又需要实现远程搜索，这时候就需要对 el-tree-select 进行一些处理了。

注意，当页面上有多个 el-tree-select 组件时，如果没有配置 value-key，对一个组件进行搜索选中操作，然后点击第二个组件时，可能会导致上一个组件的显示值变成一个 id 值。

1、在之前懒加载的配置之上，增加一些关于搜索的配置

<template>
  <div>
    <el-tree-select
      v-model="formDataModel.deptId"
      v-show="formHidden.deptId"
      :disabled="formDisabled.deptId || disabledBig"
      check-strictly
      lazy
      :load="loadNode"
      value-key="deptId"
      @node-click="selectNode"
      :cache-data="cacheData"
      :props="{
        value: 'deptId',
        label: 'deptName',
        children: 'children'
      }"
      filterable
      :filter-method="remoteMethod"
      :data="deptOptions"
      remote
      :loading="treeloading" />
  </div>
</template>

<script setup>
// 实现懒加载的方法
const loadNode = (node, resolve) => {
  findRootListByDeptIdList({
    parentId: node.data.deptId
  }).then((res) => {
    console.log(266, res)
    return resolve(res.data)
  })
}

// 实现搜索的方法
const treeLoading = ref(false)
const deptOptions = ref([])
const remoteMethod = (query) => {
  if (query) {
    treeloading.value = true
    findRootListByDeptIdList({
      deptName: query
    }).then((res) => {
      deptOptions.value = res.data
      treeLoading.value = false
    })
  }
}

// v-model				id值。只要这个id值在树里能匹配上，就能够顺利回显出其label值。
// lazy 					是否懒加载子节点，需与 load 方法结合使用
// load	          加载子树数据的方法，仅当 lazy 属性为true 时生效
// value-key      它的作用是 指定选中项（v-model 绑定值）的唯一标识字段
// node-key				每个树节点用来作为唯一标识的属性。简单理解为树节点的主键
// cache-data     用作数据回显
// props					配置选项。一般配置value和label的属性值

// data           树的数据
// filterable			组件是否可筛选
// remote					其中的选项是否从服务器远程加载
// filter-method	自定义筛选方法
</script>

2、在 el-tree-select 组件上增加 value-key 属性，防止在多个 el-tree-select 组件之间切换时，出现上一个组件的显示值变成一个 id 的问题

提示

在 Element Plus 的 el-tree-select 组件中，value-key 是一个非常关键的属性，它的作用是 指定选中项（v-model 绑定值）的唯一标识字段。

在使用 el-tree-select 的时候，我们点击搜索结果，虽然 v-model 绑定的值会变成点击节点的 id，但是显示的值还是点击节点的 label。这是因为 el-tree-select 组件内部已经做了处理。也就是说，其实 el-tree-select 组件会缓存这个节点对象，用以显示。咱们使用 cache-data 属性，把缓存的数据传递给 el-tree-select 组件，也是这个原理。

当第一个组件选中一个对象（如 { id: 1, label: '选项 A' }）时，组件内部通过 value-key 判断该对象的唯一性。如果未设置 value-key，组件可能将该对象视为临时值，导致后续操作（如第二个组件的交互）触发 Vue 的响应式更新机制时，第一个组件的绑定值被重置为 id。

而且懒加载的数据是动态加载的，每次加载的节点对象可能是新的实例（引用地址不同）。如果没有 value-key，组件无法正确识别这些对象是否与已选中的对象一致，导致绑定值异常。