devbox
笔触狂放9
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

基于Element UI内置的Select下拉和Tree树形组件，组合封装的树状下拉选择器_element树形下拉框

作者：笔触狂放9 | 2024-08-22 06:30:22

赞

踩

element树形下拉框

目录

简述

效果

功能描述

代码实现

总结

简述

基于Element UI内置的Select下拉和Tree树形组件，组合封装的树状下拉选择器。

效果

先看效果：

下拉状态：

选择后状态：

选择的数据：

功能描述

1、加载树结构，实现树状下拉选择器； 

2、可通过关键词实现本地和远程过滤； 

3、高亮选择行； 

4、设置默认选择行； 

5、可直接应用在form表单；

代码实现

树状下拉组件代码：

  1. <!--
  2.  树状下拉选择框:
  3.  1、加载树结构，实现树状下拉选择组件；
  4.  2、可通过关键词实现本地和远程过滤；
  5.  3、高亮选择行；
  6.  4、设置默认选择行；
  7.  5、可直接应用在form表单；
  8. -->
  9. <template>
  10.   <el-select
  11.     ref="selectRef"
  12.     clearable
  13.     :filterable="filterableFor || remoteFor"
  14.     :remote="filterableFor || remoteFor"
  15.     :remote-method="selectRemoteMethod"
  16.     v-model="currentLabel"
  17.     @visible-change="handleVisibleChange"
  18.     @clear="handleClear"
  19.   >
  20.     <el-option
  21.       style="height: 100%; padding: 0"
  22.       value=""
  23.       v-loading="loading"
  24.       element-loading-text="加载中..."
  25.       element-loading-spinner="el-icon-loading"
  26.     >
  27.       <el-tree
  28.         ref="treeRef"
  29.         :data="dataOfTree"
  30.         :node-key="defaultProps.value"
  31.         :props="defaultProps"
  32.         highlight-current
  33.         default-expand-all
  34.         :current-node-key="selectedNode.value"
  35.         :expand-on-click-node="false"
  36.         @node-click="handleNodeClicked"
  37.         :filter-node-method="filterNode"
  38.       >
  39.       </el-tree>
  40.     </el-option>
  41.  
  42.   </el-select>
  43. </template>
  44. <script>
  45.  
  46. export default {
  47.   name: 'SelectTree',
  48.   components: {},
  49.   model: {
  50.     prop: 'inputValue',
  51.     event: 'myInputEvent'
  52.   },
  53.   props: {
  54.     // 默认选中值
  55.     defaultValue: {
  56.       type: Number
  57.     },
  58.     // 是否支持搜索，本地搜索，与远程搜索配置互斥。
  59.     filterable: {
  60.       type: Boolean,
  61.       default: false
  62.     },
  63.     // 是否远程搜索，要设置远程搜索方法
  64.     remote: {
  65.       type: Boolean,
  66.       default: false
  67.     },
  68.     // 远程方法
  69.     remoteMethod: {
  70.       type: Function
  71.     },
  72.     treeOptions: {
  73.       type: Array,
  74.       default: () => {
  75.         return []
  76.       }
  77.     },
  78.     defaultProps: {
  79.       type: Object,
  80.       default: () => {
  81.         return {
  82.           children: 'children',
  83.           label: 'label',
  84.           value: 'value'
  85.         }
  86.       }
  87.     }
  88.   },
  89.   watch: {
  90.     treeOptions: {
  91.       handler(newValue) {
  92.         this.loading = false
  93.         this.dataOfTree = JSON.parse(JSON.stringify(newValue))
  94.         // 保留源数据；
  95.         this.dataSource = JSON.parse(JSON.stringify(newValue))
  96.       },
  97.       deep: true,
  98.       immediate: false
  99.     },
  100.     defaultValue: {
  101.       handler(newValue) {
  102.         this.selectedNode = {}
  103.         this.currentLabel = undefined
  104.         this.currentValue = newValue
  105.         this.$nextTick(() => {
  106.           // 过滤方式是通过value还是label;
  107.           this.isFilterWithValue = true
  108.           if (this.dataOfTree) {
  109.             this.$refs.treeRef.filter(newValue)
  110.           }
  111.         })
  112.       },
  113.       deep: true,
  114.       immediate: true
  115.     }
  116.   },
  117.   computed: {
  118.     // 是否支持搜索，本地搜索，与远程搜索配置互斥。
  119.     filterableFor() {
  120.       return this.remote ? false : this.filterable
  121.     },
  122.     remoteFor() {
  123.       return this.filterable ? false : this.remote
  124.     }
  125.   },
  126.   data() {
  127.     return {
  128.       selectedNode: {},
  129.       loading: false,
  130.       currentValue: undefined,
  131.       currentLabel: undefined,
  132.       dataOfTree: []
  133.     }
  134.   },
  135.   created() {
  136.     this.dataOfTree = JSON.parse(JSON.stringify(this.treeOptions))
  137.     // 保留源数据；
  138.     this.dataSource = JSON.parse(JSON.stringify(this.treeOptions))
  139.   },
  140.   mounted() {
  141.   },
  142.   methods: {
  143.     selectRemoteMethod(val) {
  144.       this.isFilterWithValue = false
  145.       if (this.filterableFor) {
  146.         // 本地过滤
  147.         this.$refs.treeRef.filter(val)
  148.       } else if (this.remoteFor) {
  149.         // 远程搜索
  150.         this.loading = true
  151.         this.remoteMethod(val)
  152.       }
  153.     },
  154.     handleClear() {
  155.       // 如果内容被清空
  156.       this.selectedNode = {}
  157.       this.currentLabel = undefined
  158.       this.currentValue = undefined
  159.       const result = this.buildEmptyResult()
  160.       this.$emit('myInputEvent', result)
  161.       this.$emit('onNodeSelectEvent', result)
  162.     },
  163.     handleVisibleChange(visible) {
  164.       if (!visible) {
  165.         // 先移除所有数据；
  166.         this.dataOfTree.splice(0)
  167.         // 恢复原来的所有数据；
  168.         this.dataOfTree.splice(0, 0, ...this.dataSource)
  169.         // 本地过滤
  170.         this.$refs.treeRef.filter('')
  171.       }
  172.     },
  173.     filterNode(value, data) {
  174.       if (!value) {
  175.         return data
  176.       }
  177.       if (this.isFilterWithValue) {
  178.         if (data[this.defaultProps.value] === value) {
  179.           this.selectedNode = data
  180.           this.currentLabel = data[this.defaultProps.label]
  181.           this.$refs.treeRef.setCurrentKey(this.selectedNode[this.defaultProps.value])
  182.           const result = this.buildResultByNodeData(data)
  183.           this.$emit('myInputEvent', result)
  184.         }
  185.       } else {
  186.         return data[this.defaultProps.label].indexOf(value) !== -1
  187.       }
  188.       return data
  189.     },
  190.     closeSelect() {
  191.       this.$refs.selectRef.blur()
  192.     },
  193.     /**
  194.      * @param data
  195.      * @param node
  196.      * @param comp
  197.      */
  198.     handleNodeClicked(data, node, comp) {
  199.       this.selectedNode = data
  200.       this.currentLabel = data[this.defaultProps.label]
  201.       this.currentValue = data[this.defaultProps.value]
  202.       const result = this.buildResultByNodeData(data)
  203.       this.$emit('myInputEvent', result)
  204.       this.$emit('onNodeSelectEvent', result)
  205.       this.closeSelect()
  206.     },
  207.     buildResultByNodeData(data) {
  208.       return {
  209.         node: data[this.defaultProps.value],
  210.         data: {
  211.           label: data[this.defaultProps.label],
  212.           value: data[this.defaultProps.value]
  213.         },
  214.         meta: data
  215.       }
  216.     },
  217.     buildEmptyResult() {
  218.       return {
  219.         node: undefined,
  220.         data: {
  221.           label: undefined,
  222.           value: undefined
  223.         },
  224.         meta: undefined
  225.       }
  226.     }
  227.   }
  228. }
  229. </script>
  230.  
  231. <style lang='scss' scoped>
  232. </style>

应用示例1：

  1. <template>
  2.   <div>
  3.     <div>测试表单</div>
  4.     <el-form
  5.       ref="demandFormRef"
  6.       :model="form"
  7.       label-suffix="："
  8.       status-icon
  9.       label-position="left"
  10.     >
  11.       <el-form-item label="树" label-width="85px" prop="tree">
  12.         <select-tree
  13.           v-model="form.tree"
  14.           filterable
  15.           :tree-options="treeOptions"
  16.           :default-value="form.tree.node"
  17.           @onNodeSelectEvent="handleNodeSelectEvent($event)"
  18.         />
  19.       </el-form-item>
  20.     </el-form>
  21.     <div>
  22.       <el-button @click="reset">重置</el-button>
  23.       <el-button @click="submit">提交</el-button>
  24.     </div>
  25.   </div>
  26. </template>
  27. <script>
  28. import {Message} from 'element-ui'
  29. import SelectTree from '@/views/select-tree/SelectTree.vue'
  30.  
  31. export default {
  32.   name: 'SelectTreeExample',
  33.   components: {
  34.     SelectTree
  35.   },
  36.   props: {},
  37.   data() {
  38.     return {
  39.       form: {
  40.         tree: {node: undefined, data: {}}
  41.       },
  42.       treeOptions: [{
  43.         value: 1,
  44.         label: '一级 1',
  45.         children: [{
  46.           value: 11,
  47.           label: '二级 1-1',
  48.           children: [{
  49.             value: 111,
  50.             label: '三级 1-1-1'
  51.           }]
  52.         }]
  53.       }, {
  54.         value: 2,
  55.         label: '一级 2',
  56.         children: [{
  57.           value: 21,
  58.           label: '二级 2-1'
  59.         }]
  60.       }, {
  61.         value: 3,
  62.         label: '一级 3',
  63.         children: [{
  64.           value: 31,
  65.           label: '二级 3-1',
  66.           children: [{
  67.             value: 311,
  68.             label: '三级 3-1-1'
  69.           }]
  70.         }, {
  71.           value: 32,
  72.           label: '二级 3-2',
  73.           children: [{
  74.             value: 321,
  75.             label: '三级 3-2-1'
  76.           }]
  77.         }]
  78.       }]
  79.     }
  80.   },
  81.   mounted() {
  82.     // 模拟接口请求，反显选择数据
  83.     setTimeout(() => {
  84.       this.form.tree.node = 2
  85.     }, 1000)
  86.   },
  87.   methods: {
  88.     reset() {
  89.       this.form.tree = {node: undefined, data: {}}
  90.     },
  91.     submit() {
  92.       const data = this.form.tree.data
  93.       Message.info(`选中节点名称是${data.label}，值是${data.value}`)
  94.     },
  95.     handleNodeSelectEvent(dataSelected) {
  96.     }
  97.   }
  98. }
  99. </script>
  100.  
  101. <style lang='scss' scoped>
  102. </style>

 应用示例2：

  1. <template>
  2.   <div>
  3.     <div>测试表单</div>
  4.     <el-form
  5.       ref="demandFormRef"
  6.       :model="form"
  7.       label-suffix="："
  8.       status-icon
  9.       label-position="left"
  10.     >
  11.       <el-form-item label="树" label-width="85px" prop="tree">
  12.         <select-tree
  13.           v-model="form.tree"
  14.           remote
  15.           :remote-method="handleRemote"
  16.           :tree-options="treeOptions"
  17.           :default-value="form.tree.node"
  18.           @onNodeSelectEvent="handleNodeSelectEvent($event)"
  19.         />
  20.       </el-form-item>
  21.     </el-form>
  22.     <div>
  23.       <el-button @click="reset">重置</el-button>
  24.       <el-button @click="submit">提交</el-button>
  25.     </div>
  26.   </div>
  27. </template>
  28. <script>
  29. import {Message} from 'element-ui'
  30. import SelectTree from '@/views/components/SelectTree.vue'
  31.  
  32. export default {
  33.   name: 'SelectTreeExample',
  34.   components: {
  35.     SelectTree
  36.   },
  37.   props: {},
  38.   data() {
  39.     return {
  40.       form: {
  41.         tree: {node: undefined, data: {}}
  42.       },
  43.       treeOptions: [{
  44.         value: 1,
  45.         label: '一级 1',
  46.         children: [{
  47.           value: 11,
  48.           label: '二级 1-1',
  49.           children: [{
  50.             value: 111,
  51.             label: '三级 1-1-1'
  52.           }]
  53.         }]
  54.       }, {
  55.         value: 2,
  56.         label: '一级 2',
  57.         children: [{
  58.           value: 21,
  59.           label: '二级 2-1'
  60.         }]
  61.       }, {
  62.         value: 3,
  63.         label: '一级 3',
  64.         children: [{
  65.           value: 31,
  66.           label: '二级 3-1',
  67.           children: [{
  68.             value: 311,
  69.             label: '三级 3-1-1'
  70.           }]
  71.         }, {
  72.           value: 32,
  73.           label: '二级 3-2',
  74.           children: [{
  75.             value: 321,
  76.             label: '三级 3-2-1'
  77.           }]
  78.         }]
  79.       }]
  80.     }
  81.   },
  82.   mounted() {
  83.     // 模拟接口请求，反显选择数据
  84.     setTimeout(() => {
  85.       this.form.tree.node = 2
  86.     }, 1000)
  87.   },
  88.   methods: {
  89.     reset() {
  90.       this.form.tree = {node: undefined, data: {}}
  91.     },
  92.     submit() {
  93.       const data = this.form.tree.data
  94.       Message.info(`选中节点名称是${data.label}，值是${data.value}`)
  95.     },
  96.     handleRemote() {
  97.       setTimeout(() => {
  98.         this.treeOptions = [{
  99.           value: 1,
  100.           label: '一级 1',
  101.           children: [{
  102.             value: 11,
  103.             label: '二级 1-1',
  104.             children: [{
  105.               value: 111,
  106.               label: '三级 1-1-1'
  107.             }]
  108.           }]
  109.         }]
  110.       }, 3000)
  111.     },
  112.     handleNodeSelectEvent(dataSelected) {
  113.     }
  114.   }
  115. }
  116. </script>
  117.  
  118. <style lang='scss' scoped>
  119. </style>

总结

本示例中，部分实现细节或者写法，可根据实际需要调整，树状下拉的实现方式有多种，这只是其中一种，只要符合实际需求就可以。

如果发现问题，欢迎随时提出，共同改进。

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/笔触狂放9/article/detail/1015143
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号