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实现树状表格效果 的全部内容, 来源链接: utcz.com/p/238773.html

回到顶部