vue树表格,vue树状菜单效果
这篇文章主要为大家详细介绍了某视频剪辑软件实现树状表格效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了某视频剪辑软件实现树状表格的具体代码，供大家参考，具体内容如下
1. 初始化配置
安装模块：
NPM我爱-带树网格的表格
主页。射流研究…文件
从"带树网格的某视频剪辑软件表"导入ZkTable
Vue.component(ZkTable.name，ZK表)；
2. 使用
模板语言=html
div id=example
z线表
ref=table
index-text=#
:data=data
：列="列"
:stripe=props.stripe
:border=props.border
:show-header=props.showHeader
:show-summary= props。显示摘要
:show-row-hover= props。显示行悬停
:show-index=props.showIndex
:tree-type=props.treeType
:is-fold=props.isFold
:expand-type=props.expandType
:selection-type=道具。选择类型
模板slot=likes scope=scope
{{ scope.row.likes.join(，)}}
/模板
/ZK-表格
/div
/模板
脚本
导出默认值{
名称："示例",
data() {
返回{
道具：{
条纹：假，//是否显示间隔斑马纹
border: true，//是否显示纵向边框
showHeader: true，//是否显示表头
showSummary: false，//是否显示表尾合计行
showRowHover: true，//鼠标悬停时，是否高亮当前行
showIndex: true，//是否显示数据索引
treeType: true，//是否为树形表格
isFold: true，//树形表格中父级是否默认折叠
expandType: false，//是否为展开行类型表格（为真实的时，需要添加名称为$expand 的作用域插槽，它可以获取到行rowIndex)
selectionType: false，//是否为多选类型表格
},
数据：[
{
姓名："杰克",
性别："男性",
喜欢：[足球,篮球],
分数：10,
儿童：[
{
姓名："阿什利",
性别："女性",
喜欢：[足球,篮球],
分数：20,
儿童：[
{
姓名："阿什利",
性别："女性",
喜欢：[足球,篮球],
分数：20,
},
{
姓名：塔基，
性别："男性",
喜欢：[足球,篮球],
分数：10,
儿童：[
{
姓名："阿什利",
性别："女性",
喜欢：[足球,篮球],
分数：20,
},
{
姓名：塔基，
性别："男性",
喜欢：[足球,篮球],
分数：10,
儿童：[
{
姓名："阿什利",
性别："女性",
喜欢：[足球,篮球],
分数：20,
},
{
姓名：塔基，
性别："男性",
喜欢：[足球,篮球],
分数：10,
},
],
},
],
},
],
},
{
姓名：塔基，
性别："男性",
喜欢：[足球,篮球],
分数：10,
},
],
},
{
姓名："汤姆",
性别："男性",
喜欢：[足球,篮球],
分数：20,
儿童：[
{
姓名："阿什利",
性别："女性",
喜欢：[足球,篮球],
分数：20,
儿童：[
{
姓名："阿什利",
性别："女性",
喜欢：[足球,篮球],
分数：20,
},
{
姓名：塔基，
性别："男性",
喜欢：[足球,篮球],
分数：10,
},
],
},
{
姓名：塔基，
性别："男性",
喜欢：[足球,篮球],
分数：10,
儿童：[
{
姓名："阿什利",
性别："女性",
喜欢：[足球,篮球],
分数：20,
},
{
姓名：塔基，
性别："男性",
喜欢：[足球,篮球],
分数：10,
},
],
},
],
},
{
姓名："汤姆",
性别："男性",
喜欢：[足球,篮球],
分数：20,
},
{
姓名："汤姆",
性别："男性",
喜欢：[足球,篮球],
分数：20,
儿童：[
{
姓名："阿什利",
性别："女性",
喜欢：[足球,篮球],
分数：20,
},
{
姓名：塔基，
性别："男性",
喜欢：[足球,篮球],
分数：10,
},
],
},
],
列：[
{
标签:"名称",//列标题名称
属性："名称",//对应列内容的属性名
宽度： 400像素,//列宽度
},
{
标签:"性",
道具："性",
最小宽度： 50像素，
},
{
标签:"分数",
道具："分数",
},
{
标签:"喜欢",
道具："喜欢",
最小宽度： 200像素，
类型："模板",
模板："喜欢",//列类型为模板（自定义列模板)时，对应的作用域插槽（它可以获取到行、行索引、列、列索引)名称
},
],
};
},
};
/脚本
样式范围语言=少
* {
边距：0;
填充：0;
}。开关列表{
边距：20px 0；
列表样式：无；
溢出：隐藏；
}。开关-项目{
边距：20px
浮动：左；
}
/风格
3. 效果
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。