next-tree（超强树选择器、树组件、树插件、无限级联树、单选树、多选树、自定义样式树、树形选择

于 2024-01-03 15:29:34 发布
阅读量1k 收藏 9
点赞数 12
文章标签： uni-app 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/LJ_James_/article/details/135365172
版权

https://ext.dcloud.net.cn/plugin?id=12265

<template>
    <view>
        <view style="padding:10px;color: #333;font-weight: 500;">
            <view style="padding: 10px 0"><text>1、设置单选和父级不可选</text></view>
            <button style="width: 100%;background-color: #f9ae3d;color:#fff" size="mini" @click="itemclick(false, false)">设置</button>
            <view style="padding: 10px 0"><text>2、设置多选和父级不可选</text></view>
            <button style="width: 100%;background-color: #f9ae3d;color:#fff" size="mini" @click="itemclick(true, false)">设置</button>
            <view style="padding: 10px 0"><text>3、设置单选和父级可选</text></view>
            <button style="width: 100%;background-color: #f9ae3d;color:#fff" size="mini" @click="itemclick(false, true)">设置</button>
            <view style="padding: 10px 0"><text>4、设置多选和父级可选</text></view>
            <button style="width: 100%;background-color: #f9ae3d;color:#fff" size="mini" @click="itemclick(true, true)" >设置</button>
            <view style="padding: 10px 0"><text>4、设置多选和父级可选和父级关联子级选择</text></view>
            <button style="width: 100%;background-color: #f9ae3d;color:#fff" size="mini" @click="itemclick(true, true, true)" >设置</button>
            <view style="padding: 10px 0"><text>5、设置默认回显(默认选中: '上海-2', '黄埔区-35')</text></view>
            <button style="width: 100%;background-color: #f9ae3d;color:#fff" size="mini" @click="echoDefault()" >设置</button>
            <!-- 异步加载demo -->
            <view style="padding: 10px 0"><text>6、异步加载渲染demo</text></view>
            <button style="width: 100%;background-color: #f9ae3d;color:#fff" size="mini" @click="openTree()" >设置</button>
        </view>
        <!-- 异步加载demo -->
        <next-tree :selectParent="false" :checkStrictly="true" :multiple="true" ref="nextTreeAsyncRef" :treeData="asyncTreeData" :loadData="loadData" />

        <next-tree :changeVerify="changeVerify" :title="getTitle" ref="nextTreeRef" :checkStrictly="checkStrictly" :selectParent="selectParent" :multiple="multiple" :treeData="treeData" @cancel="oncancel" @confirm="onconfirm">
            <!-- label插槽示意代码 -->
            <!-- <template v-slot:label="{data: {id, label, iconSrc, prev, post}}">
                <view class="line-block">
                    <image class="img" v-if="iconSrc" :src="iconSrc"></image>
                    <text space="nbsp" v-if="prev">{{prev}}&nbsp;</text><text>{{label}}</text><text space="nbsp" v-if="post">&nbsp;{{post}}</text>
                </view>
            </template> -->
            <!-- <template #topBar>
                <view style="color: #666;padding:5px;"><text style="font-size: 12px;">历史记录</text></view>
                <view style="display: flex;justify-content: space-between;padding-bottom: 10px;border-bottom: 1rpx solid #f0f0f0;">
                    <button @click="checkedFunc('1-3-3-4')"  :style="'background-color:'+ (activeId === '1-3-3-4' ? '#f9ae3d' : '#ccc') + ';color:#fff;margin: 5px'" size="mini">北京区-4</button>
                    <button @click="checkedFunc('3-1-2')"  :style="'background-color:'+ (activeId === '3-1-2' ? '#f9ae3d' : '#ccc') + ';color:#fff;margin: 5px'" size="mini">海珠区-2</button>
                    <button @click="checkedFunc('3-1-6')"  :style="'background-color:'+ (activeId === '3-1-6' ? '#f9ae3d' : '#ccc') + ';color:#fff;margin: 5px'" size="mini">海珠区-5</button>
                </view>
            </template> -->
        </next-tree>
    </view>
</template>

<script>
let self = null;
export default {
    data () {
        return {
            multiple: false,
            selectParent: false,
            checkStrictly: false,
            activeId: '',
            localData:{
                'a1': [{id: 'a1-1', label: 'a1-1'}, {id: 'a1-2', label: 'a1-2',children: [] },{id: 'a1-3', label: 'a1-3'}],
                'b1': [{id: 'b1-1', label: 'b1-1',children: []}, {id: 'b1-2', label: 'b1-2'},{id: 'b1-3', label: 'b1-3'}],
                'c1': [{id: 'c1-1', label: 'c1-1'}, {id: 'c1-2', label: 'c1-2'},{id: 'c1-3', label: 'c1-3',children: []}],
                'a1-2': [{id: 'a1-2-1', label: 'a1-2-1'}, {id: 'a1-2-2', label: 'a1-2-2'}],
                'b1-1': [{id: 'b1-1-1', label: 'b1-1-1'}, {id: 'b1-1-2', label: 'b1-1-2'}],
                'c1-3': [{id: 'c1-3-1', label: 'c1-3-1'}, {id: 'c1-3-2', label: 'c1-3-2'}]
            },
            asyncTreeData: [{id: 'a1', label: 'a1', children: []},{id: 'b1', label: 'b1', children: []},{id: 'c1', label: 'c1', children: []}],     
            treeData: [
                {id: '1', label: '北京', checked: false},
                {id: '2', label: '上海', checked: false, children: [
                    {id: '2-1', label: '上海-1', checked: false},
                    {id: '2-2', label: '上海-2', checked: false},
                    {id: '2-3', label: '上海-3', checked: false},
                ] },
                {id: '3', label: '广州', children: [
                        {id: '3-1', label: '海珠区', checked: false, children: [
                            {id: '3-1-1', label: '海珠区-1', checked: false, disabled: true},
                            {id: '3-1-2', label: '海珠区-2', checked: false},
                            {id: '3-1-4', label: '海珠区-3', checked: false},
                            {id: '3-1-5', label: '海珠区-4', checked: false},
                            {id: '3-1-6', label: '海珠区-5', checked: false},
                            {id: '3-1-7', label: '海珠区-6', checked: false},
                            {id: '3-1-8', label: '海珠区-7', checked: false},
                            {id: '3-1-9', label: '海珠区-8', checked: false},
                            {id: '3-1-10', label: '海珠区-9', checked: false},
                            {id: '3-1-11', label: '海珠区-10', checked: false},
                        ]},
                        {id: '3-2', label: '番禺区', checked: false, children: [
                            {id: '3-2-1', label: '番禺区-1', checked: false},
                            {id: '3-2-2', label: '番禺区-2', checked: false},
                            {id: '3-2-4', label: '番禺区-3', checked: false},
                            {id: '3-2-5', label: '番禺区-4', checked: false},
                            {id: '3-2-6', label: '番禺区-5', checked: false},
                            {id: '3-2-7', label: '番禺区-6', checked: false},
                            {id: '3-2-8', label: '番禺区-7', checked: false},
                            {id: '3-2-9', label: '番禺区-8', checked: false},
                            {id: '3-2-10', label: '番禺区-9', checked: false},
                            {id: '3-2-11', label: '番禺区-10', checked: false},
                        ]},
                        {id: '3-3', label: '黄埔区', checked: false, children: [
                            {id: '3-3-1', label: '黄埔区-1', checked: false},
                            {id: '3-3-2', label: '黄埔区-2', checked: false},
                            {id: '3-3-3', label: '黄埔区-3', checked: false},
                            {id: '3-3-4', label: '黄埔区-4', checked: false},
                            {id: '3-3-5', label: '黄埔区-5', checked: false},
                            {id: '3-3-6', label: '黄埔区-6', checked: false},
                            {id: '3-3-7', label: '黄埔区-7', checked: false},
                            {id: '3-3-8', label: '黄埔区-8', checked: false},
                            {id: '3-3-9', label: '黄埔区-9', checked: false},
                            {id: '3-3-10', label: '黄埔区-10', checked: false},
                            {id: '3-3-12', label: '黄埔区-11', checked: false},
                            {id: '3-3-13', label: '黄埔区-12', checked: false},
                            {id: '3-3-13', label: '黄埔区-13', checked: false},
                            {id: '3-3-14', label: '黄埔区-14', checked: false},
                            {id: '3-3-15', label: '黄埔区-15', checked: false},
                            {id: '3-3-16', label: '黄埔区-16', checked: false},
                            {id: '3-3-17', label: '黄埔区-17', checked: false},
                            {id: '3-3-18', label: '黄埔区-18', checked: false},
                            {id: '3-3-19', label: '黄埔区-19', checked: false},
                            {id: '3-3-20', label: '黄埔区-20', checked: false},
                            {id: '3-3-21', label: '黄埔区-21', checked: false},
                            {id: '3-3-22', label: '黄埔区-22', checked: false},
                            {id: '3-3-23', label: '黄埔区-23', checked: false},
                            {id: '3-3-24', label: '黄埔区-24', checked: false},
                            {id: '3-3-25', label: '黄埔区-25', checked: false},
                            {id: '3-3-26', label: '黄埔区-26', checked: false},
                            {id: '3-3-27', label: '黄埔区-27', checked: false},
                            {id: '3-3-28', label: '黄埔区-28', checked: false},
                            {id: '3-3-29', label: '黄埔区-29', checked: false},
                            {id: '3-3-30', label: '黄埔区-30', checked: false},
                            {id: '3-3-31', label: '黄埔区-31', checked: false},
                            {id: '3-3-32', label: '黄埔区-32', checked: false},
                            {id: '3-3-33', label: '黄埔区-33', checked: false},
                            {id: '3-3-34', label: '黄埔区-34', checked: false},
                            {id: '3-3-35', label: '黄埔区-35', checked: false},
                            {id: '3-3-36', label: '黄埔区-36', checked: false},                    
                        ]},
                    ],
                }]
        }
    },
    methods: {
        openTree: function() {
            this.$refs.nextTreeAsyncRef.showTree = true
        },
        changeVerify: function(current, chooseList) {
            // 注意：返回非空字符串会阻止原有行为，并提示返回的字符串
            // 如果函数体不做return返回值，即验证通过，控件正常处理业务
            console.log('当前变化的数据', current)
            console.log('已选择的数据', chooseList)
            if(chooseList && chooseList.length > 4) {

                return '最多可以选择4个节点'
            }
        },
        checkedFunc: function(id) {
            if(this.activeId === id) {
                this.activeId = '';
                this.$refs.nextTreeRef.checkedFunc(id, false)
            } else {
                this.activeId = id;
                this.$refs.nextTreeRef.checkedFunc(id)  
            }
        },
        loadData(nodeItem) {
            // 同步实现的代码处理方式 可以返回单个子节点的集合也可以返回子孙节点的集合
            // 如果期望子集节点中还存在孙子节点可以打开，请在初始化数据的时候，初始化个空数组的子节点配置值{[this.childrenKey]: []}

            // if(nodeItem && this.localData[nodeItem.id]) {
            //  return this.localData[nodeItem.id]
            // } else {
            //  return []
            // }
            // 异步的代码实现方式 可以返回单个子节点的集合也可以返回子孙节点的集合
            // 如果期望子集节点中还存在孙子节点可以打开，请在初始化数据的时候，初始化个空数组的子节点配置值{[this.childrenKey]: []}
            return new Promise((resolve, reject) => {
                setTimeout(() => {
                    if(nodeItem && self.localData[nodeItem.id]) {
                        return resolve(self.localData[nodeItem.id])
                    } else {
                        return resolve([])
                    }
                }, 1000)
            })  
        },
        getTitle: function(checked) {
            return `已选：${checked.length}项`
        },
        echoDefault: function() {
            const selectIds = ['2-1','3-3-35']
            this.checkedTreeData(this.treeData, selectIds)
            console.log('treeData的数据：', this.treeData)
            this.multiple = true
            this.$refs.nextTreeRef.showTree = true
        },
        itemclick: function(_multiple, _selectParent, _checkStrictly = false) {
            this.multiple = _multiple
            this.selectParent = _selectParent
            this.checkStrictly = _checkStrictly
            this.$refs.nextTreeRef.showTree = true
        },
        checkedTreeData: function(treeData, selectIds) {
            // 注意 vue2当数据深嵌套时，如果没有在treeData里面初始化checked属性，那在改变数据的时候直接将checked属性赋值为true，这时候ui界面有可能不会更新，
            // 这时候建议使用this.$set去更新checked属性值，或者在初始化this.treeData的时候初始化checked属性
            (treeData || []).map(item => {
                if (selectIds.indexOf(item.id) !== -1) {
                    item.checked = true
                } else {
                    item.checked = false
                }
                if (item.children && item.children.length) {
                    this.checkedTreeData(item.children, selectIds)
                }
            })
        },
        onconfirm: function(list) {
            console.log('选中项的数量列表list：', list)
        },
        oncancel: function() {
            // 清除treeData的选中状态
            this.checkedTreeData(this.treeData, [])
        }
    },
    created() {
        self = this
    }
}
</script>
<style lang="scss">
    .line-block {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        .img {
            width: 40rpx;
            height: 40rpx;
            border-radius: 10rpx;
            margin: 0 20rpx;
        }
    }
</style>

LJ_James_
关注
uni-app - 详细实现树形结构选择器组件（支持单选 / 多选 / 可选择父级 / 弹框形式）树形控件 tree 无限级节点树，树插件完整源码，最好用的组件教程
王佳斌
11-07 1万+
uni-app 实现无限级树形结构组件，uniapp无限树形结构，uniapp无限级树形结构组件,多选组件,支持搜索，关于vue.js:uniapp如何实现无限级树形结构组件，uniapp无限级树形结构组件，多选组件，无限树状组件的实现，uni-app官方插件，最好用的树形结构three组件树，很好用的uni-app节点树组件教程，uni-app兼容H5 app 小程序的树形节点树插件组件，UNIAPP怎么实现树形解构可展开折叠的组件。uni-app - 树形结构组件（支持展示、单选、多选、多选联动、展开折
vue2/3 - 实现手机H5移动端树形无限级组件，在vue网页中使用tree树形菜单或下拉弹框树形节点菜单，支持某项禁用选中、自定义样式、可嵌套在弹框内等（详细示例组件源码，一键复制即可使用）
最新发布
高级前端工程师
02-20 3720
vue，h5网页，vue手机端，树形菜单，tree，vue树形菜单，树形下拉框，树形下拉选择，树形目录，树形下拉列表，树形插件，树形列表，vue移动端树形控件插件，移动端树控件，vue树形列表（单选，多选）tree树组件，基于Vue的树形选择组件，Vue.js的移动端Tree树形组件，移动端树形选择组件，vue树形组件封装（移动端），vue递归组件树形控件实例代码，Vue2递归组件实现树形菜单，vue3使用递归组件实现树形目录的方法，vue手机h5网站树形控件，vue3之H5实现树形结构，vue实现自定义实
树(选择框)
zeyuphoenix的专栏
04-27 167
&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt; &lt;meta name="ProgId" content="Word.Document"&gt; &lt;meta name="Generator" content="Microsoft Word 12&quo
tree 级联菜单__树型结构
大蘑菇
01-27 248
[code="JSP"] 不要着急 我们 来 先看看API Overview Functions add openAll closeAll openTo Configuration Functions add() Adds a node to the tree. Can only be called before the tree is drawn. id, ...
饿了么Tree组件父子级联关系改造
mgTop的博客
11-17 1117
饿了么Tree组件改造级联改造适配
TP5.1 Layui (无限级)树形表格treetable
php菜鸟技术天地
08-29 2万+
演示地址： https://whvse.gitee.io/treetable-lay/  项目地址： https://gitee.com/whvse/treetable-lay    例子： TP5.1 + Layui 2.4.0 一、模板代码： &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charse...
记录基于Vue.js的移动端Tree树形组件
Mr.小灰狼_随笔
06-09 1万+
Vue 树形选择器（ Vue tree select ）组件在搭建 Vue 的 app 中特别常用，Vue tree select 除了简单的树形结构外，还有非常多样的功能来配合不同场景的使用。比如搜索过滤，前端添加删除树枝，前端编辑修改子树名，拖拽排序，对用户操作事件记录等。本文记录了我自己使用多年最好用的 2款 Vue tree select 组件，每一款都经过我实际测试，推荐给大家。
jQuery-选择器-筛选器-元素增加删除-属性样式-事件-动画-插件
weixin_57218747的博客
05-12 1363
jQuery 一 jQuery 的基础 1.1 jQuery 的版本 不同的开发版本 jquery.js 开发版（不压缩） jquery.min.js 产品版（压缩过） jquery.slim.js 简化版（去掉了动画功能和ajax功能） https://www.bootcdn.cn/ 版本号 1.x.x 兼容IE6~IE8 2.x.x 和 3.x.x 需要 IE9 以上浏览器支持 1.2 如何使用 jQuery 需要把 jQuery 文件导入到 html 中，自己写的 js 代码需要在 jQuery
四、数据展示组件(2)
rocktanga的博客
11-15 1390
12、Tree树形控件 多层次的结构列表。 何时使用：文件夹、组织架构、生物分类、国家地区等等，世间万物的大多数结构都是树形结构。使用 树控件 可以完整展现其中的层级关系，并具有展开收起选择等交互功能。 (0)<Tree>组件对应的事件 <1>onCheck事件: 表示选中复选框，或者取消复选框的选中时触发.可选值：无；默认值： -；类型： function(checkedKeys, info:{checked: boolean, checkedNodes, node
Cat-Table-Select 基于Vue+Element的表格选择器
究极死胖兽的博客
08-24 3517
Cat-Table-Select 基于Vue+Element的表格选择器 基于 Element 的Vue 组件(Vue.js 2.x) cat-table-select Github 地址 前言 之前自己动手做了个基于Element树选择器 cat-tree-selec ，于是就照着之前的思路又封装了个表格选择器。目前已经实现了单选，多选，分页，自定义列，可搜索等功能。 效果预览 Demo 安装 复制仓库 bashgit clone git@github.com:scuxiatian/cat-ta
组件element------data组件
weixin_45343884的博客
08-07 1041
（1）Table 表格 基础表格-------基础的表格展示用法。 —当el-table元素中注入data对象数组后，在el-table-column中用prop属性来对应对象中的键名即可填入数据，用label属性来定义表格的列名。可以使用width属性来定义列宽。 <template> <el-table :data="tableData" ...
28款jQuery Tree 树形结构插件（转自：http://www.andelse.com/jquery-tree-plugins.html）
guoyiqi
02-08 1081
（1）jQuery File Tree （2）jQuery plugin: Treeview(演示地址) 这个插件能够把无序列表转换成可展开与收缩的Tree。 （3）jstree jstree是一个基于jQuery的Tree控件。支持XML，JSON，Html三种数据源。提供创建，重命名，移动，删除，拖"放节点操作。可以自己自定义创建，删除，嵌套，重命名，选择节点的规则。在...
排序算法--选择篇（简单选择，树形选择，堆排序）
dazzlingN的博客
10-07 4289
选择类排序的基本思想是每一趟在n-i+1(i=1,2,...,n-1)个记录中选取关键字最小的记录作为有序序列中第i个记录。本篇在介绍简单选择排序的基础上，给出了其改进算法--树形选择排序和堆排序。 1.简单选择排序 算法思想：第一趟简单选择排序时，从第一个记录开始，通过N-1次关键字的比较，从n个记录中选出关键字最小的记录，并和第一个记录进行交换。第二趟简单选择排序时，从第二个记录开始，通过...
uni-app tree(树状) 组件
qq_42717015的博客
09-13 8165
uni-app tree(树状) 组件
开发中的分类管理及分类树装结构的应用和操作（无限极分类树infinite-tree）
Marswill
06-05 1969
无限极分类树的原理 无限极分类的原理非常简单，就是把每一个分类节点规定一个左值和右值来确定该节点在整个分类中的位置。一般的我们还会加上一个深度（层级）的值，表示他所处的深度。 这样的一个好处是对于层级很深或者节点非常多的，比较庞大的分类或其他树我们想查找或者遍历就显得非常快。例如我们要查找所有的电脑办公分类下的所有后代分类。如果你的数据只是id和parent_id约束的结构那么你先要以电脑办公的i...
vue2封装简单的Tree组件
weixin_46273779的博客
03-17 1748
props: {data: {
uniapp树形层级选择器
weixin_38999134的博客
04-23 685
插件下载地址https://ext.dcloud.net.cn/plugin?
级联与树形组件笔记
SatanDYG的博客
03-26 681
省市区联动组件 一. V - Distpicker 是一个简单易用的地区选择器 官网: https://distpicker.unie.fun/ 安装 npm install v-distpicker --save 全局引入 import VDistpicker from 'v-distpicker' Vue.component('v-distpicker', VDistpicker) 局部引入(建议) import VDistpicker from 'v-distpicker' export de
antd TreeSelect树选择的使用
热门推荐
Lily_miao的博客
09-17 4万+
1.antd官网TreeSelect组件： https://ant.design/components/tree-select-cn/ 2.运行效果图如下： 3.组件引用及数据渲染实现： （1）组件的导入如下图： （2）组件的渲染： 下图3-2-1为渲染组件:（相关引用均在下图做了说明） 图3-2-1 图3-2-2为渲染父节点： 图3-2-2 图3-2-3为渲染一...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值