写点什么

iview 提供的控件 tree

作者:zxhtom
  • 2022 年 9 月 02 日
    江苏
  • 本文字数:2418 字

    阅读完需:约 8 分钟

Tree 树形控件在前端开发中必不可少,对于数据的展示现在网站大都采取树形展示。因为大数据全部展示出来对于用户来说是不友好的。今天我们自己手写一个 Tree 插件。

iview 提供的控件

  • iview 已经很成熟了,如果说我写的控件和 iview 提供的控件谁更好,那肯定是选择 iview , 手写控件只是为了更好的了解 vue 父子组件之间的通信的。 请读者还是不要拿我的控件和 iview 或者其他第三方的去对比。下面我们先来看看 iview 的 Tree 控件如何使用


<template>    <Tree :data="data2" show-checkbox></Tree></template>
<script> export default { data () { return { data2: [ { title: 'parent 1', expand: true, children: [ { title: 'parent 1-1', expand: true, children: [ { title: 'leaf 1-1-1' }, { title: 'leaf 1-1-2' } ] }, { title: 'parent 1-2', expand: true, children: [ { title: 'leaf 1-2-1' }, { title: 'leaf 1-2-1' } ] } ] } ] } } }</script>
复制代码


  • 上述的代码形成的效果如下



  • 在使用 Tree 控件时在 Template 中还有如下树形可以使用(根据自己需求)



  • 然后就是控件的一些事件捕获



  • 子节点的一些设置



  • 对于 iview 的 Tree 总结就是一句话:到位!。在这里小编也推荐大家使用 iview 来开发。这个框架对于后端程序员来说是个福利。因为我们不需要了解太专业的前端的只是就能够满足 80%的需求了。

手写控件

同样的我们先来看看他的用法其实和 iview 一样。用我们封装好的模板就行了。下面是做一个部门树。部门下面挂着人员这个功能。


<zxhtree        v-if="userChange"        class="item"        treekey="deptId"        treename="deptName"        treechildren="children"        :model="deptData"        :ids="sysUserRole.deptIds"        :names="sysUserRole.deptNames"        @keyname="selectedUserObj"></zxhtree>
复制代码


js 就是去填补上述的数据,比如 deptData、sysUserRole 这些。至于这些属性代表什么意思我们先不着急看。先上个效果图。



那么我们的 zxhtree 控件是在哪里注册的呢,这里被我们抽离在 component.js 里。Vue.component('zxhtree', {});继续在 zxhtree 里看除绑定的节点是template: '#tree-template'。tree-template 的模板是在 component.html 中写好的


<script type="text/x-template" id="tree-template">    <div>        <tree-item                class="item"                :treekey="treekey"                v-for="(model, index) in model"                :treename="treename"                :treechildren="treechildren"                :model="model"                :ids="ids"                :names="names"                @keyname="selectedObj"                @data="synchdata"        >        </tree-item>    </div></script>
复制代码


而在 tree-template 用到的 tree-item 控件才是真正的 tree 控件。这里是为了将树形包裹起来,所以才包裹了一层模板。tree-item 对应的模板代码是


<script type="text/x-template" id="item-template">    <ul class="ztree">        <li class="level0" @blur="blur" @focus="focus" tabindex="0" hidefocus="true" treenode="">            <input type="checkbox" :disabled="model.disabled" :ref="model[treename]" :checked="checkStatus" @click="selectedObj"/>            <span title="" @click="toggle" :class="openStatus" treenode_switch=""></span>            <a :class="selectClass" treenode_a="" onclick="" target="_blank" style="" :title="model[treename]">                <span title="" treenode_ico="" class="button ico_open" style=""></span>                <span @dblclick="toggle" class="node_name">{{model[treename]}}</span>            </a>            <tree-item                class="item"                v-show="open"                v-for="(model, index) in model[treechildren]"                :key="index"                :model="model"                :treekey="treekey"                :treename="treename"                :vistreekey="vistreekey"                :vistreename="vistreename"                :treechildren="treechildren"                ref="child"                @keyname="keyname"            >            </tree-item>        </li>    </ul></script>
复制代码


可以很明显的看到这里我们使用了递归进行展示树形结构。因为树形结构你无法确定层级。所以在里面又使用了针对子节点的展示tree-item.


手写控件扩展

发布于: 3 小时前阅读数: 9
用户头像

zxhtom

关注

还未添加个人签名 2019.08.19 加入

还未添加个人简介

评论

发布
暂无评论
iview提供的控件tree_9月月更_zxhtom_InfoQ写作社区