vue实现树状表格效果
互联网品牌圈关注到vue实现树状表格效果
这篇文章主要为大家详细介绍了vue实现树状表格效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了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实现树状表格效果有什么看法呢？互联网品牌制作专家愿与您共同探讨！版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请加微信号oem365 举报，一经查实，本站将立刻删除。上一篇: 微信小程序实现下拉加载更多商品 返 回 下一篇:Vue简单实现前端权限控制的示例
