Vue Element-ui テーブルはツリー構造テーブルを実現します

この記事では、ツリー構造テーブルを実現するためのElement-uiテーブルの具体的なコードを参考までに共有します。具体的な内容は次のとおりです。

フロントエンドエフェクト表示:

el-tableではツリー型のデータの表示がサポートされています。行に children フィールドが含まれている場合、その行はツリーデータと見なされます。ツリーデータをレンダリングするときは、行キーを指定する必要があります。子ノードデータの非同期読み込みをサポートします。

行の hasChildren フィールドを指定することで、子ノードを含む行を指定できます。 children と hasChildren は両方とも tree-props を介して設定できます。

row-key="id" および :tree-props="{children: 'children', hasChildren: 'hasChildren'} は必須です。

以下は Vue のテーブルツリーです。

 <!--表-->  
       <el-行>
            <el-table :data="tableData" style="width: 100%;" row-key="id" :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
                        <el-table-column prop="privilegeName" label="権限名" >
                        </el-table-column>
                        <el-table-column prop="privilegeCode" label="権限コード" >
                        </el-table-column>
                        <el-table-column prop="privilegeType" label="権限カテゴリ" :formatter="formatPrivilegeType" >
                        </el-table-column>
 
                        <el-table-column label="操作">
                            <テンプレート スロット スコープ="スコープ">
                                
                                <el-button type="primary" size="mini" @click="toAdd(scope)">追加</el-button>
                                <el-button type="primary" size="mini" @click="toEdit(scope)">編集</el-button>
                            </テンプレート>
                        </el-table-column>
                    </el-table>
                    <br>
                    <el-ページネーション
                        @size-change="ハンドルサイズ変更"
                        @current-change="現在の変更を処理する"
                        :current-page="ページ区切りページインデックス"
                        :ページサイズ="[5, 10, 20, 30, 40]"
                        :page-size=ページネーション.ページサイズ
                        レイアウト="合計、前、ページ、次"
                        :total=ページネーション合計>
                    </el-pagination>
</el-row>

バックエンドコード: データ構造クエリを実装するための SpringBoot+MyPlus+MySQL8

すべてのフロントエンドコード:

<スタイル>
</スタイル>
<テンプレート>
  <div id="権限マネージャー">
   <!--トップメニューバー-->
    <el-form :inline="true" class="demo-form-inline">
          <el-form-item>
            <el-ボタン
              クラス="el-icon-refresh"
              タイプ="プライマリ"
              @click="toAdd()">追加</el-button>
          </el-form-item>
      </el-form>
      <!--表-->  
       <el-行>
            <el-table :data="tableData" style="width: 100%;" row-key="id" :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
                        <el-table-column prop="privilegeName" label="権限名" >
                        </el-table-column>
                        <el-table-column prop="privilegeCode" label="権限コード" >
                        </el-table-column>
                        <el-table-column prop="privilegeType" label="権限カテゴリ" :formatter="formatPrivilegeType" >
                        </el-table-column>
 
                        <el-table-column label="操作">
                            <テンプレート スロット スコープ="スコープ">
                                
                                <el-button type="primary" size="mini" @click="toAdd(scope)">追加</el-button>
                                <el-button type="primary" size="mini" @click="toEdit(scope)">編集</el-button>
                            </テンプレート>
                        </el-table-column>
                    </el-table>
                    <br>
                    <el-ページネーション
                        @size-change="ハンドルサイズ変更"
                        @current-change="現在の変更を処理する"
                        :current-page="ページ区切りページインデックス"
                        :ページサイズ="[5, 10, 20, 30, 40]"
                        :page-size=ページネーション.ページサイズ
                        レイアウト="合計、前、ページ、次"
                        :total=ページネーション合計>
                    </el-pagination>
        </el-row>
 
 
  </div>
</テンプレート>
 
<スクリプト>
エクスポートデフォルト{
    名前: '特権マネージャー'、
    データ （） {
     戻る {
        テーブルデータ: [],
        dialogFormEdit: false、
        ダイアログフォーム追加:false、
        特権：
          id: ''、
          権限名: ''、
          特権コード: ''、
          権限タイプ: ''、
          プロセスID: '0'
        },
        ページネーション:
            ページインデックス: 1,
            ページサイズ: 10,
            合計: 0,
        }
      }
    },
    方法:{
         初期化（）{
        var 自己 = これ
         this.$axios({
            メソッド:'post',
            url:'/api/baoan/privilege/getPage',
            データ:{"page":this.pagination.pageIndex,"limit":this.pagination.pageSize, "pid": this.privilege.pid},
            ヘッダー:{
                'Content-Type':'application/json;charset=utf-8' //ここを変更するだけです}
        }).then(res => {
           コンソールログ(res);
           自己ページネーション合計 = res.data.datas.data.total;
           self.tableData = res.data.datas.data.records;
        })
          .catch(関数 (エラー) {
            コンソール.log(エラー)
          })
        },
        ハンドルサイズ変更(val) {
                console.log(`ページあたり${val}項目`);
                this.pagination.pageSize = val;
                this.pagination.pageIndex = 1;
                これを初期化します。
        },
        現在の変更を処理する(val) {
                 console.log(`現在のページ: ${val}`);
                this.pagination.pageIndex = val;
                これを初期化します。
        },
        //権限タイプの変換形式PrivilegeType: function( row, column) {
                 if(row.privilegeType === '1'){
                     'ディレクトリ' を返す
                 } そうでない場合、row.privilegeType === '2' の場合 {
                     'メニュー' を返す
                 } そうでない場合 (row.privilegeType === '3') {
                     'ボタン'を返す
                 } それ以外 {
                     戻る ''
                 }
        }
    },
    マウント: 関数 () {
      この.init()
  }
 
 
}
</スクリプト>