您好,登录后才能下订单哦!
密码登录
登录注册
点击 登录注册 即表示同意《亿速云用户服务条款》
今天就跟大家聊聊有关使用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>
看完上述内容,你们对使用vue怎么编写一根根树状表格有进一步的了解吗?如果还想了解更多知识或者相关内容,请关注亿速云行业资讯频道,感谢大家的支持。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。