本文实例为大家分享了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,树状表格

免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
评论“vue实现树状表格效果”
暂无“vue实现树状表格效果”评论...

P70系列延期,华为新旗舰将在下月发布

3月20日消息,近期博主@数码闲聊站 透露,原定三月份发布的华为新旗舰P70系列延期发布,预计4月份上市。

而博主@定焦数码 爆料,华为的P70系列在定位上已经超过了Mate60,成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢?

根据目前爆料的消息来看,华为P70系列将推出三个版本,其中P70和P70 Pro采用了三角形的摄像头模组设计,而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智,但辨识度绝对拉满。