vue3封装表单组件（二）02之el-tree-select组件的使用——懒加载、数据回显 & el-tree和el-select的结合体
需求：在选择组织机构时以树结构下拉展示。
el-tree-select组件是el-tree和el-select的结合体，他们的原始属性未被更改，故具体属性、方法还是参照el-tree和el-select
安装
npm install el-tree-select --save-dev git地址
https://github.com/ayiaq1/el-tree-select
参考文档地址：
- https://element-plus.gitee.io/zh-CN/component/tree-select.html
- https://element-plus.gitee.io/zh-CN/component/tree.html
npm地址——el-tree-select - npm (npmjs.com)
github地址——GitHub - ayiaq1/el-tree-select: 基于element-ui2.x扩展下拉树
在线api——ElTreeSelect - el-tree-select (ayiaq1.github.io)
在线测试——渲 染 - 通 过 props 传 参 数 ⋅ Storybook (ayiaq1.github.io)
npm的示例
<template> <div id="app"> <el-tree-select :styles="styles" v-model="values" :selectParams="selectParams" :treeParams="treeParams" :treeRenderFun="_renderFun" @searchFun="_searchFun" @node-click="_nodeClickFun" ref="treeSelect"/> <el-select multiple v-model="test" placeholder="请选择" @change="_selectChange"> <el-option v-for="item in treeParams.data" :key="item.testId" :label="item.name" :value="item.testId"></el-option> </el-select> </div> </template> <style> #app { display: flex; justify-content: space-between; width: 600px; } </style> <script> export default { name: 'App', data() { return { styles: { width: '300px' }, test: '', values: ['11111'], selectParams: { multiple: true, clearable: true, placeholder: '请输入内容' }, treeParams: { clickParent: false, filterable: true, 'check-strictly': true, 'default-expand-all': true, 'expand-on-click-node': false, data: [], props: { children: 'child', label: 'name', disabled: 'disabled', value: 'testId' } } }; }, mounted() { let data = [ { testId: '1', name: '节点1', disabled: true, child: [ { testId: '11111', name: '子节点' } ] }, { testId: '2', name: '节点2', child: [ { testId: '', disabled: true, name: '子节点' } ] }, { testId: '3', name: '节点3' }, { testId: '4', name: '节点4' }, { testId: '5', name: '节点5' }, { testId: '6', name: '节点6' } ]; this.treeParams.data = data; this.$refs.treeSelect.treeDataUpdateFun(data); }, methods: { // 下拉框修改 _selectChange(val) { console.log(val, '<-select change'); }, // 树点击 _nodeClickFun(data, node, vm) { console.log('this _nodeClickFun', this.values, data, node); }, // 树过滤 _searchFun(value) { console.log(value, '<--_searchFun'); // 自行判断 是走后台查询，还是前端过滤 // this.$refs.treeSelect.$refs.tree.filter(value); this.$refs.treeSelect.filterFun(value); // 后台查询 // this.$refs.treeSelect.treeDataUpdateFun(treeData); }, // 自定义render _renderFun(h, { node, data, store }) { return ( <span class='custom-tree-node'> <span>{node.label}</span> </span> ); } }, components: { } }; </script> 使用
结构
<el-tree-select v-model="form.deptId" lazy ref="treeRef" :load="loadNode" :props="{ value: 'deptId', label: 'deptName'}" value-key="deptId" node-key="deptId" placeholder="请选择" show-checkbox check-strictly highlight-current :default-expanded-keys="defaultExpandedNodes" /> 属性描述
| 参数 | 释义 |
|---|---|
| v-model | id值。只要这个id值在树里能匹配上，就能够顺利回显出其label值。 |
| lazy | 开启懒加载 |
| load | 加载子树数据的方法 |
| value-key | 作为 value 唯一标识的键名。简单说就是主键，根据自己后端返回的字段修改 |
| node-key | 每个树节点用来作为唯一标识的属性。简单理解为树节点的主键，同value-key |
| props | 配置选项。一般配置value和label的属性值 |
| show-checkbox | 开启复选框 |
| check-strictly | 可选择任一级别 |
| highlight-current | 选中高亮显示 |
| default-expanded-keys | 默认展开节点的key数组（懒加载时用于数据回显，这个属性非常关键） |
methods
/ 懒加载获取树形结构*/ function loadNode(node, resolve) {
// node其实是需要展开树节点，但是第一次的node是个无用的数据，可以认为这个node是element给我们创建的，判断的话，就是level等于0 if (node && node.level == 0) {
getDeptData(0, resolve); } else {
getDeptData(node, resolve); } } // 从后端获取数据列表 function getDeptData(node, resolve){
//构造参数 let params = {
}; params.pageSize = 100; if(node == 0){
//根节点 params.deptId = '1'; }else if(node.data.deptId){
//中间节点 params.parentId = node.data.deptId; }else{
return resolve([]); } // listDept是像后端访问组织结构数据的接口，根据实际场景修改 listDept(params).then(response => {
let data = response.data; return resolve(data); }) } 回显
由于用到懒加载，与一次性全部加载数据不同的是，当前只有ID，而树结构还没渲染，就会导致没有label回显。所以我们要在组件刚渲染的时候，就构造我们想要的树节点。
用到了default-expanded-keys属性，表示默认展开节点的key数组。el-tree-select会按照这个keys数组，自动调用loadNode方法，获取数据并渲染树节点。
default-expanded-keys的取值有两种思路：
- 增加/修改的时候，获取从顶层根节点到当前选中节点的key路径，比如：[‘01’,‘0101’,‘010101’]，一并保存到数据表里。
- dept数据表里增加这么个字段，从根节点到当前节点的key路径
最后在获取当条数据form内容的同时，把要展开节点的keys路径赋值给default-expanded-keys即可，就会默认展开到当前节点并成功回显label。
版权声明：
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！
转载请注明出处，原文链接：https://www.xkablog.com/sjkxydsj/10751.html