详解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 相关文章推荐
JavaScript 拖拉缩放效果
Dec 10 Javascript
Bootstrap被封装的弹层
Jul 20 Javascript
vue.js 1.x与2.0中js实时监听input值的变化
Mar 15 Javascript
JavaScript之filter_动力节点Java学院整理
Jun 28 Javascript
基于匀速运动的实例讲解(侧边栏,淡入淡出)
Oct 17 Javascript
JS排序算法之希尔排序与快速排序实现方法
Dec 12 Javascript
Javascript格式化并高亮xml字符串的方法及注意事项
Aug 13 Javascript
如何为你的JS项目添加智能提示与类型检查详解
Mar 12 Javascript
详解JQuery基础动画操作
Apr 12 jQuery
js+HTML5 canvas 实现简单的加载条(进度条)功能示例
Jul 16 Javascript
Webpack中loader打包各种文件的方法实例
Sep 03 Javascript
如何利用 JS 脚本实现网页全自动秒杀抢购功能
Oct 12 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 伪造本地文件包含漏洞的代码
2011/11/03 PHP
php数组函数序列之in_array() - 查找数组中是否存在指定值
2011/11/07 PHP
Thinkphp中的volist标签用法简介
2014/06/18 PHP
javascript 日期时间函数(经典+完善+实用)
2009/05/27 Javascript
jquery插件制作简单示例说明
2012/02/03 Javascript
使用js判断当前时区TimeZone是否是夏令时
2014/02/23 Javascript
使用js操作css实现js改变背景图片示例
2014/03/10 Javascript
用js通过url传参把数据从一个页面传到另一个页面
2014/09/01 Javascript
分享12个实用的jQuery代码片段
2016/03/09 Javascript
JavaScript学习笔记整理_关于表达式和语句
2016/09/19 Javascript
Angularjs实现带查找筛选功能的select下拉框示例代码
2016/10/04 Javascript
js提示框替代系统alert,自动关闭alert对话框的实现方法
2016/11/07 Javascript
Vue.js -- 过滤器使用总结
2017/02/18 Javascript
Angular2利用组件与指令实现图片轮播组件
2017/03/27 Javascript
JS实现的随机排序功能算法示例
2017/06/09 Javascript
利用vscode调试编译后的js代码详解
2018/05/14 Javascript
vue项目实现表单登录页保存账号和密码到cookie功能
2018/08/31 Javascript
微信小程序实现拍照画布指定区域生成图片
2019/07/18 Javascript
如何搭建一个完整的Vue3.0+ts的项目步骤
2020/10/18 Javascript
天翼开放平台免费短信验证码接口使用实例
2013/12/18 Python
浅谈Python生成器generator之next和send的运行流程(详解)
2017/05/08 Python
Python装饰器实现几类验证功能做法实例
2017/05/18 Python
python各层级目录下import方法代码实例
2020/01/20 Python
Python matplotlib模块及柱状图用法解析
2020/08/10 Python
韩国休闲女装品牌网站:ANAIS
2016/08/24 全球购物
项目计划书范文
2014/01/09 职场文书
运动会800米加油稿
2014/02/22 职场文书
投标承诺书范本
2014/03/27 职场文书
2014和解协议书范文
2014/09/15 职场文书
2014党支部对照检查材料思想汇报
2014/10/05 职场文书
商场营业员岗位职责
2015/04/14 职场文书
从严治党主题教育活动总结
2015/05/07 职场文书
2015年图书馆个人工作总结
2015/05/26 职场文书
解析Java异步之call future
2021/06/14 Java/Android
spring cloud 配置中心客户端启动遇到的问题
2021/09/25 Java/Android
Java时间工具类Date的常用处理方法
2022/05/25 Java/Android