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. 使用

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">

{ { scope.row.likes.join(',') }}

export default {

name: 'example',

data() {

return {

props: {

stripe: false, // 是否显示间隔斑马纹