精华内容
参与话题
问答
  • 每年的八月份都是我司封闭开发的 大(ku)好(bi)时光,今年封闭开发带着我的小团队用iview-admin2重新构建了app后台管理系统 期间产品需求有树形控件 - 单选 需求,旧后台用的zTree 自带此功能 无需多说,换成...

    仅以此文 纪念我无声的三周年司龄 以及2019年8月 姿美堂709的封闭开发时光!!!

    每年的八月份都是我司封闭开发的 大(ku)好(bi)时光,今年封闭开发带着我的小团队用iview-admin2重新构建了app后台管理系统

    期间产品需求有树形控件 - 单选 需求,旧后台用的zTree 自带此功能 无需多说,换成iview居然没有单选,只有多选

    百度之~

    恩 要是一下就查到解决方案 也就不会有这篇文章了

    既然度娘没给 我就做第一个吧!!!

     

    成品图如下:

    <Tree class="ml20 radioTree"

    show-checkbox

    ref="tree"

    :check-strictly='true'

    :data="amendTreeData"   

    @on-check-change='changeCheck'  ></Tree>

    tree数据是跟后台协定好的

    贴一段自行配置树展开所有节点的遍历代码 如有需要 自取就好

    //展开或合并树,当flag为true时全部展开,flag为false时全部合并

    exchangeTree(flag) {

    this.amendTreeData = this.treeChangeExpand(this.amendTreeData, flag);

    },

    //递归给树设置expand

    treeChangeExpand(treeData, flag) {

    let _this = this;

    for (var i = 0; treeData && i < treeData.length; i++) {

    this.$set(treeData[i], 'expand', flag); //重要!用set方法

    if (treeData[i].children) {

    treeData[i].children = _this.treeChangeExpand(treeData[i].children, flag);

    }

    }

    return treeData;

    },

    展开后样式如下:

    show-checkbox 为开启多选框

    @on-check-change='changeCheck'  为用户选中多选框的回调函数 会返还当前选中的节点数据集合 [{ 1节点数据 },{ 2节点数据 }]

    还有个selected属性会给你点击选中的节点加上灰色背景

     

    当时大概思路就是 既然每次选中会返还一个数组 始终保持数组里只有一个元素有checked属性为true不就是单选了么

    改造上面的函数 新增为

    selectedTree(id, flag) {

    this.amendTreeData = this.treeChangeSelected(this.amendTreeData, id, flag);

    },

    treeChangeSelected(treeData, Id, flag) {

    let _this = this;

    for (var i = 0; treeData && i < treeData.length; i++) {

    this.$set(treeData[i], 'selected', false); //重要!用set方法

    if (Id !== treeData[i].id) { //非当前选中设置为未选中

    this.$set(treeData[i], 'checked', flag); //重要!用set方法

    } else {

    this.$set(treeData[i], 'checked', !flag);

    }

    if (treeData[i].children) {

    treeData[i].children = _this.treeChangeSelected(treeData[i].children, Id, flag);

    }

    }

    return treeData;

    },

    以上为单选功能实现核心代码 且能去除所有节点的selected状态!

    值得一说的是 选中后会返还两个参数 你要在回调用筛选出当前选中的元素 和 上次选中的元素

    然后找到当前的那个元素的id后使用

    this.selectedTree(this.checkId, false)

    将这个唯一的id对应节点赋值checked:true  其他皆为false即可

     

    此处坑比较深 因为它数据虽然只有两个 但新的数据有可能在第一个 也有可能在第二个 调BUG调了好久 采用中转数据才解决这问题

    贴下代码吧!

    changeCheck(res) { //单选封装

    if (res.length == 0) {

    this.checkId = '';

    this.checkArr = [];

    } else if (res.length == 1) {

    this.checkId = res[0].id;

    this.checkArr = res[0];

    } else if (res.length > 1) {

    // 需获取与当前缓存不一样的id 赋值到新的id里

    if (this.checkId === '') {

    if (this.parent.pid === res[0].id) {

    this.checkId = res[1].id;

    this.checkArr = res[1];

    } else {

    this.checkId = res[0].id;

    this.checkArr = res[0];

    }

    } else if (res[0].id === this.checkId) {

    this.checkId = res[1].id;

    this.checkArr = res[1];

    } else {

    this.checkId = res[0].id;

    this.checkArr = res[0];

    }

    this.selectedTree(this.checkId, false)

    }

    },

    以上Js功能已实现项目需求 图片如下:

    就差css样式了

    赠送一个css深度选择器吧!

    即 /deep/ 和 >>> 使用此方法改第三方UI库尤其方便!!!

    值得一说的是 层级选择的第一个 必须是自己写死的

    .radioTree /deep/ .ivu-checkbox-inner {

    border-radius: 50%;

    }

    以上 完成iview radio-tree开发工作

     

    成品图如下:

     

    还有个关于tree的属性

    是否可多选  multiple

    不加的话只能选一个

    :multiple='true'

    加上之后可以选多个


    this is all  !!!

    2019.08.27 Mr.J

    展开全文
  • iview tree 实现单选功能、 iview tree 单选功能实现、iview tree 多选变单选、iview Tree树形控件 在用iview重构app后台管理系统时发现iview tree还没有单选的功能,嗯,那就自己搞一个简单的笨方法吧 废话不多说,...

    iview tree 实现单选功能、 iview tree 单选功能实现、iview tree 多选变单选、iview Tree树形控件

    在用iview重构app后台管理系统时发现iview tree还没有单选的功能,嗯,那就自己搞一个简单的笨方法吧
    废话不多说,贴点主要代码:

    • 首先,当然是组件啦
    <Tree 
    :data="data" 
    :load-data="loadData" 
    show-checkbox check-strictly 
    @on-check-change="checkChange" />
    

    这里直接就用官网的懒加载例子的内容作基础来尝试实现 check 的 单选 需求

    • 然后,定义一个变量备用一下
    data() {
        return {
       	  data: [
            {
              id: 1,
              title: 'parent',
              loading: false,
              children: []
            }
          ],
          loop: 0
        }
      }
    

    这个嘛,data 自然就是 tree 的根节点数据了
    loop的话怎么说呢,简单来讲主要是为了后续循环遍历时候跳出循环用

    • 然后,当然是主要的 methods 啦
    	loadData(item, callback) {
          setTimeout(() => {
            const data = [
              {
                id: Math.random(),
                title: 'children',
                loading: false,
                children: []
              },
              {
                id: Math.random(),
                title: 'children',
                loading: false,
                children: []
              }
            ]
            callback(data)
          }, 1000)
        }
    

    上面这个嘛,也是官网的懒加载的 tree 子节点的数据

        checkChange(items, item) {
          if (items.length > 1) {
            this.loop = 0
            this.childnodes(this.data, items, item)
          }
        },
        childnodes(data, items, item) {
          if (this.loop) return false
          const len = data.length
          const its = items.length
          let i = 0
          let j = 0
          for (i = 0; i < len; i++) {
            for (j = 0; j < its; j++) {
              if (items[j].id === data[i].id) {
                if (items[j].id === item.id) {
                  break
                } else {
                  this.loop = 1
                  data[i].checked = false
                  return false
                }
              }
            }
            if (!this.loop && data[i].children && data[i].children.length > 0) {
              this.childnodes(data[i].children, items, item)
            }
          }
        }
    

    以上这两个呢,就是最主要的处理了
    其中, itemsitem 是 ivew-tree 的 on-check-change 点击复选框时触发的返回值,分别为 当前已勾选节点的数组、当前项

    首先,勾选一个的时候不需要作任何处理,勾选了就勾选了,毕竟是单选,所以 checkChange 做了个小小的 if 判断,只处理当勾选值存在两个的情况

    然后,childnodes 主要通过循环遍历 每个 tree 节点和 children 的部分,获取到每个 tree 枝节点的数据,并通过对比 id 来作判断是否选中对象进行勾选或者勾选的去除

    至此,Tree 单选 的简单实现完成了,如有需要 自取就好
    说明:这里主要是因为我的数据加了 id 给每个 tree 枝,所以较为方便做判断

    如果兄弟们有更好的实现方式,方便的话告知一下,万分感谢

    展开全文
  • iView Tree 自定义

    千次阅读 2018-07-17 09:21:57
    效果展示 代码如下  &lt;template&gt; &lt;Tabs :value="TabPaneValue" class="preparesTree"&gt; &lt;TabPane label="...tree"&gt;

    效果展示

    代码如下 

    <template>
      <Tabs :value="TabPaneValue" class="preparesTree">
        <TabPane label="同步内容" name="Sync">
          <div class="tree">
            <Tree :data="SyncData" ref="SyncTree" :render="renderContent"></Tree>
          </div>
        </TabPane>
        <TabPane label="专题内容" name="Thematic">
          <div class="tree">
            <Tree :data="ThematicData" ref="ThematicTree" :render="renderContent" class="Thematic"></Tree>
            <!-- <Tree :data="ThematicData" @on-select-change="OnSelectChange" ref="ThematicTree"></Tree> -->
          </div>
        </TabPane>
      </Tabs>
    </template>
    
    <script type="text/ecmascript-6">
    import { Tabs, TabPane, Tree } from "iView";
    
    export default {
      name: "PreparesTree",
      data() {
        return {
          SelectClass: "ivu-tree-title ivu-tree-title-selected",
          DefineClass: "ivu-tree-title"
        };
      },
      props: ["SyncData", "ThematicData", "TabPaneValue"],
      components: {
        Tabs: Tabs,
        TabPane: TabPane,
        Tree: Tree
      },
      methods: {
        OnSelectChange(data) {
          // let choicesAll = this.$refs.SyncTree.getCheckedNodes; //方法的运用 getSelectedNodes也是如此用法
          // let getSelectedNodes = this.$refs.SyncTree.getSelectedNodes; //方法的运用 getSelectedNodes也是如此用法
          
          // console.log(choicesAll);
          // console.log(getSelectedNodes);
          // console.log(data);
          // if(data[0].children){
          //   data[0].selected = false;
          //   data[0].expand = !data[0].expand;
          //   return;
          // }
          this.$emit("OnSelectChange", data);
        },
        renderContent(h, { root, node, data }) {
          if (node.node.PrepareTag) {
            if(node.node.IsSelect) {
            return h(
              "span",
              {
                style: {
                  display: "inline-block",
                  width: "100%"
                },
                on: {
                  click: () => {
                    this.OnSelect(node);
                    // this.$emit("OnSelectChange", node);
                  }
                }
              },
              [
                h(
                  "span",
                  {
                    class: ["ivu-tree-title", "ivu-tree-title-selected"],
                    on: {
                      click: event => {
                        var dom = document.getElementsByClassName(
                          "ivu-tree-title-selected"
                        );
                        dom[0].className = this.DefineClass;
                        if(event.target.className == 'ivu-tree-title'){
                          event.target.className = this.SelectClass;
                        }else{
                          event.target.parentNode.className = this.SelectClass;
                        }
                      }
                    }
                  },
                  [
                    h(
                      "span",
                      {
                        style: {
                          marginRight: "4px"
                        }
                      },
                      data.title
                    ),
                    h("img", {
                      attrs: {
                        src: "/static/images/bc_tag.png"
                      },
                      style: {
                        position: 'relative',
                        top: '-1px'
                      }
                    })
                  ]
                )
              ]
            );
          }else{
            return h(
              "span",
              {
                style: {
                  display: "inline-block",
                  width: "100%"
                },
                on: {
                  click: () => {
                    this.OnSelect(node);
                    // this.$emit("OnSelectChange", node);
                  }
                }
              },
              [
                h(
                  "span",
                  {
                    class: ["ivu-tree-title"],
                    on: {
                      click: event => {
                        var dom = document.getElementsByClassName(
                          "ivu-tree-title-selected"
                        );
                        dom[0].className = this.DefineClass;
                        if(event.target.className == 'ivu-tree-title'){
                          event.target.className = this.SelectClass;
                        }else{
                          event.target.parentNode.className = this.SelectClass;
                        }
                      }
                    }
                  },
                  [
                    h(
                      "span",
                      {
                        style: {
                          marginRight: "4px"
                        }
                      },
                      data.title
                    ),
                    h("img", {
                      attrs: {
                        src: "/static/images/bc_tag.png"
                      },
                      style: {
                        position: 'relative',
                        top: '-1px'
                      }
                    })
                  ]
                )
              ]
            );
          }
          }else if(node.node.IsSelect) {
            return h(
              "span",
              {
                style: {
                  display: "inline-block",
                  width: "100%"
                },
                on: {
                  click: () => {
                    this.OnSelect(node);
                    // this.$emit("OnSelectChange", node);
                  }
                }
              },
              [
                h(
                  "span",
                  {
                    class: ["ivu-tree-title", "ivu-tree-title-selected"],
                    on: {
                      click: event => {
                        var dom = document.getElementsByClassName(
                          "ivu-tree-title-selected"
                        );
                        dom[0].className = this.DefineClass;
                        if(event.target.className == 'ivu-tree-title'){
                          event.target.className = this.SelectClass;
                        }else{
                          event.target.parentNode.className = this.SelectClass;
                        }
                      }
                    }
                  },
                  [
                    h(
                      "span",
                      {
                        style: {
                          marginRight: "4px"
                        }
                      },
                      data.title
                    )
                  ]
                )
              ]
            );
          }else {
            return h(
              "span",
              {
                style: {
                  display: "inline-block",
                  width: "100%"
                },
                on: {
                  click: () => {
                    this.OnSelect(node);
                    // this.$emit("OnSelectChange", node);
                  }
                }
              },
              [
                h(
                  "span",
                  {
                    class: ["ivu-tree-title"],
                    on: {
                      click: () => {
                        var dom = document.getElementsByClassName(
                          "ivu-tree-title-selected"
                        );
                        dom[0].className = this.DefineClass;
                        if(event.target.className == 'ivu-tree-title'){
                          event.target.className = this.SelectClass;
                        }else{
                          event.target.parentNode.className = this.SelectClass;
                        }
                      }
                    }
                  },
                  [h("span", data.title)]
                )
              ]
            );
          }
        },
        OnSelect(data) {
          this.$emit("OnSelectChange", data);
        }
      },
      mounted() {}
    };
    </script>
    
    <style lang="scss" scoped="" type="text/css">
    .preparesTree {
      float: left;
      margin-left: 24px;
      height: 440px;
      width: 222px;
      border: 1px solid #e8e8e8;
      .tree {
        width: 222px;
        height: 400px;
        padding: 10px 34px 0 14px;
        // border: 1px solid #e8e8e8;
        border-top: 0px;
        overflow: auto;
      }
    }
    .user-defined-tree {
      background-color: #333;
    }
    </style>
    

     

     

    展开全文
  • iview tree收缩

    2020-09-03 19:57:10
    tree 收缩:默认展开根...function getTree (data) { //data:tree data const arr = []; data.map(item => { let obj = {} obj.title = item.value obj.id = item.id if (item.id === currentId) { obj.s

    tree 收缩:默认展开根目录,当点击子节点时,展开当前父节点

    let currentId = 3; //子节点的父级id
    function getTree (data) { //data:tree data
      const arr = [];
      data.map(item => {
        let obj = {}
        obj.title = item.value
        obj.id = item.id
        if (item.id === currentId) {
          obj.selected = true
          obj.isExpand = true
        }
        if (item.children) {
          obj.children = getTree(item.children)
          const c = obj.children.find(item => item.isExpand)
          if (c) {
            obj.expand = true
            obj.isExpand = true
          }
        }
        arr.push(obj)
      })
      return arr
    }
    
    展开全文
  • iview Tree 右键菜单

    千次阅读 2018-12-25 14:28:11
    最近在使用iview admin3.0做前段UI框架,但是做菜单树的时候发现了一个问题,iviewtree没有右键菜单事件 需要我们自己想办法去实现,今天就来试试吧 整体效果如下   完整代码如下: &lt;style lang=...
  • 设置iview tree选中

    千次阅读 2019-10-21 10:39:55
    // tree 树数据 //ids 要选中节点的id function filterDeviceTree(tree, ids) { let _tree = JSON.parse(JSON.stringify(tree)) if (ids.length == 0) { return _tree } return _tree.filter((item...
  • iView A high quality UI Toolkit built on Vue.js. Docs 3.x | 2.x | 1.x Features Dozens of useful and beautiful components. Friendly API. It's made for people with any skill level. ...
  • IVIEW TREE问题总结

    2019-04-16 14:55:00
    IVIEW TREE问题总结 1. API得到的tree数组数据,在前端构造成iview tree格式,无法编辑或者无法再次选中的问题: 由于VUE不能检测到数据或对象的变动,官网文档有解释 由于 JavaScript 的限制,Vue ...
  • 构造iview Tree结构

    2017-04-14 16:42:00
    工程目录和类结构: 1.Book.java 测试model,包含id和父id还有name。 package com.dlmu.sei; /** * * @author zhangtuo * @Date 2017/4/14 */ public class Book { ...
  • iview Tree组件点击高亮

    千次阅读 2019-04-03 19:01:00
    .selectTreeClass{ background:#ebf7ff; } renderContent(h: any, {root , node, data }: any) { return h(“div”,{ style: { width: “90%”, float:“right”, cursor:“pointer”, padding:“3px”, ...
  • iview Tree组件实现深度查询

    千次阅读 2019-05-09 17:36:00
    iview组件库中的的Tree组件实现深度查询:  1.精确匹配第一个符合条件的节点,并返回整条数据链  2.展开当前节点 1 efficientSearch: function () { 2 var self = this; 3 console.log(self.$refs.tree)...
  • Tree :data="treeData" ref="tree" show-checkbox :check-strictly="true" :check-directly="true" @on-check-change="treeChange" ></Tree> treeData:[ { title:"总分类", id:.
  • iview Tree 树形控件回显问题 问题总结 前端通过后台返回的is_sign是否为1判断被选中的节点,因为tree控件的checked属性导致子节点下is_sign为0 也被选中了。 此次使用了递归遍历每一个节点
  • Tree :data="menus" ref="tree" show-checkbox multiple style="display:inline-block"&gt;&lt;/Tree&gt; export default { data () { return { menus: [] } }, ...
  • Iview <template> <Tree :data="baseData" show-checkbox multiple></Tree> </template> <script> export default { data () { ...
  • 官网不带图标的tree点击样子: 官网带图标点击没有高亮: 我自己搞得高亮: 代码:vue实例外访问可以传出_this,指向vue实例 render(h, { data, root, node }) { return h('span', [ h('Icon', { ...
  • vue iview tree checked改变 不渲染的问题

    千次阅读 2018-06-12 19:42:00
    子级的状态 改为checked=false 需要把父的状态改为 false 转载于:https://www.cnblogs.com/lgjc/p/9174759.html
  • 1、记得添加 ref 2、用 this.$refs.tree.getCheckNodes() 转载于:https://www.cnblogs.com/sweet-ice/p/10605483.html
  • tree控件的checked属性值无法更改 因为与tree控件绑定的数据中 父级的checked为true,所以子级的checked的值无法改为false。需要将父级的checked也改为false
  • Tree组件实现文件目录-基础实现 封装文件目录组件 src\views\folder-tree\folder-tree.vue <template> <div class="folder-wrapper"> <folder-tree :folder-list="folderList" :file-list=...
  • 以下面方法为例 **在页面中使用ref绑定 **而后在methods中放在一个事件中去触发他打印看一下结果 当前勾选一个。点击确定查看输出 输出结果》》》 ok 结束 ...
  • router/router.js { path: 'folder_tree', name: 'folderTree', component: () => import('@/views/folder-tree/folder-tree.vue') } 定义api请求 api/data.js export const getFolderList =...
  • 这样子获取到数据是,checked等于true的,获取不到他的父级,父级的父级 解决办法代码如下: //需要有一个唯一ID //====================================== ... Array.prototype.remove = function (val) { ...

空空如也

1 2 3 4 5 ... 11
收藏数 203
精华内容 81
关键字:

iview tree