杰网资源 Design By www.escxy.com
本文实例为大家分享了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,树状表格
杰网资源 Design By www.escxy.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
杰网资源 Design By www.escxy.com
暂无评论...
RTX 5090要首发 性能要翻倍！三星展示GDDR7显存
三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。
首次推出的GDDR7内存模块密度为16GB，每个模块容量为2GB。其速度预设为32 Gbps（PAM3），但也可以降至28 Gbps，以提高产量和初始阶段的整体性能和成本效益。
据三星表示，GDDR7内存的能效将提高20%，同时工作电压仅为1.1V，低于标准的1.2V。通过采用更新的封装材料和优化的电路设计，使得在高速运行时的发热量降低，GDDR7的热阻比GDDR6降低了70%。