vue树形表格,vue树表格
这篇文章主要为大家详细介绍了某视频剪辑软件实现树形表格，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了某视频剪辑软件实现树形表格的具体代码，供大家参考，具体内容如下
效果如下：
居中的图片：
代码如下：
模板
div class=treeTable
桌子
tr
泰国(泰国)设备类型/th
泰国(泰国)产品名称/th
泰国(泰国)版本/th
泰国(泰国)检查项/th
泰国(泰国)检查子项/th
泰国(泰国)检查大类/th
泰国(泰国)设备小类/th
泰国(泰国)备注/th
/tr
在需要分行下载处加上
tr v-for=(item，index)in datas :key= index v-show= item。显示
TD:style=“{ padding left:item。left } span @ click= node click(index) v-if=项。 branch :class= item。“扩张？”展开:折叠/span{{item.type}}/td
td{{item.name}}/td
td{{item.version}}/td
td{{item.checkItem}}/td
td{{item.checkSubItem}}/td
TD v-if= item。分支“{ item .BigItem}}/td
TD v-else输入type= text v-model= item .BigItem/td
TD v-if= item。分支“{ item。小项} }/TD
TD v-else输入type= text v-model= item。小件/TD
TD v-if= item。分支“{ item。备注} }/TD
TD v-else输入type= text v-model= item。备注/TD
/tr
/tbody
/表格
/div
/模板
脚本
/* eslint-disable */
导出默认值{
名称：树表，
data () {
返回{
消息："欢迎使用您的vue . j应用",
数据：[
{left:0 ，branch:true，expand:true，display:true，id:1 ，pid:0 ，type:防火墙，名称：,版本：,检查项：,检查子项：,大项：,小项：,备注： },
{left:0.5rem ，branch:true，expand:true，display:true，id:1_1 ，pid:1 ，type:防火墙，名称：“CE001”，版本："",检查项："",检查子项："",大项："",小项："",备注："},
{left:1rem ，branch:true，expand:true，display:true，id:1_1_1 ，pid:1_1 ，type:防火墙，名称： CE001 ，版本： VR001 ，检查项：,检查子项：,大项：,小项：,备注： },
{left:1.5rem ，branch:true，expand:true，display:true，id:1_1_1_1 ，pid:1_1_1 ，type:防火墙，名称： CE001 ，版本： VR001 ，检查项：检查项a ，checkSubItem: ，BigItem: ，smallItem: ，remark:}，
{left:3rem ，branch:false，expand:true，display:true，id:1_1_1_1_1 ，pid:1_1_1_1 ，type:防火墙，名称： CE001 ，版本： VR001 ，检查项：检查项 a ，checkSubItem:检查子项a ，BigItem:软件版本，smallItem:检查项一个，备注：备注信息},
{left:0 ，branch:true，expand:true，display:true，id:2 ，pid:0 ，type:数据交换中心，名称：,版本：,检查项：,检查子项：,大项：,小项：,备注： },
{left:0.5rem ，branch:true，expand:true，display:true，id:2_1 ，pid:2 ，type:数据交换中心，名称：“CE001”，版本："",检查项："",检查子项："",大项："",小项："",备注："},
{left:1rem ，branch:true，expand:true，display:true，id:2_1_1 ，pid:2_1 ，type:数据交换中心，名称： CE001 ，版本： VR001 ，检查项：,检查子项：,大项：,小项：,备注： },
{left:1.5rem ，branch:true，expand:true，display:true，id:2_1_1_1 ，pid:2_1_1 ，type:数据交换中心，名称： CE001 ，版本： VR001 ，检查项：检查项a ，checkSubItem: ，BigItem: ，smallItem: ，remark:}，
{left:3rem ，branch:false，expand:true，display:true，id:2_1_1_1_1 ，pid:2_1_1_1 ，type:数据交换中心，名称： CE001 ，版本： VR001 ，检查项：检查项 a ，checkSubItem:检查子项a ，BigItem:软件版本，smallItem:检查项一个，备注：备注信息},
],
}
},
方法：{
节点单击(索引){
this.datas[index].expand=this.datas[index].扩张？假：真
设pid=this.datas[index].编号
if(this.datas[index].展开){
对于(设我=索引1;这是。数据。长度；i ){
让reg=新RegExp(^ pid)
if(this.datas[i].pid==pid){
this.datas[i].显示=真
this.datas[i].expand=false
}else if(reg.test(this.datas[i].id)){
this.datas[i].显示=假
this.datas[i].expand=false
}否则{
破裂
}
}
}否则{
对于(设我=索引1;这是。数据。长度；i ){
让reg=新RegExp(^ pid)
if(reg.test(this.datas[i].id)){
this.datas[i].显示=假
this.datas[i].expand=false
}否则{
破裂
}
}
}
//for(设我=索引1;这是。数据。长度；i ){
//让reg=新RegExp(^ pid)
//if(reg.test(this.datas[i].id)){
//if(this.datas[index].展开){
//this.datas[i].显示=真
//}其他{
//this.datas[i].显示=假
//this.datas[i].expand=false
//}
//}
//}
}
}
}
/脚本
！-添加"限定范围"属性以将半铸钢钢性铸铁(Cast Semi-Steel)仅限制到此组件-
样式范围
th，td{
宽度：150像素
}
td:第一胎{
文本对齐：左对齐；
}
任务描述跨度{
显示：内嵌-块；
宽度：1.5雷姆；
身高：1雷姆；
}
td span .扩展
背景图像：url( ./folder _ open。png’)；
}
td span.collapse{
背景图像：url( ./文件夹。png’)；
}
/风格
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。