This article example shares the specific code of Vue to implement the tree table for your reference. The specific content is as follows The effect is as follows:Centered image: The code is as follows:<template> <div class="treeTable"> <table> <tr> <th>Device Type</th> <th>Product Name</th> <th>Version</th> <th>Check item</th> <th>Check subitems</th> <th>Check the major categories</th> <th>Equipment subcategory</th> <th>Remarks</th> </tr> <tbody> <tr v-for="(item,index) in datas" :key="index" v-show="item.display"> <td :style="{paddingLeft:item.left}"><span @click="nodeClick(index)" v-if="item.branch" :class="item.expand? 'expand':'collapse'"></span>{{item.type}}</td> <td>{{item.name}}</td> <td>{{item.version}}</td> <td>{{item.checkItem}}</td> <td>{{item.checkSubItem}}</td> <td v-if="item.branch">{{item.BigItem}}</td> <td v-else><input type="text" v-model="item.BigItem"></td> <td v-if="item.branch">{{item.smallItem}}</td> <td v-else><input type="text" v-model="item.smallItem"></td> <td v-if="item.branch">{{item.remark}}</td> <td v-else><input type="text" v-model="item.remark"></td> </tr> </tbody> </table> </div> </template> <script> /* eslint-disable */ export default { name: 'treeTable', data () { return { msg: 'Welcome to Your Vue.js App', datas:[ {left:'0',branch:true,expand:true,display:true,id:'1',pid:'0',type:'Firewall',name:'',version:'',checkItem:'',checkSubItem:'',BigItem:'',smallItem:'',remark:''}, {left:'0.5rem',branch:true,expand:true,display:true,id:'1_1',pid:'1',type:'Firewall',name:'CE001',version:'',checkItem:'',checkSubItem:'',BigItem:'',smallItem:'',remark:''}, {left:'1rem',branch:true,expand:true,display:true,id:'1_1_1',pid:'1_1',type:'Firewall',name:'CE001',version:'VR001',checkItem:'',checkSubItem:'',BigItem:'',smallItem:'',remark:''}, {left:'1.5rem',branch:true,expand:true,display:true,id:'1_1_1_1',pid:'1_1_1',type:'Firewall',name:'CE001',version:'VR001',checkItem:'Check Item 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:'Firewall',name:'CE001',version:'VR001',checkItem:'Check Item A',checkSubItem:'Check Sub Item A',BigItem:'Software Version',smallItem:'Check Item A',remark:'Remark Information'}, {left:'0',branch:true,expand:true,display:true,id:'2',pid:'0',type:'Data Exchange Center',name:'',version:'',checkItem:'',checkSubItem:'',BigItem:'',smallItem:'',remark:''}, {left:'0.5rem',branch:true,expand:true,display:true,id:'2_1',pid:'2',type:'Data Exchange Center',name:'CE001',version:'',checkItem:'',checkSubItem:'',BigItem:'',smallItem:'',remark:''}, {left:'1rem',branch:true,expand:true,display:true,id:'2_1_1',pid:'2_1',type:'Data Exchange Center',name:'CE001',version:'VR001',checkItem:'',checkSubItem:'',BigItem:'',smallItem:'',remark:''}, {left:'1.5rem',branch:true,expand:true,display:true,id:'2_1_1_1',pid:'2_1_1',type:'Data Exchange Center',name:'CE001',version:'VR001',checkItem:'Check Item 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:'Data Exchange Center',name:'CE001',version:'VR001',checkItem:'Check Item A',checkSubItem:'Check Sub Item A',BigItem:'Software Version',smallItem:'Check Item A',remark:'Remark Information'}, ], } }, methods:{ nodeClick(index){ this.datas[index].expand = this.datas[index].expand ? false : true let pid = this.datas[index].id if (this.datas[index].expand) { for(let i = index +1;i<this.datas.length;i++){ let reg = new RegExp('^'+pid) if (this.datas[i].pid == pid) { this.datas[i].display = true this.datas[i].expand = false }else if(reg.test(this.datas[i].id)){ this.datas[i].display = false this.datas[i].expand = false }else{ break } } }else{ for(let i = index +1;i<this.datas.length;i++){ let reg = new RegExp('^'+pid) if(reg.test(this.datas[i].id)){ this.datas[i].display = false this.datas[i].expand = false }else{ break } } } // for(let i = index +1;i<this.datas.length;i++){ // let reg = new RegExp('^'+pid) // if(reg.test(this.datas[i].id)){ // if(this.datas[index].expand){ // this.datas[i].display = true // }else{ // this.datas[i].display = false // this.datas[i].expand = false // } // } // } } } } </script> <!-- Add "scoped" attribute to limit CSS to this component only --> <style scoped> th,td{ width: 150px; } td:first-child{ text-align: left; } td span{ display: inline-block; width: 1.5rem; height: 1rem; } td span.expand{ background-image: url('./folder_open.png'); } td span.collapse{ background-image: url('./folder.png'); } </style> The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM. You may also be interested in:
|
<<: Detailed explanation of Linux index node inode
>>: Mysql database scheduled backup script sharing
This article installs Google Input Method. In fac...
No gaps on both sides, gaps between each column w...
Just like code, you can add comments to tables an...
Just as the title! The commonly used font-family l...
Preface I am currently working on a high-quality ...
In the front-end design draft, you can often see ...
Create a Directory cd /usr/local/docker/ mkdir je...
1. Call the parent component method directly thro...
Msyql database installation, for your reference, ...
Sometimes the code is lost and you need to recove...
HTTP Header Explanation 1. Accept: Tells the web s...
1. Overview Group by means to group data accordin...
<br />Generally speaking, the file organizat...
Table of contents First, let's briefly introd...
1》Be good at web design 2》Know how to design web p...