关于下拉类型多选组件Vue-Treeselect(键名转换)

2024-10-01 04:38:38

下拉类型多选组件Vue-Treeselect(键名转换)

支持的功能项

1.支持嵌套选项的单选和多选

2.模糊匹配

3.异步搜索

4.延迟加载（仅在需要时加载深度选项的数据）

5.键盘支持（使用Arrow Up & Arrow Down键导航，使用键选择选项Enter等）

6.丰富的选项和高度可定制的

7.支持多种浏览器

它支持在vue项目中通过npm安装vue-treeselect：

npm install --save @riophae/vue-treeselect

在一般项目中也可以使用

前提是保证在vue作为依赖项

<html>
  <head>
    <!-- include Vue 2.x -->
    <script src="https://cdn.jsdelivr.net/npm/vue@^2"></script>
    <!-- include vue-treeselect & its styles. you can change the version tag to better suit your needs. -->
    <script src="https://cdn.jsdelivr.net/npm/@riophae/vue-treeselect@^0.4.0/dist/vue-treeselect.umd.min.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@riophae/vue-treeselect@^0.4.0/dist/vue-treeselect.min.css" rel="external nofollow" >
  </head>
  <body>
    <div id="app">
      <treeselect v-model="value" :multiple="true" :options="options" />
    </div>
  </body>
  <script>
    // register the component
    Vue.component('treeselect', VueTreeselect.Treeselect)
    new Vue({
      el: '#app',
      data: {
        // define the default value
        value: null,
        // define options
        options: [ {
          id: 'a',
          label: 'a',
          children: [ {
            id: 'aa',
            label: 'aa',
          }, {
            id: 'ab',
            label: 'ab',
          } ],
        }, {
          id: 'b',
          label: 'b',
        }, {
          id: 'c',
          label: 'c',
        } ],
      },
    })
  </script>
</html>

（上述代码段来自原开发文档）

页面截图：

这里主要记录一下它的自定义键名，

<treeselect
  :options="options"
  :value="value"
  :normalizer="normalizer" /*改变这个参数的对应简明即可*/
  />

export default {
  data: () => ({
    value: null,
    options: [ {
      key: 'a',
      name: 'a',
      subOptions: [ {
        key: 'aa',
        name: 'aa',
      } ],
    } ],
    normalizer(node) { //方法
      return {
        id: node.key, // 键名转换，方法默认是label和children进行树状渲染
        label: node.name,
        children: node.subOptions,
      }
    },
  }),
}
自定义选项标签

其他需要可以仔细阅读开发文档，快速进入

vue-treeselect下拉树

最近遇到下拉树的需求，what？下拉框和树的结合？赶紧element-UI找一波，然而并没有找到这种组件，于是问了下度娘，发现好多人都是自己封装的下拉树组件，五花八门的功能，但是都不完善，还是决定用靠谱点的库，于是用了vue-treeselect这个库，也是vue系列，这个库就是专门弄下拉树组件；但有个不好是这个库是全英文的，没有中文版本，要看懂的话只有慢慢翻译和尝试。

链接：Vue-Treeselect

同理，下拉树的数据也有同步数据和异步加载两种，同步数据较简单，这儿只说懒加载(延迟加载)。

稍微注意点

1.延迟加载，它提供规范函数用于转化树节点字段label/children，特别关键，不转化时只认label/children(children属性决定了节点是否有子节点即是否叶子节点)，转化之后只认转化后的字段，比如将将name转化为label，那么只会认name，即使数据中有label但没有name，则子选项不会显示，因为规范函数只会去找转化后的字段。

2.另外，看文档时一定要细心，正因为是英文文档则更要谨慎，特别是案例demo最好copy下来试试每个属性/方法/事件的效果，不然会踩跟多坑。

3.组件规定：下拉树单选时，绑定值初始值必须是null，不然会出现unknown，多选时，初始值必须是**[ ]，不然会报错。

4.下拉树默认绑定选中节点的value值，可以使用valueFormat属性指定下拉树绑定值为所选中节点对象。**

5.库里提供了很多属性及方法，基本可以满足下拉树的所有需求，比如节点关联选择，禁用，全选，单选等，需要时自行查看api。

下载：

npm install --save @riophae/vue-treeselect

引入及注册：

// 引入下拉树组件
import Treeselect from '@riophae/vue-treeselect'
import { LOAD_CHILDREN_OPTIONS } from '@riophae/vue-treeselect'
import { LOAD_ROOT_OPTIONS } from '@riophae/vue-treeselect'
// 引入下拉树样式
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
const simulateAsyncOperation = fn => {
  setTimeout(fn, 500)
}
export default {
    name: 'PathTrafficConfig',
    components: { Treeselect },
     data(){
        return {}
          }

使用：

<el-form-item label="派单大小类:" label-width="87px" prop="typeIds">
    <treeselect
         :multiple="true"
         :options="typeIdsOptions"
         value-consists-of="ALL_WITH_INDETERMINATE"
         :load-options="loadTypeIdsOptions"
         :normalizer="typeIdsNormalizer"                               
         placeholder="请选择"
         v-model="outerQueryCondition.typeIds"
     />
 </el-form-item>

// 派单大小类树--初始默认数组
 typeIdsOptions: [
      {
          id: 0,
          name: '派单大小类树',
          children: null,
          telType: 0
      }
  ],

// 获取派单大小类树
loadTypeIdsOptions({ action, parentNode, callback }) {
    let self = this;
    // 临时数组
    let typeIdsOptions= [];
    let formData = {
        id: parentNode.id
    };
    // 根据父id请求子选项
    fetchThreeOrderTree( formData )
    .then( response => {
        if(response.data.code == 200){
            typeIdsOptions = response.data.data.list;
            typeIdsOptions.forEach( item => {
                // 判断是否是叶子节点，不是叶子节点就添加children属性
                if( item.expand == true ){
                    self.$set( item,'children',null)                            
                }                        
            });
            console.log('派单大小类列表',typeIdsOptions);
        }else{
            self.$message({
                message: response.data.msg,
                type: 'danger'
            });
        }
    })
    .catch(err => {
    });
    // 将子选项放入对应的父节点下
    if (action === LOAD_CHILDREN_OPTIONS) {
        // 模拟加载中loading
        simulateAsyncOperation(() => {
            parentNode.children = typeIdsOptions;
            callback()
        })
    }  
},

const simulateAsyncOperation = fn => {
  setTimeout(fn, 500)
}
export default {
    name: 'PathTrafficConfig',
    components: { Treeselect },
     data(){
        return {
            typeIdsNormalizer(node) {     // 自定义派单大小类树键名
                return {
                    id: node.id,
                    label: node.name,
                }
            }, 
            ClassNormalizer(node) {     // 自定义话务分类下拉树键名
                return {
                    id: node.id,
                    label: node.name,
                }
            },

总之，Vue-Treeselect库还是挺好用的。

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

在vue中使用vant TreeSelect分类选择组件操作

中文文档:TreeSelect 分类选择效果展示: //先在你需要的页面中引入,第一个是弹出层,第二个是选择的 import { Popup } from "vant"; import { TreeSelect } from "vant"; 代码部分: <van-popup v-model="policeShow" position="top" :overlay="true"> <van
vue Treeselect下拉树只能选择第N级元素实现代码

今天在项目中遇到一个需求,就是vue下拉树只能选择第三级选项,为了解决这个问题,查阅了官方文档 https://vue-treeselect.js.org/#disable-item-selection 然后看到isDisabled属性可以禁止选择,具体实现代码如下: <treeselect :disable-branch-nodes="true" :normalizer="normalizer" v-model="formData.goodsTyp
Vue下拉选择框Select组件使用详解(一)

本文实例为大家分享了Vue下拉选择框Select组件的使用方法,供大家参考,具体内容如下效果图如下: 展开图如下: ①创建组件Select.vue:预设两种主题色,亦可视情况进行自定义修改样式: <template> <div class="m-select-wrap"> <input :class="['u-select-input f16', color === 'blue' ? '' : 'white-color'
vue实现下拉菜单树

本文实例为大家分享了vue实现下拉菜单树的具体代码,供大家参考,具体内容如下效果:使用 Vue-Treeselect 实现建议通过npm安装vue-treeselect,并使用webpack之类的捆绑器来构建您的应用程序. npm install --save @riophae/vue-treeselect 官网实例配置属性请查看官网  <template> <div id="app"> <treesele
关于下拉类型多选组件Vue-Treeselect(键名转换)

目录下拉类型多选组件Vue-Treeselect(键名转换) 支持的功能项在一般项目中也可以使用 vue-treeselect下拉树稍微注意点下拉类型多选组件Vue-Treeselect(键名转换) 支持的功能项 1.支持嵌套选项的单选和多选 2.模糊匹配 3.异步搜索 4.延迟加载(仅在需要时加载深度选项的数据) 5.键盘支持(使用Arrow Up & Arrow Down键导航,使用键选择选项Enter等) 6.丰富的选项和高度可定制的 7.支持多种浏览器它支持在vue项目中通过
vue+elementui实现下拉表格多选和搜索功能

本文实例为大家分享了vue+elementui实现下拉表格多选和搜索的具体代码,供大家参考,具体内容如下在elementui的基础上对下拉框和表格进行组合 template <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="120px&q
Vue下拉选择框Select组件使用详解(二)

本文实例为大家分享了Vue下拉选择框Select组件的使用方法,供大家参考,具体内容如下效果图如下: 下拉组件宽度可自定义设置以下属性: ①下拉组件宽度width属性,默认宽度290 ②placeholder属性 ③是否禁用下拉的disabled属性已预设下拉列表最多8条,超过时滚动显示,具体可自定义调整,如果下拉选项过长省略号显示,鼠标悬浮显示全称,由于业务需求,设置mode属性,区别默认name和value 与 dictKey和dictVal ①创建组件Select.vue <tem
PyQt5下拉式复选框QComboCheckBox的实例

笔者在用PyQt5写GUI时碰到了需要使用下拉式复选框的情况,但是PyQt5中没有相应的组件,而网上找到的方法大多是qt使用的,所以不能直接拿来用. 没办法,在这种让人无奈的情况下,笔者只能根据网上大神们的方法试着自己写一个喽. 你还别说,真就让我写出来了.(笔者是个菜鸟新手,所以这小小的成功让我很开心) 然后笔者就很严肃地将这个组件命名为QComboCheckBox,也就是QComboBox和QCheckBox的拼接. 废话不多说,直接先上效果图: 然后是代码:(第一个是基础,第二个是带全选和
jQuery实现下拉框多选 jquery-multiselect 的实例代码

先给大家展示下效果图: 除了jquery,需要引用的样式和js文件: <link rel="stylesheet" type="text/css" href="../assets/jquery.multiselect.css" /> <link rel="stylesheet" type="text/css" href="../assets/style.css" /&g
jquery实现下拉框多选方法介绍

一.说明本文是利用EasyUI实现下拉框多选功能,在ComboxTree其原有的基础上对样式进行了改进,样式表已上传demo,代码如下二.代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w
EasyUI实现下拉框多选功能

本文实例为大家分享了EasyUI实现下拉框多选展示的具体代码,供大家参考,具体内容如下效果图: 这个没什么说的,直接引入css和js文件和图片,调用js即可.下面是源码: <html> <head> <meta charset="utf-8" /> <title>利用EasyUI实现多选下拉框</title> <link rel="stylesheet" type="text/css&qu
利用Bootstrap Multiselect实现下拉框多选功能

利用Bootstrap Multiselect实现下拉框多选功能,并在点击事件中获取到所有选中option的value值首先展示项目案例: 多选下拉框功能实现.gif 下面是所有完整的代码,重点以及主要的解释已经在代码内进行注释: 引入的css.js文件需要从github中下载:https://github.com/davidstutz/bootstrap-multiselect 插件依赖jQ和bootstrap,所以在引入插件之前需要先引入这jQ和bootstrap的css和js文件. <!
详解Vue用自定义指令完成一个下拉菜单（select组件）

这次分享的是关于Vue自定义指令的使用方法,学习完基础后我们再来实战完成一个下拉列表,废话不多说,直接上干货基本用法 //全局注册 Vue.directive('my-directive', { // 指令选项 }) // 局部注册 var app = new Vue({ el: '#app' directives: { 'my-directive': { // 指令选项 } }) 相信对Vue比较熟悉的人看完都知道,directive的写法与组件基本类似,只是方法名由component改为