Vue implements tree table

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:

Vue+element UI realizes tree table
Detailed explanation of vue-cli+element-ui tree table (multi-level table toss subtotal)
Example code for implementing a tree table with checkboxes using vue+element UI
Detailed explanation of draggable tree table example based on Vue

<<: Detailed explanation of Linux index node inode

>>: Mysql database scheduled backup script sharing