Vueはツリーテーブルを実装する

<テンプレート>
  <div class="treeTable">
    <テーブル>
      <tr>
        <th>デバイスタイプ</th>
        <th>製品名</th>
        <th>バージョン</th>
        <th>チェック項目</th>
        <th>サブ項目を確認する</th>
        <th>主要カテゴリを確認する</th>
        <th>機器サブカテゴリ</th>
        <th>備考</th>
      </tr>
      <t本文>
        <tr v-for="(item,index) データ内" :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>{{アイテム名}}</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>
    </テーブル>
  </div>
</テンプレート>

<スクリプト>
/* eslint を無効にする */ 
エクスポートデフォルト{
  名前: 'treeTable',
  データ （） {
    戻る {
      メッセージ: 'Vue.js アプリへようこそ',
      データ:[
          {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:'ファイアウォール'、name:'CE001'、version:'VR001'、checkItem:'チェック項目 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:'ファイアウォール'、name:'CE001'、version:'VR001'、checkItem:'チェック項目 A'、checkSubItem:'チェックサブ項目 A'、BigItem:'ソフトウェアバージョン'、smallItem:'チェック項目 A'、remark:'備考情報'}、
          {left:'0'、branch:true、expand:true、display:true、id:'2'、pid:'0'、type:'データ交換センター'、name:'',version:'',checkItem:'',checkSubItem:'',BigItem:'',smallItem:'',remark:''},
          {left:'0.5rem',branch:true,expand:true,display:true,id:'2_1',pid:'2',type:'データ交換センター',name:'CE001',version:'',checkItem:'',checkSubItem:'',BigItem:'',smallItem:'',remark:''},
          {left:'1rem'、branch:true、expand:true、display:true、id:'2_1_1'、pid:'2_1'、type:'データ交換センター'、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:'データ交換センター',name:'CE001',version:'VR001',checkItem:'チェック項目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:'データ交換センター',name:'CE001',version:'VR001',checkItem:'チェック項目A',checkSubItem:'チェックサブ項目A',BigItem:'ソフトウェアバージョン',smallItem:'チェック項目A',remark:'備考情報'},
        ]、
    }
  },
  方法:{
    ノードクリック(インデックス){
      this.datas[index].expand = this.datas[index].expand ? false : true
      pid = this.datas[index].idとします。 
      if (this.datas[index].expand) {
        for(let i = index +1;i<this.datas.length;i++){
          reg = new RegExp('^'+pid) とします。
          if (this.datas[i].pid == pid) {
            this.datas[i].display = true
            this.datas[i].expand = false 
          }そうでない場合、reg.test(this.datas[i].id)){
            this.datas[i].display = false
            this.datas[i].expand = false
          }それ以外{
            壊す
          }
        }
      }それ以外{
        for(let i = index +1;i<this.datas.length;i++){
          reg = new RegExp('^'+pid) とします。
          if(reg.test(this.datas[i].id)){
            this.datas[i].display = false
            this.datas[i].expand = false 
          }それ以外{
            壊す
          }
        }
      }
      // for(let i = index +1;i<this.datas.length;i++){
      // reg = new RegExp('^'+pid) とします
      // if(reg.test(this.datas[i].id)){
      // if(this.datas[index].expand){
      // this.datas[i].display = true
      // }それ以外{
      // this.datas[i].display = false
      // this.datas[i].expand = false 
      // }
      // }
      // }
    }
  }
}
</スクリプト>
<!-- CSS をこのコンポーネントのみに制限するために "scoped" 属性を追加します -->
<スタイルスコープ>
th、td{
  幅: 150ピクセル;
}
td:最初の子{
  テキスト配置: 左;
}
td スパン{
  表示: インラインブロック;
  幅: 1.5rem;
  高さ: 1rem;
}
td span.expand{
  背景画像: url('./folder_open.png');
}
td span.collapse{
  背景画像: url('./folder.png');
}
</スタイル>