详解Vue.js iview实现树形权限表(可扩展表)


Posted in Javascript onSeptember 30, 2018

问题:

需要一个可折叠的权限管理系统,用表格展示。

主要用的iView组件库,有Table(表格),Tree(树形控件),Collapse(折叠面板)看起来比较符合意思

深入查看Table相关范例,发现有个 通过给 columns 数据设置一项,指定 type: 'expand',即可开启扩展功能  可以考虑

但也只是展开详细内容,如需树形结构,则需要render自定义去渲染,挺麻烦的。再去看看element UI,也没有什么比较好的选择。

过程:

第一步,先构建根节点的数据表,后台返回JSON数据解析(www.json.cn)基本如下

详解Vue.js iview实现树形权限表(可扩展表)

前面2个object和第三个结构基本类似,将数据注入authlist,匹配listcolumns展示

详解Vue.js iview实现树形权限表(可扩展表)

详解Vue.js iview实现树形权限表(可扩展表)

展示结果如下:

详解Vue.js iview实现树形权限表(可扩展表)        

第二步,添加Columns的扩展expand功能,在listcolumns里添加

listcolumns: [{
  title: '序号',
  key: '_index',
  className: 'index_css',
  render: (h, params) = >{
    return h('div', [h('span', {
      style: {
        display: 'inline-block',
        width: '100%',
        overflow: 'hidden',
        textOverflow: 'ellipsis',
        whiteSpace: 'nowrap',
        textAlign: 'center'
      }
    },
    params.row._index)]);
  }
},
{
  //添加的expand      
  type: 'expand',
  width: 20,
  render: (h, params) = >{
    return h(expandRow, {
      style: {
        padding: 0
      },
      props: {
        row: params.row
      }
    })
  }
},
{
  title: '权限名称',
  key: 'Title',
  className: 'Title_css',
  ellipsis: true,
  render: (h, params) = >{
    return h('div', [h('span', {
      style: {

        display: 'inline-block',
        width: '100%',
        overflow: 'hidden',
        textOverflow: 'ellipsis',
        whiteSpace: 'nowrap'
      }
    },
    params.row.Title)]);
  }
},

展示效果:

详解Vue.js iview实现树形权限表(可扩展表)

第三步:authtable_expand.vue子组件,基本和父组件的Table一致

< template > 
<Table stripe: loading = "loading": showHeader = false border: columns = "listcolumns": data = "listauth"style = "overflow-y: hidden;max-height: 522px;" > </Table>
</template > 
<script > 
import expandRow from '../components/authtable_expand.vue';
export
default {
    props: ['row'],
    data() {
      return {
        loading: false,
        listcolumns: [
        //listcolumns暂不展示    
        ],
        listauth: []
      }
    },
    mounted() {},
    methods: {},
    created() {
      //console.log("authotable_expend created: " + JSON.stringify(this.row.children))		
      var object = this.row.children;
      console.log("auth expand data:" + JSON.stringify(object)) this.listauth.splice(0) object.forEach(r = >{
        this.listauth.push(r)
      })
      //console.log("listauth:" + JSON.stringify(this.listauth))	
    }
  }
  < /script>
 <style lang="less">
	td.ivu-table-expanded-cell{	
	padding:0;	
}
</style >

注意,添加td.ivu-table-expanded-cell{padding:0;},可以是扩展部分内容充满全部,展示效果如下

详解Vue.js iview实现树形权限表(可扩展表)

在expand.vue里递归调用自身,可以逐级扩展

总结:

目前在Vue.js的2个主要的前端组件iView和ElementUI都暂时没有看到合适的可扩展的树形表,只有自己编写相关组件来实现。相信以后应该都会有的,就像之前iView多表头都没有,后面也终于添加了。

此外,自定义组合树形权限表还有部分功能没有完善,如:

1如果当前节点没有子节点,就不应该出现扩展的按钮

2扩展按钮最好按照树的深度逐渐向后移动

3序号未按总序号排列

预期结果应该类似于:

详解Vue.js iview实现树形权限表(可扩展表)

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
IE和Firefox在JavaScript应用中的兼容性探讨
Apr 01 Javascript
JS中showModalDialog 的使用解析
Apr 17 Javascript
jQuery中removeAttr()方法用法实例
Jan 05 Javascript
Javascript定义类(class)的三种方法详解
Mar 13 Javascript
js实现刷新页面后回到记录时滚动条的位置【两种方案可选】
Dec 12 Javascript
让bootstrap的carousel支持滑动滚屏的实现代码
Nov 27 Javascript
JavaScript图片处理与合成总结
Mar 04 Javascript
JavaScript实现数组全排列、去重及求最大值算法示例
Jul 30 Javascript
React styled-components设置组件属性的方法
Aug 07 Javascript
json前后端数据交互相关代码
Sep 19 Javascript
vue拖拽组件使用方法详解
Dec 01 Javascript
深入理解令牌认证机制(token)
Aug 22 Javascript
对angularJs中$sce服务安全显示html文本的实例
Sep 30 #Javascript
vue  自定义组件实现通讯录功能
Sep 30 #Javascript
对angularJs中2种自定义服务的实例讲解
Sep 30 #Javascript
angularJs在多个控制器中共享服务数据的方法
Sep 30 #Javascript
iview Upload组件多个文件上传的示例代码
Sep 30 #Javascript
VUE 配置vue-devtools调试工具及安装方法
Sep 30 #Javascript
angularJs中orderBy筛选以及filter过滤数据的方法
Sep 30 #Javascript
You might like
精通php的十大要点(上)
2009/02/04 PHP
windows下升级PHP到5.3.3的过程及注意事项
2010/10/12 PHP
简单的php写入数据库类代码分享
2011/07/26 PHP
叫你如何修改Nginx与PHP的文件上传大小限制
2014/09/10 PHP
Smarty模板变量调节器用法分析
2016/05/23 PHP
PHP使用gearman进行异步的邮件或短信发送操作详解
2020/02/27 PHP
jquery 按钮状态效果 正常、移上、按下
2013/08/12 Javascript
IE8的JavaScript点击事件(onclick)不兼容的解决方法
2013/11/22 Javascript
JavaScript创建一个object对象并操作对象属性的用法
2015/03/23 Javascript
web前端开发JQuery常用实例代码片段(50个)
2015/08/28 Javascript
jQuery判断checkbox选中状态
2016/05/12 Javascript
jquery心形点赞关注效果的简单实现
2016/11/14 Javascript
整理关于Bootstrap导航的慕课笔记
2017/03/29 Javascript
如何在AngularJs中调用第三方插件库
2017/05/21 Javascript
利用canvas中toDataURL()将图片转为dataURL(base64)的方法详解
2017/11/20 Javascript
JavaScript实现多态和继承的封装操作示例
2018/08/20 Javascript
基于JavaScript实现一个简单的Vue
2018/09/26 Javascript
详解vue-router数据加载与缓存使用总结
2018/10/29 Javascript
vue 中基于html5 drag drap的拖放效果案例分析
2018/11/01 Javascript
分享Angular http interceptors 拦截器使用(推荐)
2019/11/10 Javascript
Vue 中使用lodash对事件进行防抖和节流操作
2020/07/26 Javascript
node脚手架搭建服务器实现token验证的方法
2021/01/20 Javascript
[01:00:53]2018DOTA2亚洲邀请赛3月29日 小组赛B组 iG VS Secret
2018/03/30 DOTA
详解Python的Twisted框架中reactor事件管理器的用法
2016/05/25 Python
Python实现网页截图(PyQT5)过程解析
2019/08/12 Python
pytorch载入预训练模型后,实现训练指定层
2020/01/06 Python
线程的基本概念、线程的基本状态以及状态之间的关系
2012/10/26 面试题
企业活动策划方案
2014/06/02 职场文书
机关党总支领导班子整改方案
2014/09/20 职场文书
网球场地租赁协议范本
2014/10/07 职场文书
2014年市场部工作总结
2014/11/25 职场文书
会议接待欢迎词范文
2015/01/26 职场文书
酒店客房服务员岗位职责
2015/04/09 职场文书
门店店长岗位职责
2015/04/14 职场文书
智慧人生:永远不需要向任何人解释你自己
2019/08/20 职场文书
Python中OpenCV实现简单车牌字符切割
2021/06/11 Python