vue3封装表单组件（二）02之el-tree-select组件的使用——懒加载、数据回显 & el-tree和el-select的结合体

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: '222222',
                        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>

使用

结构

扫描二维码关注公众号，回复： 16759209 查看本文章

 <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。