vue3+elements-plus的TreeSelect实现远程搜索和懒加载

vue3+elements-plus的TreeSelect实现远程搜索和懒加载

vue3、treeselect、远程搜索、懒加载

---

前言

最近在做vue3的项目需要用到树形选择器，需要可远程搜索、懒加载，想着之前在vue2版本使用过的vue-treeslect支不支持vue3，百度了一下有支持的例子，试了很久还是没有实现，最后还是选择了element-plus的树形选择器。

---

一、el-tree-select的使用

 <el-tree-select
        v-model="detailForm.parentId"
        :props="treeprops"
        :data="deptOptions"
        filterable
        :render-after-expand="false"
        placeholder="选择上级"
        remote
        value-key="deptId"
        node-key="deptId"
        :filter-method="asyncOptions"
        :load="loadOptions"
        :loading="treeloading"
        loading-text="正在加载中..."
        lazy
      >
      </el-tree-select>

二、属性和方法说明

1. 属性说明

v-model					id值。只要这个id值在树里能匹配上，就能够顺利回显出其label值。
lazy 					开启懒加载
load					加载子树数据的方法
value-key 				作为 value 唯一标识的键名。简单说就是主键，根据自己后端返回的字段修改
node-key				每个树节点用来作为唯一标识的属性。简单理解为树节点的主键，同value-key
props					配置选项。一般配置value和label的属性值
filterable				组件是否可筛选
remote					其中的选项是否从服务器远程加载
filter-method			自定义筛选方法
load					加载子树数据的方法，仅当 lazy 属性为true 时生效
lazy					是否懒加载子节点，需与 load 方法结合使用
loading					是否正在从远程获取数据
render-after-expand		是否在第一次展开某个树节点后才渲染其子节点

2.懒加载方法

const loadOptions = (node, resolve) => {
  if (node.level === 0) {
    return resolve([]);
  }
  // 调用接口，下边只是一个实例，请根据自己的项目修改
  api(params).then(res)=>{
  	let data = res.data;
  	return resolve(data )
  }
};

3.远程搜索方法

const asyncOptions = (searchQuery) => {
  if (searchQuery) {
    treeloading.value = true
    params.keyword = searchQuery
   	// 调用接口，下边只是一个实例，请根据自己的项目修改
	api(params).then(res)=>{
	  deptOptions.value = res.data
	  treeloading.value = false
	}
  }
};