域名預(yù)訂/競(jìng)價(jià)，好“米”不錯(cuò)過

這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)樹狀表格效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了vue實(shí)現(xiàn)樹狀表格的具體代碼，供大家參考，具體內(nèi)容如下

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, // 是否顯示表尾合計(jì)行
showRowHover: true, // 鼠標(biāo)懸停時(shí)，是否高亮當(dāng)前行
showIndex: true, // 是否顯示數(shù)據(jù)索引
treeType: true, // 是否為樹形表格
isFold: true, // 樹形表格中父級(jí)是否默認(rèn)折疊
expandType: false, // 是否為展開行類型表格（為 True 時(shí)，需要添加名稱為 '$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', // 列標(biāo)題名稱
prop: 'name', // 對(duì)應(yīng)列內(nèi)容的屬性名
width: '400px', // 列寬度
},
{
label: 'sex',
prop: 'sex',
minWidth: '50px',
},
{
label: 'score',
prop: 'score',
},
{
label: 'likes',
prop: 'likes',
minWidth: '200px',
type: 'template',
template: 'likes', // 列類型為 'template'(自定義列模板) 時(shí)，對(duì)應(yīng)的作用域插槽（它可以獲取到 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. 效果

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

來源：腳本之家

鏈接：

申請(qǐng)創(chuàng)業(yè)報(bào)道，分享創(chuàng)業(yè)好點(diǎn)子。點(diǎn)擊此處，共同探討創(chuàng)業(yè)新機(jī)遇！