更新记录

1.0(2023-12-26) 下载此版本

2023-12-26 第1版


平台兼容性

Vue2 Vue3
×
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
HBuilderX 3.6.0 × × × × × ×
钉钉小程序 快手小程序 飞书小程序 京东小程序
× × × ×
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari
× × × × × × × × ×

介绍

基于element UI的combotree。完全兼容element UI的el-select和el-tree。可以用url属性指定后台的数据地址,也可以用treeDate属性在前台指定树的数据。

软件架构

软件架构说明

安装教程

  1. 如要使用url属性来指定数据地址,需要安装axios,并要在main.js中加入
    Vue.prototype.$ajax=axios;

    后台返回json:

    {
        success: false,  //调用是否成功
        msg:'',          //返回调用说明
        data: {}||array  //返回的数据
    }

使用说明

  1. 将comboTree.vue复制到components文件夹中
  2. <script></script>中加入
    import comboTree from '../components/comboTree.vue'
  3. 在 export default {}中加入
components:{ comboTree }

html:

<combo-tree url="banji/list" v-model="banjiId" placeholder-"请选择班级" clearable :prop="defaultProps2"></combo-tree>

/p>

data(){
    return{
        banjiId:'';
        defaultProps2: {
            children: 'children',
            label: 'name',
            id: 'id',
            pid:'parentId',
            //只有叶子节点能够被选择
            disabled:function(data,node){
                return !node.isLeaf;
            }
        }
    }
}

属性

value: String | Number | Array
clearable: Boolean 清除按钮
treeDate: Array 树的数据(需要是树型结构)
url: String 后台数据地址(后台数据是扁平数据结构,不需要树形)
multiple: Boolean 是否多选
nodeKey: String 树节点的key名称
props:Object 默认值:

{
    children: 'children',
    label: 'name',
    id: 'id',
    pid: 'parentId'
    disabled:function(data,node){
        //节点是否可选,返回true时,不可选
        //data 树,node 当前节点
    }    
}

事件

input
change

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

插件不采集任何数据

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问