精华内容
下载资源
问答
  • VUE 实现树形结构

    2018-10-08 10:34:01
    vue 树形结构 添加删除节点 返回ID 可同步到服务器 treelist组件
  • 主要介绍了vue实现的树形结构加多选框,结合实例形式分析了在之前递归组件实现vue树形结构的基础之上再加上多选框功能相关操作技巧,需要的朋友可以参考下
  • 主要介绍了vue树形结构样式和功能,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
  • vue 树形结构

    2020-08-07 10:56:20
    触发 <el-button size="small" type="success" @click="handlecaidan(scope.row.id)">分配菜单</el-button> <!-- 分配菜单 -->...el-dialog title="分配菜单" :visible....-- --> <el-tre

    1.html

    触发
     <el-button size="small" type="success" @click="handlecaidan(scope.row.id)">分配菜单</el-button>
        <!-- 分配菜单 -->
        <el-dialog title="分配菜单" :visible.sync="handlecaidanis" width="40%">
          <!-- 树 -->
          <el-tree
            :data="treedata" //展示数据
            :props="defaultProps"//配置选项
            show-checkbox//节点是否可被选择
            node-key="id"//每个树节点用来作为唯一标识的属性,整棵树应该是唯一的
             ref="tree"
              default-expand-all//	是否默认展开所有节点
            :default-checked-keys="defKeys"//默认勾选的节点的 key 的数组
          >
          </el-tree>
          <span slot="footer" class="dialog-footer">
            <el-button @click="treerome">取 消</el-button>
            <el-button type="primary" @click="addfrom">确 定</el-button>
          </span>
        </el-dialog>
     
    

    2.data中定义

      handlecaidanis: false, //分配菜单
        // 树形数据
          treedata:[],
          id:'',//树形图确让修改的ID
          menustr:"",
          defKeys:[],
          defaultProps: {
            children: "children",
            label: "title"
          }
    

    3.methods

     //  点击分配权限
        handlecaidan(id) {
          this.id = id
          fetchListtree().then(response => {
            this.treedata = []
            for (var item in response.data) {
              this.treedata.push(response.data[item])
            }
          });
          treelistdata(id).then(response => {
          this.defKeys = response.data
            this.$nextTick(() => {
              this.$refs.tree.setCheckedKeys(this.defKeys)
            })
                this.handlecaidanis = true;
          })
        },
        // 分配取消
        treerome(){
        this.handlecaidanis = false
        this.$refs.tree.setCheckedKeys([]);
        },
        //分配确定
        addfrom(id){
          console.log(id);
          //选中的内容
           let checkedNodes = this.$refs.tree.getCheckedNodes();
            let checkedMenuIds=new Set();
             if(checkedNodes!=null&&checkedNodes.length>0){
              for(let i=0;i<checkedNodes.length;i++){
                let checkedNode = checkedNodes[i];
                checkedMenuIds.add(checkedNode.id);
              }
            }
              console.log(checkedMenuIds);
              this.menustr = JSON.stringify(checkedMenuIds)
              var data = {
                menustr:this.menustr
              }
              id = this.id
              console.log(data,id);
             fetchListWithtree(data,id).then(response => {
                 this.$message({
              message: response.errmsg,
              type: "success",
              duration: 1000
            });
             })
        this.handlecaidanis = false
       this.$refs.tree.setCheckedKeys([]);
        },
    
    展开全文
  • vue写的,包括删除节点,全选节点等操作,拿来就可以用的好东西。
  • {{!item.show?'-':'+'}}{{item.name}}v-show="!item.show":model="item.children":current="current"@change="changeCurrent">exportdefault{name:'EwTree',props:{model:{type:Array,default(){r...
    • {{ !item.show ? '-' : '+' }}

      {{ item.name }}

      v-show="!item.show"

      :model="item.children"

      :current="current"

      @change="changeCurrent">

    export default {

    name: 'EwTree',

    props: {

    model: {

    type: Array,

    default() {

    return []

    }

    },

    current: {

    type: String,

    default: ''

    }

    },

    methods: {

    toggle(item) {

    console.log(item)

    var idx = this.model.indexOf(item)

    this.$set(this.model[idx], 'show', !item.show)

    },

    clickSize(id) {

    console.log(1, id)

    this.$emit('change', id)

    },

    changeCurrent(id) {

    this.clickSize(id)

    }

    },

    mounted() {

    }

    }

    *{

    box-sizing: border-box;

    margin: 0;padding: 0;

    }

    *:before,*:after{

    box-sizing: border-box;

    }

    ul,

    li {

    list-style: none;

    }

    .current{

    color: #e9c309 !important

    }

    .l_tree_container {

    width: 100%;

    height: 100%;

    box-shadow: 0 0 3px #ccc;

    margin: 13px;

    position: relative;

    }

    .l_tree {

    width: calc(100%);

    padding-left: 15px;

    }

    .l_tree_branch {

    width: 100%;

    height: 100%;

    display: block;

    padding: 13px;

    position: relative;

    }

    .l_tree_branch .l_tree_children_btn {

    width: 12px;

    height: 12px;

    background-color: #515a68;

    font-size: 8px;

    text-align: center;

    color: #bbbec1;

    outline: none;

    border: 0;

    cursor: pointer;

    border: 1px solid #bbbec1;

    line-height: 11px;

    margin-left: 5px;

    }

    ul.l_tree:before {

    content: '';

    border-left: 1px dashed #999999;

    height: calc(100% - 24px);

    position: absolute;

    left: 10px;

    top: 0px;

    }

    .l_tree,

    .l_tree_branch {

    position: relative;

    }

    .l_tree_branch::after {

    content: '';

    width: 18px;

    height: 0;

    border-bottom: 1px dashed #bbbec1;

    position: absolute;

    right: calc(100% - 10px);

    top: 24px;

    left: -5px;

    }

    .l_tree_container>.l_tree::before,

    .l_tree_container>.l_tree>.l_tree_branch::after {

    display: none;

    }

    .l_folder {

    font-size:11px;

    margin-left: 5px;

    display: inline;

    color: #bbbec1;

    cursor: pointer;

    }

    展开全文
  • 本文介绍了vue树形结构获取键值的方法示例,分享给大家,具体如下: 把键值文件放入 引入控件 import { getTypeValue } from '@/api/dict/dictValue/index'; 点击搜索,打开弹窗 机构名称 placeholder=请选择...
  • 需求 树形结构展示数据 且数据可被选中 在数据后显示选中数量 测试数据 [ { "title": "测试", "key": 6, "children": [ { "title": "测试测试", "key": "6-1", "children": [ {

    需求 树形结构展示数据 且数据可被选中 在数据后显示选中数量
    最终样式
    测试数据

    [
        {
            "title": "测试", 
            "key": 6, 
            "children": [
                {
                    "title": "测试测试", 
                    "key": "6-1", 
                    "children": [
                        {
                            "title": "Band-测试", 
                            "key": "6-1-60", 
                            "scopedSlots": {
                                "title": "title"
                            }
                        }, 
                        {
                            "title": "Band1-Band1", 
                            "key": "6-1-61", 
                            "scopedSlots": {
                                "title": "title"
                            }
                        }
                    ], 
                    "scopedSlots": {
                        "title": "title"
                    }, 
                    "lengthNum": 2, 
                    "allianceType": "children"
                }, 
                {
                    "title": "测试测试1", 
                    "key": "6-2", 
                    "children": [
                        {
                            "title": "null-null", 
                            "key": "6-2-62", 
                            "scopedSlots": {
                                "title": "title"
                            }
                        }, 
                        {
                            "title": "Band-Band", 
                            "key": "6-2-63", 
                            "scopedSlots": {
                                "title": "title"
                            }
                        }
                    ], 
                    "scopedSlots": {
                        "title": "title"
                    }, 
                    "lengthNum": 2, 
                    "allianceType": "children"
                }
            ], 
            "allianceType": "HEAD", 
            "scopedSlots": {
                "title": "title"
            }
        }, 
        {
            "title": "测试", 
            "key": 7, 
            "children": [
                {
                    "title": "测试3", 
                    "key": "7-4", 
                    "children": [ ], 
                    "scopedSlots": {
                        "title": "title"
                    }, 
                    "lengthNum": 0, 
                    "allianceType": "children"
                }, 
                {
                    "title": "测试3", 
                    "key": "7-3", 
                    "children": [
                        {
                            "title": "Band-Band", 
                            "key": "7-3-64", 
                            "scopedSlots": {
                                "title": "title"
                            }
                        }, 
                        {
                            "title": "Band-Band", 
                            "key": "7-3-65", 
                            "scopedSlots": {
                                "title": "title"
                            }
                        }
                    ], 
                    "scopedSlots": {
                        "title": "title"
                    }, 
                    "lengthNum": 2, 
                    "allianceType": "children"
                }
            ], 
            "allianceType": "BRANCH", 
            "scopedSlots": {
                "title": "title"
            }
        }
    ]
    

    vue代码

          <div>
            <a-input-search
              style="margin-bottom: 8px"
              placeholder="搜索用户组"
              @change="onChange"
            />
            <a-tree
              v-model="checkedKeys"
              :expanded-keys="expandedKeys"
              :auto-expand-parent="autoExpandParent"
              checkable
              :tree-data="gData"
              @expand="onExpand"
            >
              <template slot="title" slot-scope="title">
                <span v-if="title.title.indexOf(searchValue) > -1">
                  {{ title.title.substr(0, title.title.indexOf(searchValue)) }}
                  <span style="color: #f50">{{ searchValue }}</span>
                  {{
                    title.title.substr(
                      title.title.indexOf(searchValue) + searchValue.length
                    )
                  }}
                  <span v-if="title.allianceType">
                    ({{ statisticalSelection(title) }}/{{
                      title.allianceType !== "children"
                        ? title.children
                            .map((item) => item.lengthNum)
                            .reduce((a, b) => a + b)
                        : title.lengthNum
                        ? title.lengthNum
                        : 0
                    }})</span
                  >
                </span>
                <span v-else
                  >{{ title.title }}
                  <span v-if="title.allianceType">
                    (({{ statisticalSelection(title) }}/{{
                      title.allianceType
                        ? title.children
                            .map((item) => item.lengthNum)
                            .reduce((a, b) => a + b)
                        : title.lengthNum || 0
                    }})</span
                  >
                </span>
              </template>
            </a-tree>
          </div>
    
    

    js代码

    //data里放
     gData: [],
     checkedKeys:[],
           expandedKeys: [],
          autoExpandParent: true,
    //methods里放
        onExpand(expandedKeys) {
          this.expandedKeys = expandedKeys;
          this.autoExpandParent = false;
        },
        statisticalSelection(title) {
          //遍历选中数组
          let num = 0;
          this.checkedKeys
            .map(item => {
              //是当前渲染时进入
              if (item == title.key) {
                //是爷进
                if (title?.allianceType !== "children") {
                  return title.children
                    .map(item => item.lengthNum)
                    .reduce((a, b) => a + b);
                } else {
                  //否则是儿
                  console.log("儿子", item, title.key);
                  return title.lengthNum;
                }
              } else {
                //选中子元素
                //爷进
                if (
                  !this.checkedKeys.includes(title.key) &&
                  title.allianceType !== "children"
                ) {
                  console.log("爷爷判断儿子是否被选中");
                  return title.children
                    .map(cont => {
                      if (item == cont.key) {
                        console.log("选中了儿子");
                        return cont.lengthNum;
                      } else if (
                        !this.checkedKeys.includes(cont.key) &&
                        cont.children.map(item => item.key).includes(item)
                      ) {
                        console.log("孙子选中了");
                        return 1;
                      }
                      return 0;
                    })
                    .reduce((a, b) => {
                      return a + b;
                    });
                } else if (
                  !this.checkedKeys.includes(title.key) &&
                  title.allianceType == "children"
                ) {
                  if (title.children.map(item => item.key).includes(item)) {
                    return 1;
                  }
                }
              }
            })
            .filter(a => a)
            .map(item => {
              num += item;
            });
          return num;
        },
     //放vue外 js内
    const getParentKey = (key, tree) => {
      let parentKey;
      for (let i = 0; i < tree.length; i++) {
        const node = tree[i];
        if (node.children) {
          if (node.children.some(item => item.key === key)) {
            parentKey = node.key;
          } else if (getParentKey(key, node.children)) {
            parentKey = getParentKey(key, node.children);
          }
        }
      }
      return parentKey;
    };
    
    
    展开全文
  • 主要介绍了Vue组件模板形式实现对象数组数据循环为树形结构,本文用vue实现方式,非常不错,具有参考借鉴价值,需要的朋友可以参考下
  • vue树形结构的实现

    2020-12-19 09:07:35
    1. 主要代码使用单文件组件的方式, 需要一个父组件treeMenu, 和子组件treeItem1.1 父组件treeMenu.vue:nodes="treeData">export default {name: 'treeMenu',data: () => {return {treeData: {label: 'china',...

    1. 主要代码

    使用单文件组件的方式, 需要一个父组件treeMenu, 和子组件treeItem

    1.1 父组件treeMenu.vue

    :nodes="treeData">

    export default {

    name: 'treeMenu',

    data: () => {

    return {

    treeData: {

    label: 'china',

    nodes: [{

    label: 'hubei',

    nodes: [{

    label: 'wuhan'

    },

    {

    label: 'yichang'

    },

    {

    label: 'jinzhou'

    }]

    }]

    }

    }

    }

    }

    1.2 子组件treeItem.vue

    class="tree-item-label"

    :class="{active: isActive}"

    @click="activeItem"

    >{{nodes.label}}

    v-for="(item, index) in nodes.nodes"

    :key="index"

    :nodes="item">

    export default {

    name: 'treeItem',

    props: ['nodes'],

    data () {

    return {

    }

    },

    computed: {

    isEnd () {

    console.log(this.nodes.nodes)

    return this.nodes.nodes && this.nodes.nodes.length

    }

    },

    methods: {

    activeItem: () => {

    }

    }

    }

    2. 坑点

    使用递归组件时, 子组件必须在全局注册, 否则在调用时会提示引用错误

    必须设置递归终止条件, 否则会导致内存溢出报错

    3. TODO

    本篇主要实现了从数据到视图的数据展示的实现, 下一篇将实现从视图到数据的操作数据的实现

    展开全文
  • 怎么在vue中利用递归组件实现一个树形控件发布时间:2021-06-11 17:26:48来源:亿速云阅读:81作者:Leah本篇文章为大家展示了怎么在vue中利用递归组件实现一个...树形结构2Vue.component('tree',{name:"tree",templ...
  • Vue树形结构操作

    万次阅读 2018-07-09 22:49:21
    树形结构是一种常用的数据结构,使用Vue怎么来渲染呢?要把树结构的每一个节点都渲染成dom,需要对树结构进行递归遍历。Vue组件可以通过name选项的设置来递归的调用自己,因此渲染起来很方便。 本文简单实现了一下...
  • 基于element+vue树形结构外加多选框

    千次阅读 2018-12-11 17:18:59
    今天有空整理了之前项目中用到的树形结构外加多选框,并实现一定的逻辑,比如全选,单选,全选和单选之间的联动 之前也在网上搜到过有关此功能的实现,于是我也就参考着写了一个,放在了自己的博客里,就当是给自己做了...
  • 效果展示: 思路: 右边的button用插槽的方式添加 <template> <div class="m-page"> <div class="content"> <div class="menu-data"> <div class="header">.../sp
  • Vue树形结构数据格式化代码插件,封装的组件代码
  • vue树形结构获取键值

    千次阅读 2018-05-15 15:41:00
    把键值文件放入 引入控件 import { getTypeValue } from '@/api/dict/dictValue/index';   ...el-form-item label="机构名称" placeholder="请选择机构" prop="orgName">...el-i...
  • 根据自己碰到的业务场景,自己总结的搜索树形结构节点的算法。用Vue.js实现Demo
  • 主要为大家详细介绍了vue实现带复选框的树形菜单,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 基于 Vue树形选择组件
  • 树形结构数据 递归函数 vue 数据结构 let arr = [ { name: '第一级', id:1, children: [ { name: '第二级', id:12, children: [ { name: '第三级', id:13, children...
  • Vue树形结构分页怎样实现?求思路? Vue树形结构分页怎样实现?求思路?
  • 主要为大家详细介绍了Vue2组件tree实现无限级树形菜单,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • java +vue 树形结构形成

    2021-09-09 13:56:21
    /** * 树形结构数据 * @param params * @return * @throws Exception */ @PostMapping("/monitor/tree") public AjaxResult getMonitorTree(@RequestBody String params) throws Exception { JSONObject jsonObject...
  • Vue实现树形结构,不采用tree组件,利用循环方式得到;实现全选,勾选父节点自动勾选子节点,勾选子节点反勾选相应父节点功能
  • Vue 递归实现树形结构

    2020-12-19 09:07:38
    结果展示先给出两张效果图,左侧是百度Echarts的...楼主这里要总结的是vue组件化的时候,当前树形结构组件自行调用;仅供项目总结,如有不对的地方,请多多包涵。代码结构mTree.vue:class="{'active':model.path ===...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 6,763
精华内容 2,705
关键字:

vue树形结构

vue 订阅