Vue实现树形下拉框

Vue自身并没有实现树形下拉框的组件,找了很多资料,最后在Github上找了个插件vue-treeselect,功能还是比较全的,模糊搜索、多选、延迟加载、异步搜索、排序,自定义、Vuex支持等等。这些功能在官网上都有详细的介绍:

vue-treeselect官网: vue-treeselect

vue-treeselect github地址: vue-treeselect

下面只做个简单的功能介绍,模糊搜索与树形结构展示:

当然,首先是下载安装插件:

npm install --save @riophae/vue-treeselect

安装成功之后,就可以进行测试了,下面是我的测试vue:

<template>
  <div>
    <Card>
      <tree-select
        :options="options"
        placeholder="请选择分类..."
        v-model="value"
      />
    </Card>
    <Card>
      {{ value }}
    </Card>
  </div>
</template>

<script>
  import { mapActions } from ‘vuex‘
  import TreeSelect from ‘@riophae/vue-treeselect‘
  import ‘@riophae/vue-treeselect/dist/vue-treeselect.css‘

  export default {
    name: ‘CustomTreeSelect‘,
    components: { TreeSelect },
    data() {
      return {
        value: 0,
        options: [],
      }
    },
    methods: {
      ...mapActions([
        ‘albumCategoryList‘
      ]),

      queryCategoryList () {
        this.albumCategoryList({
          parentId: 0,
          all: 1
        }).then((res) => {
          console.log(res.fields)
          if (res.status === 1) {
            let result = []
            const children = this.getTree(res.fields)
            let obj = {}
            obj.label = ‘顶级分类‘
            obj.id = 0
            obj.children = children
            result.push(obj)
            this.options = result
          } else {
            this.$Notice.error({
              title: ‘错误‘,
              desc: res.msg
            })
          }
        }).catch(error => {
          this.$Notice.error({
            title: ‘错误‘,
            desc: ‘网络连接错误‘
          })
          console.log(error)
        })
      },

      getTree (tree = []) {
        let arr = [];
        if (tree.length !== 0) {
          tree.forEach(item => {
            let obj = {};
            obj.label = item.categoryName;
            obj.id = item.id;
            if(item.child === 1) {
              obj.children = this.getTree(item.children);
            }
            arr.push(obj);
          });
        }
        return arr
      },
    },
    mounted () {
      this.queryCategoryList()
    }
  }
</script>

<style scoped>

</style>

这个插件默认的数据结构为:

{
    "id" : "",
    "label" : "",
    "children" : []
}

我们从数据库查出来的数据肯定不是这个样子的啦,所以需要在页面中转换一下数据结构,这个逻辑看一下代码中的函数 getTree()。在提醒一下,如果当前分类下面没有子分类的话,就不需要children这个属性了。

上述运行成功之后,在界面上就可以看到具体的结构了:

默认情况是这样的:

展开之后是这样的:

模糊搜索之后是这样的:

选中某个分类之后,与之绑定的data属性就会得到分类的id值:

这样一个简单的下拉树结构就出来了,更复杂的功能可以参考官网来写,其中例子都很全面

原文地址:https://www.cnblogs.com/mica/p/10774800.html

时间: 2024-10-09 16:36:12

Vue实现树形下拉框的相关文章

雷林鹏分享:jQuery EasyUI 表单 - 创建树形下拉框

jQuery EasyUI 表单 - 创建树形下拉框 树形下拉框(ComboTree)是一个带有下列树形结构(Tree)的下拉框(ComboBox).它可以作为一个表单字段进行使用,可以提交给远程服务器. 在本教程中,我们将要创建一个注册表单,带有 name.address.city 字段.city 字段是一个树形下拉框(ComboTree)字段,在里面用户可以下拉树面板(tree panel),并选择一个特定的城市. 创建表单(Form) title="Register" butto

vue的select 下拉框某一项设置为不可选

select下拉框中某一项不可选置灰 一, html <div class="sale"> <select @change="GetCountyData()"> <option>请选择</option> <option v-for="(item,index) in data" :disabled="item.is_true==1?true:false" :class=&qu

easyui-conbotree树形下拉框。。。转

最近一直在研究这个树形的下拉选择框,感觉非常的有用,现在整理下来供大家使用: 首先数据库的表架构设计和三级菜单联动的表结构是一样,(父子关系) 1.下面我们用hibernate建一下对应的额实体类: package com.hanqi.entity; //地区 实体类 public class Region { //地区id private String regionID; //地区名称 private String regionName; //上级id private String paren

vue 点击下拉框

data: { hide:false, zhi:"全部" }, <div class="item"> <div class="c2c-all" @click="hide ? hide=false : hide=true"> <span class="c2c-alla" style="position: relative">{{zhi}}</spa

EasyUI ComboTree(树形下拉框) 简单实例

前台: <input id="cc">   <script type="text/javascript"> $('#cc').combotree({ required: true }).combotree("tree").tree({ url: 'tree.ashx?id=0&state=closed', checkbox: false, onBeforeExpand: function (node, param)

EasyUI 37-ComboTree(树形下拉框)组件

树形下拉框实现 mini-treeselect

追求效率,直接进入主题吧-.. 效果: 前台代码 <linkhref="../../_frontend/3rd/miniui/miniui.css"rel="stylesheet" /> <scriptsrc="../../_frontend/3rd/miniui/miniui.js"></script> <input class="mini-treeselect" id="

ComboTree( 树型下拉框) 组件

本节课重点了解EasyUI中Tree(树)组件的使用方法, 这个组件依赖于Combo(下拉框)和 Tree(树)组件.一. 加载方式//class 加载方式<select id="cc" class="easyui-combotree" style="width:200px;"data-options="url:'tree.json',required:true"></select>//JS 加载方式&

ligerui多选动态下拉框

今天下午要求做一个支持多选的,并且插件用ligerui的,当时有点小懵了,因为没用过ligerui啊!而且按照API的介绍,我做得也很好啊,可是为什么就是显示不出来?据说有位小神比较厉害,请教来之,两个点过去了,依然无果................... 好吧,切入正题,首先要做一个ligerui的下拉框,必须在页面加载的时候就初始化一个下拉框来,要不你叫你妈来都不好使!(好吧,是我不会看API!) 先说说我现在的需求,我需要做一个类似于二级联动,有两个下拉框,一个是房屋类型,一个是房屋格局