EleFormTreeSelect 树形选择组件

组件介绍

EleFormTreeSelect 是一个基于 Element UI 封装的树形选择组件，用于在表单中快速实现树形结构数据的选择功能。它支持单选、多选、搜索等功能，适用于分类选择、权限选择等场景。

安装与引入

安装依赖

npm install diandi-ele-form-tree-select

全局引入

在 src/projects/scrm/utils/el-form.js 中全局引入和配置：

import Vue from 'vue'
import EleFormTreeSelect from 'diandi-ele-form-tree-select'

// 注册 tree-select 组件
Vue.component('tree-select', EleFormTreeSelect)

// 全局配置
Vue.use(EleForm, {
  // 属性参考: https://vue-treeselect.js.org/ https://vue-treeselect.cn/
  'tree-select': {
    clearable: true // 所有的 tree-select 都会有 clearable = true的属性值
  }
})

全局配置

// 全局 tree-select 配置
'tree-select': {
  clearable: Boolean // 是否可清空
}

基本使用

单选模式

<template>
  <ele-form
    :form-data="formData"
    :form-config="formConfig"
    @submit="handleSubmit"
  />
</template>

<script>
export default {
  data() {
    return {
      formData: {
        category: ''
      },
      formConfig: [
        {
          label: '分类',
          prop: 'category',
          type: 'tree-select',
          props: {
            data: [
              {
                label: '分类1',
                value: '1',
                children: [
                  {
                    label: '子分类1-1',
                    value: '1-1'
                  }
                ]
              },
              {
                label: '分类2',
                value: '2'
              }
            ]
          }
        }
      ]
    }
  },
  methods: {
    handleSubmit(data) {
      console.log('表单数据:', data)
    }
  }
}
</script>

多选模式

<template>
  <ele-form
    :form-data="formData"
    :form-config="formConfig"
    @submit="handleSubmit"
  />
</template>

<script>
export default {
  data() {
    return {
      formData: {
        roles: []
      },
      formConfig: [
        {
          label: '角色',
          prop: 'roles',
          type: 'tree-select',
          props: {
            multiple: true,
            data: [
              {
                label: '管理员',
                value: 'admin',
                children: [
                  {
                    label: '系统管理员',
                    value: 'system'
                  },
                  {
                    label: '用户管理员',
                    value: 'user'
                  }
                ]
              },
              {
                label: '普通用户',
                value: 'user'
              }
            ]
          }
        }
      ]
    }
  },
  methods: {
    handleSubmit(data) {
      console.log('表单数据:', data)
    }
  }
}
</script>

属性配置

基础属性

属性	类型	描述	默认值
data	Array	树形数据	[]
multiple	Boolean	是否多选	false
placeholder	String	占位符	'请选择'
disabled	Boolean	是否禁用	false
clearable	Boolean	是否可清空	true
filterable	Boolean	是否可搜索	false
searchable	Boolean	是否可搜索	false
collapseTags	Boolean	是否折叠标签	false
nodeKey	String	节点键名	'value'
props	Object	树形配置	{}
checkStrictly	Boolean	是否严格勾选	false
defaultExpandAll	Boolean	是否默认展开所有	false
expandOnClickNode	Boolean	是否点击节点展开	true
checkOnClickNode	Boolean	是否点击节点勾选	false
renderContent	Function	自定义节点渲染	-
renderAfterExpand	Boolean	是否在展开后渲染子节点	true
highlightCurrent	Boolean	是否高亮当前选中节点	false
currentNodeKey	[String, Number]	当前选中节点的key	-
defaultExpandedKeys	Array	默认展开的节点key数组	[]
defaultCheckedKeys	Array	默认勾选的节点key数组	[]
defaultSelectedKeys	Array	默认选中的节点key数组	[]
indent	Number	相邻级节点间的水平缩进，单位为像素	16
iconClass	String	自定义展开/折叠图标类名	-
renderIcon	Function	自定义节点图标	-
renderLabel	Function	自定义节点标签	-
allowChildren	Function	决定节点是否可拥有子节点	-
filterNodeMethod	Function	节点过滤方法	-
autoExpandParent	Boolean	是否在选中节点后自动展开其父节点	true
accordion	Boolean	是否开启手风琴模式	false
lazy	Boolean	是否懒加载	false
load	Function	加载子节点的方法，仅当 lazy 属性为true时有效	-
showCheckbox	Boolean	是否显示复选框	false
checkStrictly	Boolean	是否严格勾选	false
defaultExpandAll	Boolean	是否默认展开所有节点	false
expandOnClickNode	Boolean	是否在点击节点时展开或折叠节点	true
checkOnClickNode	Boolean	是否在点击节点时选中节点	false
currentNodeKey	[String, Number]	当前选中节点的key	-
nodeKey	String	每个树节点用来作为唯一标识的属性，整棵树应该是唯一的	-
draggable	Boolean	是否可拖拽	false
allowDrag	Function	决定节点是否可拖拽	-
allowDrop	Function	决定节点是否可放置	-
sortable	Boolean	是否可排序	false
filterable	Boolean	是否可搜索	false
remote	Boolean	是否远程搜索	false
remoteMethod	Function	远程搜索方法	-
loading	Boolean	是否加载中	false
loadingText	String	加载中提示文本	'加载中...'
noMatchText	String	无匹配结果提示文本	'无匹配数据'
noDataText	String	无数据提示文本	'无数据'
popperClass	String	下拉框类名	-
popperAppendToBody	Boolean	是否将下拉框附加到body上	true
appendToBody	Boolean	是否将下拉菜单附加到body上	false
value	[String, Number, Array]	绑定值	-
size	String	组件大小	'medium'
name	String	原生name属性	-
label	String	标签文本	-
required	Boolean	是否必填	false
rules	Array	验证规则	[]
error	String	错误信息	-
validateEvent	Boolean	是否在输入时触发表单验证	true

树形配置

props: {
  label: String, // 节点标签字段名
  value: String, // 节点值字段名
  children: String, // 子节点字段名
  disabled: String, // 禁用字段名
  isLeaf: String // 是否为叶子节点字段名
}

事件

事件名称	回调参数	描述
change	value	值变化时触发
node-click	node, event	节点点击时触发
check-change	node, checked, indeterminate	节点勾选状态变化时触发
current-change	currentNode, oldCurrentNode	当前选中节点变化时触发
node-expand	node, expandedNodes	节点展开时触发
node-collapse	node	节点折叠时触发
node-drag-start	node, event	节点开始拖拽时触发
node-drag-enter	node, event, targetNode	节点拖拽进入目标节点时触发
node-drag-leave	node, event, targetNode	节点拖拽离开目标节点时触发
node-drag-over	node, event, targetNode	节点拖拽经过目标节点时触发
node-drag-end	node, event, targetNode, droppedPosition	节点拖拽结束时触发
node-drop	node, event, targetNode, droppedPosition	节点被放置时触发
visible-change	visible	下拉框显示/隐藏时触发
remove-tag	value	移除标签时触发
clear	-	清空时触发
blur	event	失焦时触发
focus	event	聚焦时触发

常见问题

1. 数据不显示

原因：树形数据格式错误或属性配置不当

解决方案：

检查 data 格式是否正确，确保包含 label 和 value 字段
确认 props 配置是否与数据格式匹配
对于懒加载，检查 load 方法是否正确实现

2. 多选功能不生效

原因：multiple 配置错误或 showCheckbox 配置不当

解决方案：

检查 multiple 属性是否设置为 true
对于需要显示复选框的场景，设置 showCheckbox: true
对于严格勾选模式，设置 checkStrictly: true

3. 搜索功能不生效

原因：filterable 或 searchable 配置错误

解决方案：

检查 filterable 或 searchable 属性是否设置为 true
对于远程搜索，设置 remote: true 并实现 remoteMethod 方法
对于本地搜索，确保 data 数据已正确加载

示例代码

完整示例

<template>
  <ele-form
    :form-data="formData"
    :form-config="formConfig"
    :label-width="'120px'"
    @submit="handleSubmit"
  />
</template>

<script>
export default {
  data() {
    return {
      formData: {
        category: '',
        roles: []
      },
      formConfig: [
        {
          label: '分类',
          prop: 'category',
          type: 'tree-select',
          required: true,
          props: {
            data: [
              {
                label: '电子产品',
                value: 'electronics',
                children: [
                  {
                    label: '手机',
                    value: 'phone',
                    children: [
                      {
                        label: '苹果',
                        value: 'iphone'
                      },
                      {
                        label: '华为',
                        value: 'huawei'
                      }
                    ]
                  },
                  {
                    label: '电脑',
                    value: 'computer'
                  }
                ]
              },
              {
                label: '服装',
                value: 'clothing'
              }
            ],
            placeholder: '请选择分类',
            filterable: true
          }
        },
        {
          label: '角色',
          prop: 'roles',
          type: 'tree-select',
          props: {
            multiple: true,
            showCheckbox: true,
            data: [
              {
                label: '管理员',
                value: 'admin',
                children: [
                  {
                    label: '系统管理员',
                    value: 'system'
                  },
                  {
                    label: '用户管理员',
                    value: 'user'
                  },
                  {
                    label: '内容管理员',
                    value: 'content'
                  }
                ]
              },
              {
                label: '普通用户',
                value: 'user'
              },
              {
                label: '访客',
                value: 'guest'
              }
            ],
            placeholder: '请选择角色',
            collapseTags: true
          }
        }
      ]
    }
  },
  methods: {
    handleSubmit(data) {
      console.log('表单数据:', data)
      // 这里可以进行API调用等操作
      this.$message.success('提交成功')
    }
  }
}
</script>

<style scoped>
/* 自定义样式 */
</style>

远程搜索示例

<template>
  <ele-form
    :form-data="formData"
    :form-config="formConfig"
    @submit="handleSubmit"
  />
</template>

<script>
export default {
  data() {
    return {
      formData: {
        category: ''
      },
      formConfig: [
        {
          label: '分类',
          prop: 'category',
          type: 'tree-select',
          props: {
            data: [],
            placeholder: '请输入分类名称搜索',
            filterable: true,
            remote: true,
            loading: false,
            remoteMethod: this.remoteMethod
          }
        }
      ]
    }
  },
  methods: {
    handleSubmit(data) {
      console.log('表单数据:', data)
    },
    remoteMethod(query) {
      if (query) {
        this.formConfig[0].props.loading = true
        // 模拟远程搜索
        setTimeout(() => {
          this.formConfig[0].props.loading = false
          this.formConfig[0].props.data = [
            {
              label: `搜索结果: ${query}`,
              value: query,
              children: [
                {
                  label: `子结果1: ${query}`,
                  value: `${query}-1`
                },
                {
                  label: `子结果2: ${query}`,
                  value: `${query}-2`
                }
              ]
            }
          ]
        }, 1000)
      } else {
        this.formConfig[0].props.data = []
      }
    }
  }
}
</script>

总结

EleFormTreeSelect 是一个功能强大的树形选择组件，通过简单的配置即可快速实现在表单中的树形结构数据选择功能。它支持多种配置选项，可以满足不同场景下的树形选择需求。

通过全局配置和组件级配置的结合，可以灵活应对各种树形选择场景，大大提高了开发效率。

版本信息

最后更新时间: 2025-03-08
维护者: Wang chunsheng 2192138785@qq.com