详解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 相关文章推荐
jQuery实现切换页面布局使用介绍
Oct 09 Javascript
JavaScript函数的4种调用方法详解
Apr 22 Javascript
jquery zTree异步加载、模糊搜索简单实例分享
Mar 24 Javascript
MvcPager分页控件 适用于Bootstrap
Jun 03 Javascript
纯js实现隔行变色效果
Nov 29 Javascript
vue 实现的树形菜的实例代码
Mar 19 Javascript
bootstrap自定义样式之bootstrap实现侧边导航栏功能
Sep 10 Javascript
React事件处理的机制及原理
Dec 03 Javascript
详解VUE单页应用骨架屏方案
Jan 17 Javascript
vue+element加入签名效果(移动端可用)
Jun 17 Javascript
在Vue mounted方法中使用data变量详解
Nov 05 Javascript
我所理解的JavaScript中的this指向
Sep 04 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
DedeCms模板安装/制作概述
2007/03/11 PHP
Dedecms V3.1 生成HTML速度的优化办法
2007/03/18 PHP
CakePHP去除默认显示的标题及图标的方法
2008/10/22 PHP
基于Snoopy的PHP近似完美获取网站编码的代码
2011/10/23 PHP
php加密解密字符串示例
2016/10/13 PHP
PHP编程中的Session阻塞问题与解决方法分析
2017/08/07 PHP
PHP 实现公历日期与农历日期的互转换
2017/09/13 PHP
laravel 使用auth编写登录的方法
2019/09/30 PHP
YII2框架中behavior行为的理解与使用方法示例
2020/03/13 PHP
按钮JS复制文本框和表格的代码
2011/04/01 Javascript
jquery多行滚动/向左或向上滚动/响应鼠标实现思路及代码
2013/01/23 Javascript
js工具方法弹出蒙版
2013/05/08 Javascript
JQuery的Ajax请求实现局部刷新的简单实例
2014/02/11 Javascript
简单的邮箱登陆的提示效果类似于yahoo邮箱
2014/02/26 Javascript
node.js中的fs.lstat方法使用说明
2014/12/16 Javascript
JavaScript中的变量定义与储存介绍
2014/12/31 Javascript
AngularJS基础知识笔记之表格
2015/05/10 Javascript
Angularjs手动解析表达式($parse)
2016/10/12 Javascript
Bootstrap + AngularJS 实现简单的数据过滤字符查找功能
2017/07/27 Javascript
微信小程序时间戳转日期的详解
2019/04/30 Javascript
vue+Element中table表格实现可编辑(select下拉框)
2020/05/21 Javascript
python中的函数用法入门教程
2014/09/02 Python
Python多线程编程(三):threading.Thread类的重要函数和方法
2015/04/05 Python
python 获取网页编码方式实现代码
2017/03/11 Python
python中for循环输出列表索引与对应的值方法
2018/11/07 Python
Python Django实现layui风格+django分页功能的例子
2019/08/29 Python
Python读取VOC中的xml目标框实例
2020/03/10 Python
Audible英国:有声读物,30天免费试用
2019/10/16 全球购物
关于逃课的检讨书
2014/01/23 职场文书
信息学院毕业生自荐信范文
2014/03/04 职场文书
大学生励志演讲稿
2014/04/25 职场文书
党的群众路线教育实践活动宣传标语口号
2014/06/06 职场文书
中国梦演讲稿开场白
2014/08/28 职场文书
超市七夕促销活动方案
2014/08/28 职场文书
Golang二维切片初始化的实现
2021/04/08 Golang
输入框跟随文字内容适配宽实现示例
2022/08/14 Javascript