Vue implementiert Baumtabelle

<Vorlage>
  <div Klasse="Baumtabelle">
    <Tabelle>
      <tr>
        <th>Gerätetyp</th>
        <th>Produktname</th>
        <th>Version</th>
        <th>Artikel prüfen</th>
        <th>Unterpunkte prüfen</th>
        <th>Überprüfen Sie die Hauptkategorien</th>
        <th>Unterkategorie Ausrüstung</th>
        <th>Bemerkungen</th>
      </tr>
      <tbody>
        <tr v-for="(Element, Index) in Daten" :key="Index" v-show="Element.Anzeige">
          <td :style="{paddingLeft:item.left}"><span @click="nodeClick(index)" v-if="item.branch" :class="item.expand? 'expand':'collapse'"></span>{{item.type}}</td>
          <td>{{Artikelname}}</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 Typ="Text" v-Modell="Artikel.Remark"></td>
        </tr>
      </tbody>
    </Tabelle>
  </div>
</Vorlage>

<Skript>
/* eslint-deaktivieren */ 
Standard exportieren {
  Name: "Baumtabelle",
  Daten () {
    zurückkehren {
      msg: 'Willkommen bei Ihrer Vue.js-App',
      Daten:[
          {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:'Element A prüfen',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:'Element A prüfen',checkSubItem:'Unterelement A prüfen',BigItem:'Softwareversion',smallItem:'Element A prüfen',remark:'Bemerkungsinformationen'},
          {left:'0',branch:true,expand:true,display:true,id:'2',pid:'0',type:'Datenaustauschzentrum',name:'',version:'',checkItem:'',checkSubItem:'',BigItem:'',smallItem:'',remark:''},
          {left:'0.5rem',branch:true,expand:true,display:true,id:'2_1',pid:'2',type:'Datenaustauschzentrum',name:'CE001',version:'',checkItem:'',checkSubItem:'',BigItem:'',smallItem:'',remark:''},
          {left:'1rem',branch:true,expand:true,display:true,id:'2_1_1',pid:'2_1',type:'Datenaustauschzentrum',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:'Datenaustauschzentrum',name:'CE001',version:'VR001',checkItem:'Element A prüfen',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:'Element A prüfen',checkSubItem:'Unterelement A prüfen',BigItem:'Softwareversion',smallItem:'Element A prüfen',remark:'Bemerkungsinformationen'},
        ],
    }
  },
  Methoden:{
    KnotenKlick(Index){
      dies.datas[index].expand = dies.datas[index].expand ? false : wahr
      let pid = this.datas[index].id 
      wenn (diese.datas[index].expand) {
        für (lass i = Index +1; i < this.datas.length; i++) {
          lass reg = neuer RegExp('^'+pid)
          wenn (diese.datas[i].pid == pid) {
            diese.datas[i].display = true
            diese.datas[i].expand = false 
          }sonst wenn(reg.test(this.datas[i].id)){
            diese.datas[i].display = false
            diese.datas[i].expand = false
          }anders{
            brechen
          }
        }
      }anders{
        für (lass i = Index +1; i < this.datas.length; i++) {
          lass reg = neuer RegExp('^'+pid)
          wenn(reg.test(this.datas[i].id)){
            diese.datas[i].display = false
            diese.datas[i].expand = false 
          }anders{
            brechen
          }
        }
      }
      // für (let i = index +1;i<this.datas.length;i++){
      // lass reg = neuer RegExp('^'+pid)
      // wenn(reg.test(this.datas[i].id)){
      // wenn(this.datas[index].expand){
      // diese.datas[i].display = true
      // }anders{
      // diese.datas[i].display = false
      // diese.datas[i].expand = false 
      // }
      // }
      // }
    }
  }
}
</Skript>
<!-- Fügen Sie das Attribut „scoped“ hinzu, um CSS nur auf diese Komponente zu beschränken -->
<Stilbereich>
th,td{
  Breite: 150px;
}
td:erstes-Kind{
  Textausrichtung: links;
}
td Spanne {
  Anzeige: Inline-Block;
  Breite: 1,5rem;
  Höhe: 1rem;
}
td span.expand{
  Hintergrundbild: URL('./folder_open.png');
}
td span.collapse{
  Hintergrundbild: URL('./folder.png');
}
</Stil>