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中音频wavesurfer.js的使用方法
Feb 20 Vue.js
vue中echarts的用法及与elementui-select的协同绑定操作
Nov 17 Vue.js
详解Vue 的异常处理机制
Nov 30 Vue.js
vue基于Echarts的拖拽数据可视化功能实现
Dec 04 Vue.js
vue el-upload上传文件的示例代码
Dec 21 Vue.js
vue中实现点击空白区域关闭弹窗的两种方法
Dec 30 Vue.js
Vue实现摇一摇功能(兼容ios13.3以上)
Jan 26 Vue.js
Vue常用API、高级API的相关总结
Feb 02 Vue.js
vue3中的组件间通信
Mar 31 Vue.js
如何理解Vue简单状态管理之store模式
May 15 Vue.js
Vue-Element-Admin集成自己的接口实现登录跳转
Jun 23 Vue.js
Vue Element plus使用方法梳理
Dec 24 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
Uchome1.2 1.5 代码学习 common.php
2009/04/24 PHP
控制PHP的输出:缓存并压缩动态页面
2013/06/11 PHP
php验证身份证号码正确性的函数
2016/07/20 PHP
Yii实现微信公众号场景二维码的方法实例
2020/08/30 PHP
Expandable &quot;Detail&quot; Table Rows
2007/08/29 Javascript
JS 非图片动态loading效果实现代码
2010/04/09 Javascript
jquery 查找新建元素代码
2010/07/06 Javascript
HTML DOM的nodeType值介绍
2011/03/31 Javascript
jquery.tmpl JQuery模板插件
2011/10/10 Javascript
关于js注册事件的常用方法
2013/04/03 Javascript
用函数模板,写一个简单高效的 JSON 查询器的方法介绍
2013/04/17 Javascript
通过url查找a元素应用案例
2014/04/29 Javascript
JavaScript中的alert()函数使用技巧详解
2014/12/29 Javascript
js实时获取并显示当前时间的方法
2015/07/31 Javascript
全面了解JavaScript对象进阶
2016/07/19 Javascript
轻松掌握JavaScript单例模式
2016/08/25 Javascript
浅谈jquery之on()绑定事件和off()解除绑定事件
2016/10/26 Javascript
jquery删除数组中重复元素
2016/12/05 Javascript
详解webpack+ES6+Sass搭建多页面应用
2018/11/05 Javascript
Node.js 实现远程桌面监控的方法步骤
2019/07/02 Javascript
vue-router定义元信息meta操作
2020/12/07 Vue.js
利用Python中的mock库对Python代码进行模拟测试
2015/04/16 Python
深入讲解Python中面向对象编程的相关知识
2015/05/25 Python
Python lambda函数基本用法实例分析
2018/03/16 Python
利用pyinstaller将py文件打包为exe的方法
2018/05/14 Python
python线程池如何使用
2020/05/28 Python
Python变量格式化输出实现原理解析
2020/08/06 Python
澳大利亚礼品卡商店:Gift Card Store
2019/06/24 全球购物
历史系毕业生自荐信
2013/10/28 职场文书
管理科学大学生求职信
2013/11/13 职场文书
中专毕业生自荐信范文
2013/11/28 职场文书
三好学生先进事迹材料
2014/08/28 职场文书
无房产证房屋转让协议书合同样本
2014/10/18 职场文书
2014年少先队工作总结
2014/12/03 职场文书
2016应届毕业生就业指导课心得体会
2016/01/15 职场文书
MySQL 原理与优化之Limit 查询优化
2022/08/14 MySQL