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祖孙组件之间的数据传递案例
Dec 07 Vue.js
vue项目中企业微信使用js-sdk时config和agentConfig配置方式详解
Dec 15 Vue.js
Vue仿百度搜索功能
Dec 28 Vue.js
vue.js watch经常失效的场景与解决方案
Jan 07 Vue.js
Vue 事件的$event参数=事件的值案例
Jan 29 Vue.js
Vue CLI中模式与环境变量的深入详解
May 30 Vue.js
Vue中foreach数组与js中遍历数组的写法说明
Jun 05 Vue.js
vue3获取当前路由地址
Feb 18 Vue.js
Vue3中toRef与toRefs的区别
Mar 24 Vue.js
在vue中import()语法不能传入变量的问题及解决
Apr 01 Vue.js
Vue组件化(ref,props, mixin,.插件)详解
May 15 Vue.js
vue/cli 配置动态代理无需重启服务的方法
May 20 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
咖啡店都有些什么常规豆子呢?有什么风味在里面
2021/03/04 咖啡文化
生成卡号php代码
2008/04/09 PHP
Zend Framework教程之响应对象的封装Zend_Controller_Response实例详解
2016/03/07 PHP
提高Laravel应用性能方法详解
2019/06/24 PHP
php给数组赋值的实例方法
2019/09/26 PHP
HTML页面登录时的JS验证方法
2014/05/28 Javascript
JQuery Tips相关(1)----关于$.Ready()
2014/08/14 Javascript
AngularJS快速入门
2015/04/02 Javascript
JavaScript用select实现日期控件
2015/07/17 Javascript
跟我学习javascript的循环
2015/11/18 Javascript
Angularjs中使用Filters详解
2016/03/11 Javascript
jQuery之简单的表单验证实例
2016/07/07 Javascript
浅谈Vuejs Prop基本用法
2017/08/17 Javascript
vue地区选择组件教程详解
2018/05/04 Javascript
微信小程序实现之手势锁功能实例代码
2018/07/19 Javascript
Electron中实现大文件上传和断点续传功能
2018/10/28 Javascript
微信小程序 拍照或从相册选取图片上传代码实例
2019/08/28 Javascript
小程序实现按下录音松开识别语音
2019/11/22 Javascript
Python学习笔记整理3之输入输出、python eval函数
2015/12/14 Python
Windows下Python使用Pandas模块操作Excel文件的教程
2016/05/31 Python
Python模拟登陆淘宝并统计淘宝消费情况的代码实例分享
2016/07/04 Python
windows下ipython的安装与使用详解
2016/10/20 Python
python中子类继承父类的__init__方法实例
2016/12/15 Python
Python实现返回数组中第i小元素的方法示例
2017/12/04 Python
python获取服务器响应cookie的实例
2018/12/28 Python
Django如何将URL映射到视图
2019/07/29 Python
安装Anaconda3及使用Jupyter的方法
2020/10/27 Python
英国领先的高街书籍专家:Waterstones
2018/02/01 全球购物
用Python匹配HTML tag的时候,<.*>和<.*?>有什么区别
2012/11/04 面试题
Unix如何在一行中运行多个命令
2015/05/29 面试题
土木工程应届生求职信
2013/10/31 职场文书
村党支部公开承诺书
2014/05/29 职场文书
2014法院四风问题对照检查材料思想汇报
2014/10/04 职场文书
元宵节晚会主持词
2015/07/01 职场文书
初三化学教学反思
2016/02/22 职场文书
解析python中的jsonpath 提取器
2022/01/18 Python