Element-UI 实现树形选择器

女爷i 2022-05-09 01:28 497阅读 0赞

目前所能完善到这样子了，待遇到bug再来解决

感谢 蔚莱先森 提供的思路

## 组件调用 ##

<template>
      <el-form>
      	
        <el-form-item>
          <select-tree v-model="value1" :options="options" />
        </el-form-item>
      	
        <el-form-item>
          <select-tree lazy v-model="value2" url="api/tree" :props="defaultProps" />
        </el-form-item>
      </el-form>
    </template>
    
    <script> import SelectTree from '@/components/widget/SelectTree.vue'; export default { components: { SelectTree, }, data() { return { // 默认选中值 value1: 'A', value2: 'A', // 数据默认字段 defaultProps: { parent: 'parentId', // 父级唯一标识 value: 'id', // 唯一标识 label: 'label', // 标签显示 children: 'children', // 子级 }, // 数据列表 options: [ { parentId: '0', id: 'A', label: 'label-A', children: [ { parentId: 'A', id: 'A-1', label: 'label-A-1', }, ], }, { parentId: '0', value: 'B', label: 'label-B', }, ], }; }, }; </script>

## SelectTree.vue ##

<template>
      <el-select ref="select" popper-class="mod-select-tree" :value="labelModel" :filterable="filterable" :disabled="disabledSelected" :filter-method="filterMethod" :clearable="filterable || lazy" @clear="clearHandler" @visible-change="visibleChange">
        <el-option :value="valueModel" :label="labelModel">
          <el-tree ref="tree" empty-text="无数据" :expand-on-click-node="false" :accordion="accordion" :data="options" :props="propsMerge" :lazy="lazy" :load="onLoadNodes" :default-expand-all="!lazy" :node-key="propsMerge.value" :filter-node-method="filterNode" :renderContent="renderContent" @node-click="onNodeClick">
          </el-tree>
        </el-option>
      </el-select>
    </template>
    
    <script> import { analyzeResp } from '@/libs/util'; export default { name: 'SelectTree', // 设置绑定参数 model: { prop: 'value', event: 'selected', }, props: { // 接收绑定参数 value: [String, Number], // 是否可以清空选项 clearable: Boolean, // 根节点key值 rootKey: String, // 懒加载是否使用地址传参方式 joint: Boolean, // 禁用 disabled: Boolean, // 启用搜索功能 filterable: Boolean, // 树形控件 - 启用懒加载 lazy: Boolean, // 树形控件 - 懒加载接口地址 url: String, // 树形控件 - 是否每次只打开一个同级树节点展开 accordion: Boolean, // 树形控件 - 选项数据，懒加载时无需设置 options: { type: Array, default: () => ([]), }, // 树形控件 - 配置项 props: { type: Object, default: () => ({ }), }, // 查询参数 queryParams: { type: Object, default: () => ({ rows: 100000, page: 1, sort: 'orderNum-', }), }, }, data() { return { // eslint-disable-next-line labelModel: '', // 输入框显示值 valueModel: '', // 实际请求传值 once: false, }; }, computed: { disabledSelected() { if (this.disabled) return true; return this.$parent.form ? this.$parent.form.disabled : false; }, propsMerge() { const propsTemp = Object.assign({ parent: 'parentId', value: 'rowGuid', label: 'label', children: 'children', disabled: 'disabled', // 是否禁用 isLeaf: 'isLeaf', // 是否为叶子节点 }, this.props); return propsTemp; }, }, watch: { value: { handler(val) { this.valueModel = val; this.initHandler(); }, immediate: true, }, options: { handler(val) { if (!val || this.lazy) return; this.initHandler(); }, immediate: true, }, }, methods: { // 初始化值 initHandler() { if (!this.value) return; this.$nextTick(() => { const temp = this.$refs.tree.getNode(this.value); // 初始化显示 this.labelModel = temp ? temp.label : ''; // 设置默认选中 this.$refs.tree.setCurrentKey(this.value); }); }, // 切换选项 onNodeClick(data, node) { if (node.disabled) { this.$refs.tree.setCurrentKey(this.value || null); } else { this.labelModel = node.label; this.valueModel = node.key; this.$emit('selected', node.key); this.$emit('change', node.data, node); this.$refs.select.blur(); // 收起下拉框 this.$refs.select.focus(); // 获取焦点 // 修复懒加载下无法关闭选项问题 if (this.lazy) { this.$set(this.$refs.select, 'visible', false); } } }, // 下拉菜单显示回调 visibleChange(show) { if (!show) return; // 确保滚动条位置正确显示 if (show && !this.labelModel) { this.labelModel = ' '; this.$nextTick(() => { this.labelModel = ''; }); } if (this.lazy && this.once) { this.getNodeList(this.rootKey).then((data) => { this.$refs.tree.updateKeyChildren(this.rootKey, data); }); } else { this.$emit('refresh'); } this.initHandler(); this.once = true; }, // 选择器检索过滤方法 filterMethod(query) { // 调用树形控件的过滤 this.$refs.tree.filter(query); // 忽略选择器本身的过滤 return true; }, // 树节点过滤方法 filterNode(query, data) { if (!query) return true; return data[this.propsMerge.label].includes(query); }, // 清空已选 clearHandler() { this.valueModel = this.lazy ? this.rootKey : this.$enum.emptyRowGuid; this.labelModel = this.lazy ? '' : '所有'; this.$emit('selected', ''); this.$refs.tree.filter(); this.$refs.tree.setCurrentKey(null); }, // 加载子节点 onLoadNodes(node, resolve) { this.getNodeList(node.data[this.propsMerge.value]).then(data => resolve(data)); }, // 获取节点列表 getNodeList(id = this.rootKey) { const params = this.queryParams; const paramsUrl = this.joint ? `/${ id}` : ''; if (!this.joint) params.parentId = id; return new Promise((resolve) => { this.$http.get(`${ this.url}${ paramsUrl}`, { params }).then((response) => { resolve((response.data.data || response.data) || []); }, ({ response }) => { analyzeResp(response); }); }); }, // 节点渲染函数 renderContent(h, { node /* , store */ }) { return ( <span class={ `el-tree-node__label ${ node.disabled ? 'is-disabled' : ''}`}>{ node.label}</span> ); }, }, }; </script>

> 参考 [https://blog.csdn.net/Mr\_JavaScript/article/details/88604270][https_blog.csdn.net_Mr_JavaScript_article_details_88604270]

[https_blog.csdn.net_Mr_JavaScript_article_details_88604270]: https://blog.csdn.net/Mr_JavaScript/article/details/88604270