精华内容
下载资源
问答
  • 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 枝,所以较为方便做判断

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

    展开全文
  • 每年的八月份都是我司封闭开发的 大(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问题总结

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

    1. API得到的tree数组数据,在前端构造成iview tree格式,无法编辑或者无法再次选中的问题:

    • 由于VUE不能检测到数据或对象的变动,官网文档有解释

      由于 JavaScript 的限制,Vue 不能检测以下变动的数组:
      • 当你利用索引直接设置一个项时,例如:vm.items[indexOfItem] = newValue
      • 当你修改数组的长度时,例如:vm.items.length = newLength
        可以使用如下代码解决数组的变动
        vm.$set(vm.items, indexOfItem, newValue)

    2. TREE父级checked选中的情况下,即使子集中有checked为false的项,默认也是显示为选中的,所以数据保存中如果子项有未选中的,父级不要默认选中。

    • 这个问题一般会在开发页面时让人挠头,但使用iview tree保存成功后自然就会是正确的选中状态了。
    posted on 2019-04-16 14:55 立天 阅读(...) 评论(...) 编辑 收藏

    转载于:https://www.cnblogs.com/skyhome/p/10717091.html

    展开全文
  • iview Tree 模糊搜索

    2020-12-16 16:11:40
    iview Tree 模糊搜索,返回符合条件的节点,和整条数据链 <Input v-model="searchWord" @on-enter='searchTree(value,treeListInit)' /> <Tree :data="treeList && treeList.length > 0 ? ...

    iview Tree 模糊搜索,返回符合条件的节点,和整条数据链

    <Input v-model="searchWord" @on-enter='searchTree(value,treeList)' />
    <Tree :data="treeList && treeList.length > 0 ? treeList:[]" ></Tree>
    
    export default {
        name: 'selectTreePage',
        data() {
            return {
            	value:'',
            	treeList:[],
            	treeListInit:[],
            	arr: [ //可参考的数据结构
    				{
    					name: 'a1',
    					children: [
    						{
    							name: 'a11',
    							children: null
    						},
    						{
    							name: 'a22',
    							children: null
    						}
    					]
    				},
    				{
    					name: 'b1',
    					children: [
    						{
    							name: 'b11',
    							children: null
    						}
    					]
    				},
    				{
    					name: 'c1',
    					children: null
    				}
    			],
            }
        },
         methods:{
         	searchTree(value, arr){ 
                if (!value) { //内容为空时,查询所有
                    this.getTreeList()
                }
                const rebuildData=(value, treeList) => {
                    let newarr = [];
                    arr.forEach(element => {
                        if (element.children && element.children.length) {
                            if (element.name.indexOf(value) > -1) {
                                element.expand = true;
                                newarr.push(element);
                            }
                            const ab = rebuildData(value,element.children);
                            const obj = {
                                ...element,
                                expand: true,
                                children: ab
                            };
                            if (ab && ab.length) {
                                newarr.push(obj);
                            }
                        } else {
                            if (element.name.indexOf(value) > -1) {
                                newarr.push(element);
                            }
                        }
                    });
                    return newarr;
                };
                this.treeList = [];
                this.treeList = rebuildData(value, arr);
            }
         },
          getTreeList(){ //获取tree数据
    	        ...... 
    	        // res => data 
    	        // this.treeList = data.data;
    	        // this.treeListInit= data.data;
           }
    }	
    	
           
    
    展开全文
  • iview Tree 父子联动

    2020-12-21 15:59:51
    iview Tree 父子联动 <template> <div> <Checkbox v-model="select" @on-change="changeSelectAll">全选</Checkbox> <Checkbox v-model="connect" @on-change="changeConnectAll">...
  • iview Tree 树形控件回显问题

    千次阅读 2020-06-20 22:46:04
    iview Tree 树形控件回显问题 问题总结 前端通过后台返回的is_sign是否为1判断被选中的节点,因为tree控件的checked属性导致子节点下is_sign为0 也被选中了。 此次使用了递归遍历每一个节点
  • 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
  • iView Tree 自定义

    千次阅读 2018-07-17 09:21:57
    效果展示 代码如下  &lt;template&gt; &lt;Tabs :value="TabPaneValue" class="preparesTree"&gt; &lt;TabPane label="...tree"&gt;
  • 设置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 tree组件 loadData 异步加载事件中遇到的小问题,记录下来以免忘记 :data=“treeData” 指的是需要渲染的树结构,由于是使用异步加载.所以需要留一个初始值作为入口. treeData: { id: 0, title: ‘root’, ...
  • iview Tree 右键菜单

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

    2021-03-29 15:02:15
    iview 框架 Tree组件自定义列需求场景追加内容 需求场景 最近在公司开发使用iview组件的vue项目时 , 产品提了一个新的需求再原有的树形菜单上 添加自定义的状态 (红框) 之前尝试做过ivew的树形菜单Tree组件增加...
  • iview tree组件鼠标移入显示新增、删除等按钮功能的实现 定义鼠标移入(mouseenter)移出事件(mouseleave)或者点击事件(click),方法里面改变数据属性is_show来控制按钮显示隐藏
  • Tree :data="treeData" ref="tree" show-checkbox :check-strictly="true" :check-directly="true" @on-check-change="treeChange" ></Tree> treeData:[ { title:"总分类", id:.
  • 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)...
  • 构造iview Tree结构

    2017-04-14 16:42:00
    * iviewtree格式 * @author zhangtuo * @Date 2017/4/14 */ public class TreeNode { private String title; private boolean extend;//是否扩展 private List<TreeNode> childrens; public String ...
  • 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”, ...
  • /** * iviewtree格式 * @author zhangtuo * @Date 2017/4/14 */ public class TreeNode { private String title; private boolean extend;//是否扩展 private List childrens; public String getTitle() { return...
  • Iview <template> <Tree :data="baseData" show-checkbox multiple></Tree> </template> <script> export default { data () { ...
  • 问题描述: iviewTree组件的数据格式跟后台给的数据不一致,数据是根据id与parentid进行来进行分层级关系的,需要自己处理一下 iviewtree 数据格式 1, 数据格式,根据id和pid进行层级关系对比,pid不存在或者为0时...
  • Tree :data="menus" ref="tree" show-checkbox multiple style="display:inline-block"></Tree> export default { data () { return { menus: [] } }, created() { this.getTree() }, methods: {...

空空如也

空空如也

1 2 3 4 5 ... 14
收藏数 278
精华内容 111
关键字:

iviewtree