Vue implements tree table

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

Recommend

Ubuntu 20.04 Chinese input method installation steps

This article installs Google Input Method. In fac...

Implementation of Grid common layout

No gaps on both sides, gaps between each column w...

MySQL table and column comments summary

Just like code, you can add comments to tables an...

Do you know how to optimize loading web fonts?

Just as the title! The commonly used font-family l...

Vue implements online preview of PDF files (using pdf.js/iframe/embed)

Preface I am currently working on a high-quality ...

Practical notes on installing Jenkins with docker-compose

Create a Directory cd /usr/local/docker/ mkdir je...

MySQL 8.0.13 installation and configuration graphic tutorial

Msyql database installation, for your reference, ...

Steps to restore code from a Docker container image

Sometimes the code is lost and you need to recove...

HTTP header information interpretation and analysis (detailed summary)

HTTP Header Explanation 1. Accept: Tells the web s...

Briefly explain the use of group by in sql statements

1. Overview Group by means to group data accordin...

Summary of XHTML application in web design study

<br />Generally speaking, the file organizat...

mysql wildcard (sql advanced filtering)

Table of contents First, let's briefly introd...

7 skills that great graphic designers need to master

1》Be good at web design 2》Know how to design web p...