本文实例为大家分享了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,树状表格
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件!
如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
暂无“vue实现树状表格效果”评论...
RTX 5090要首发 性能要翻倍!三星展示GDDR7显存
三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。
首次推出的GDDR7内存模块密度为16GB,每个模块容量为2GB。其速度预设为32 Gbps(PAM3),但也可以降至28 Gbps,以提高产量和初始阶段的整体性能和成本效益。
据三星表示,GDDR7内存的能效将提高20%,同时工作电压仅为1.1V,低于标准的1.2V。通过采用更新的封装材料和优化的电路设计,使得在高速运行时的发热量降低,GDDR7的热阻比GDDR6降低了70%。
更新动态
20240518
20240518
- 诹访内晶子AkikoSuwanai巴赫:小提琴协奏曲《J.S.BachViolinConcertos》(flac)
- 王力宏《十八般武艺》[低速原抓WAV+CUE]
- 王力宏《十八般武艺》[低速原抓WAV+CUE]
- 【爵士乐】VA-2024-ParamountJazzLoungeChillingExperience(FLAC)
- 群星《离歌 网剧原声带》[320K/MP3][249.78MB]
- 群星《离歌 网剧原声带》[FLAC/分轨][538.53MB]
- 群星《承欢记 电视剧影视原声带》[320K/MP3][109.99MB]
- 【欧美乡村】JohnnyLee-2024-13thOfJulyandEmotions(FLAC)
- 【流行爵士】PattiAustin-2024-LoveSongs(FLAC)
- 【爵士乐】VA-2024-SupremeLoungeChillSelectionJazzyVibeTunes(FLAC)
- 群星《承欢记 电视剧影视原声带》[FLAC/分轨][219.8MB]
- 群星《乘风2024 第1期》[320K/MP3][110.09MB]
- 群星《乘风2024 第1期》[FLAC/分轨][322.4MB]
- 【古典音乐】卡拉扬《莫扎特·魔笛(全剧)》2CD.2015[FLAC+CUE整轨]
- Yurika《ただいま》【Hi-Res】24bit-96kHz【flac】