vue实现树状表格效果


Posted in Vue.js onDecember 29, 2020

本文实例为大家分享了vue实现树状表格的具体代码,供大家参考,具体内容如下

1. 初始化配置

安装模块:

npm i vue-table-with-tree-grid -S

main.js 文件

import ZkTable from 'vue-table-with-tree-grid'
Vue.component(ZkTable.name, ZkTable);

2. 使用

<template lang="html">
 <div id="example">
 <zk-table
  ref="table"
  index-text="#"
  :data="data"
  :columns="columns"
  :stripe="props.stripe"
  :border="props.border"
  :show-header="props.showHeader"
  :show-summary="props.showSummary"
  :show-row-hover="props.showRowHover"
  :show-index="props.showIndex"
  :tree-type="props.treeType"
  :is-fold="props.isFold"
  :expand-type="props.expandType"
  :selection-type="props.selectionType">

  <template slot="likes" scope="scope">
  {{ scope.row.likes.join(',') }}
  </template>
 </zk-table>
 </div>
</template>

<script>

 export default {
 name: 'example',

 data() {
  return {
  props: {
   stripe: false, // 是否显示间隔斑马纹
   border: true, // 是否显示纵向边框
   showHeader: true, // 是否显示表头
   showSummary: false, // 是否显示表尾合计行
   showRowHover: true, // 鼠标悬停时,是否高亮当前行
   showIndex: true, // 是否显示数据索引
   treeType: true, // 是否为树形表格
   isFold: true, // 树形表格中父级是否默认折叠
   expandType: false, // 是否为展开行类型表格(为 True 时,需要添加名称为 '$expand' 的作用域插槽, 它可以获取到 row, rowIndex)
   selectionType: false, // 是否为多选类型表格
  },
  data: [
   {
   name: 'Jack',
   sex: 'male',
   likes: ['football', 'basketball'],
   score: 10,
   children: [
    {
    name: 'Ashley',
    sex: 'female',
    likes: ['football', 'basketball'],
    score: 20,
    children: [
     {
     name: 'Ashley',
     sex: 'female',
     likes: ['football', 'basketball'],
     score: 20,
     },
     {
     name: 'Taki',
     sex: 'male',
     likes: ['football', 'basketball'],
     score: 10,
     children: [
      {
      name: 'Ashley',
      sex: 'female',
      likes: ['football', 'basketball'],
      score: 20,
      },
      {
      name: 'Taki',
      sex: 'male',
      likes: ['football', 'basketball'],
      score: 10,
      children: [
       {
       name: 'Ashley',
       sex: 'female',
       likes: ['football', 'basketball'],
       score: 20,
       },
       {
       name: 'Taki',
       sex: 'male',
       likes: ['football', 'basketball'],
       score: 10,
       },
      ],
      },
     ],
     },
    ],
    },
    {
    name: 'Taki',
    sex: 'male',
    likes: ['football', 'basketball'],
    score: 10,
    },
   ],
   },
   {
   name: 'Tom',
   sex: 'male',
   likes: ['football', 'basketball'],
   score: 20,
   children: [
    {
    name: 'Ashley',
    sex: 'female',
    likes: ['football', 'basketball'],
    score: 20,
    children: [
     {
     name: 'Ashley',
     sex: 'female',
     likes: ['football', 'basketball'],
     score: 20,
     },
     {
     name: 'Taki',
     sex: 'male',
     likes: ['football', 'basketball'],
     score: 10,
     },
    ],
    },
    {
    name: 'Taki',
    sex: 'male',
    likes: ['football', 'basketball'],
    score: 10,
    children: [
     {
     name: 'Ashley',
     sex: 'female',
     likes: ['football', 'basketball'],
     score: 20,
     },
     {
     name: 'Taki',
     sex: 'male',
     likes: ['football', 'basketball'],
     score: 10,
     },
    ],
    },
   ],
   },
   {
   name: 'Tom',
   sex: 'male',
   likes: ['football', 'basketball'],
   score: 20,
   },
   {
   name: 'Tom',
   sex: 'male',
   likes: ['football', 'basketball'],
   score: 20,
   children: [
    {
    name: 'Ashley',
    sex: 'female',
    likes: ['football', 'basketball'],
    score: 20,
    },
    {
    name: 'Taki',
    sex: 'male',
    likes: ['football', 'basketball'],
    score: 10,
    },
   ],
   },
  ],
  columns: [
   {
   label: 'name', // 列标题名称
   prop: 'name', // 对应列内容的属性名
   width: '400px', // 列宽度
   },
   {
   label: 'sex',
   prop: 'sex',
   minWidth: '50px',
   },
   {
   label: 'score',
   prop: 'score',
   },
   {
   label: 'likes',
   prop: 'likes',
   minWidth: '200px',
   type: 'template',
   template: 'likes', // 列类型为 'template'(自定义列模板) 时,对应的作用域插槽(它可以获取到 row, rowIndex, column, columnIndex)名称
   },
  ],
  };
 },
 };
</script>

<style scoped lang="less">
 * {
 margin: 0;
 padding: 0;
 }
 .switch-list {
 margin: 20px 0;
 list-style: none;
 overflow: hidden;
 }
 .switch-item {
 margin: 20px;
 float: left;
 }
</style>

3. 效果

vue实现树状表格效果

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

Vue.js 相关文章推荐
vue+vant实现购物车全选和反选功能
Nov 17 Vue.js
vue动态合并单元格并添加小计合计功能示例
Nov 26 Vue.js
Vue 简单实现前端权限控制的示例
Dec 25 Vue.js
如何在vue-cli中使用css-loader实现css module
Jan 07 Vue.js
vue自定义组件实现双向绑定
Jan 13 Vue.js
Vue 3自定义指令开发的相关总结
Jan 29 Vue.js
vue+flask实现视频合成功能(拖拽上传)
Mar 04 Vue.js
vue实现倒计时功能
Mar 24 Vue.js
vue2实现provide inject传递响应式
May 21 Vue.js
使用Vue3+Vant组件实现App搜索历史记录功能(示例代码)
Jun 09 Vue.js
vue中利用mqtt服务端实现即时通讯的步骤记录
Jul 01 Vue.js
vue实力踩坑之push当前页无效
Apr 10 Vue.js
vue实现图书管理系统
Dec 29 #Vue.js
Vue实现随机验证码功能
Dec 29 #Vue.js
vue3+typeScript穿梭框的实现示例
Dec 29 #Vue.js
Vue.extend 登录注册模态框的实现
Dec 29 #Vue.js
vue实现简易的双向数据绑定
Dec 29 #Vue.js
vue中配置scss全局变量的步骤
Dec 28 #Vue.js
为什么推荐使用JSX开发Vue3
Dec 28 #Vue.js
You might like
php中$_SERVER[PHP_SELF] 和 $_SERVER[SCRIPT_NAME]之间的区别
2009/09/05 PHP
PHP 循环删除无限分类子节点的实现代码
2013/06/21 PHP
PHP根据树的前序遍历和中序遍历构造树并输出后序遍历的方法
2017/11/10 PHP
复制Input内容的js代码_支持所有浏览器,修正了Firefox3.5以上的问题
2010/06/21 Javascript
javascript拓展DOM操作 prependChild insertAfert
2010/11/17 Javascript
滚动图片效果 jquery实现回旋滚动效果
2013/01/08 Javascript
Javascript实现简单的富文本编辑器附演示
2014/06/16 Javascript
JavaScript中的迭代器和生成器详解
2014/10/29 Javascript
jquery如何获取元素的滚动条高度等实现代码
2015/10/19 Javascript
JavaScript简单获取页面图片原始尺寸的方法
2016/06/21 Javascript
微信小程序 WXDropDownMenu组件详解及实例代码
2016/10/24 Javascript
jQuery的中 is(':visible') 解析及用法(必看)
2017/02/12 Javascript
ReactNative中使用Redux架构总结
2017/12/15 Javascript
深入理解ES6之数据解构的用法
2018/01/13 Javascript
angularJs-$http实现百度搜索时的动态下拉框示例
2018/02/27 Javascript
Nodejs实现爬虫抓取数据实例解析
2018/07/05 NodeJs
微信小程序自定义底部导航带跳转功能
2018/11/27 Javascript
HTML+JS实现“代码雨”效果源码(黑客帝国文字下落效果)
2020/03/17 Javascript
javascript实现移动端上传图片功能
2020/08/18 Javascript
详解vue修改elementUI的分页组件视图没更新问题
2020/11/13 Javascript
[14:00]DOTA2国际邀请赛史上最长大战 赛后专访B神
2013/08/10 DOTA
Python设计模式之代理模式实例
2014/04/26 Python
Python制作爬虫采集小说
2015/10/25 Python
Python实现读写sqlite3数据库并将统计数据写入Excel的方法示例
2017/08/07 Python
Python3数据库操作包pymysql的操作方法
2018/07/16 Python
python后端接收前端回传的文件方法
2019/01/02 Python
django实现将后台model对象转换成json对象并传递给前端jquery
2020/03/16 Python
Pycharm安装python库的方法
2020/11/24 Python
EJB的激活机制
2013/10/25 面试题
社区学习十八大感想
2014/01/22 职场文书
飞机制造技术专业求职信
2014/07/27 职场文书
作风大整顿心得体会
2014/09/10 职场文书
2014年小学美术工作总结
2014/12/20 职场文书
2015年外贸业务员工作总结范文
2015/05/23 职场文书
地球上的星星观后感
2015/06/02 职场文书
用Python写一个简易版弹球游戏
2021/04/13 Python