Vue Element-ui-Tabelle realisiert Baumstrukturtabelle

 <!--Tabelle-->  
       <el-Zeile>
            <el-table :data="tableData" style="width: 100%;" row-key="id" :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
                        <el-table-column prop="privilegeName" label="Berechtigungsname" >
                        </el-Tabellenspalte>
                        <el-table-column prop="privilegeCode" label="Berechtigungscode" >
                        </el-Tabellenspalte>
                        <el-table-column prop="privilegeType" label="Berechtigungskategorie" :formatter="formatPrivilegeType" >
                        </el-Tabellenspalte>
 
                        <el-table-column label="Vorgang">
                            <template slot-scope="Umfang">
                                
                                <el-button type="primary" size="mini" @click="toAdd(scope)">Hinzufügen</el-button>
                                <el-button type="primary" size="mini" @click="toEdit(scope)">Bearbeiten</el-button>
                            </Vorlage>
                        </el-Tabellenspalte>
                    </el-Tabelle>
                    <br>
                    <el-pagination
                        @size-change="Größenänderungsgriff"
                        @current-change="AktuelleÄnderung handhaben"
                        :aktuelle-seite="pagination.pageIndex"
                        :Seitengrößen="[5, 10, 20, 30, 40]"
                        :Seitengröße=Paginierung.Seitengröße
                        Layout = "Gesamt, Zurück, Pager, Weiter"
                        :total=pagination.total>
                    </el-pagination>
</el-row>

<Stil>
</Stil>
<Vorlage>
  <div id="Berechtigungsmanager">
   <!--Obere Menüleiste-->
    <el-form :inline="true" class="demo-form-inline">
          <el-form-item>
            <el-Schaltfläche
              Klasse="el-icon-refresh"
              Typ="primär"
              @click="toAdd()">Hinzufügen</el-button>
          </el-form-item>
      </el-form>
      <!--Tabelle-->  
       <el-Zeile>
            <el-table :data="tableData" style="width: 100%;" row-key="id" :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
                        <el-table-column prop="privilegeName" label="Berechtigungsname" >
                        </el-Tabellenspalte>
                        <el-table-column prop="privilegeCode" label="Berechtigungscode" >
                        </el-Tabellenspalte>
                        <el-table-column prop="privilegeType" label="Berechtigungskategorie" :formatter="formatPrivilegeType" >
                        </el-Tabellenspalte>
 
                        <el-table-column label="Vorgang">
                            <template slot-scope="Umfang">
                                
                                <el-button type="primary" size="mini" @click="toAdd(scope)">Hinzufügen</el-button>
                                <el-button type="primary" size="mini" @click="toEdit(scope)">Bearbeiten</el-button>
                            </Vorlage>
                        </el-Tabellenspalte>
                    </el-Tabelle>
                    <br>
                    <el-pagination
                        @size-change="Größenänderungsgriff"
                        @current-change="AktuelleÄnderung handhaben"
                        :aktuelle-seite="pagination.pageIndex"
                        :Seitengrößen="[5, 10, 20, 30, 40]"
                        :Seitengröße=Paginierung.Seitengröße
                        Layout = "Gesamt, Zurück, Pager, Weiter"
                        :total=pagination.total>
                    </el-pagination>
        </el-row>
 
 
  </div>
</Vorlage>
 
<Skript>
Standard exportieren{
    Name: "Berechtigungsmanager",
    Daten () {
     zurückkehren {
        Tabellendaten: [],
        dialogFormEdit: false,
        dialogFormAdd:false,
        Privileg:
          Ausweis: '',
          Berechtigungsname: '',
          Berechtigungscode: '',
          Berechtigungstyp: '',
          pid: "0"
        },
        Pagination:
            Seitenindex: 1,
            Seitengröße: 10,
            gesamt: 0,
        }
      }
    },
    Methoden:{
         init () {
        var selbst = dies
         dies.$axios({
            Methode: 'post',
            URL: „/api/baoan/privilege/getPage“,
            Daten: {"Seite": dieser.pagination.pageIndex, "Limit": diese.pagination.pageSize, "pid": dieses.privilege.pid},
            Überschriften:{
                'Content-Type':'application/json;charset=utf-8' //Einfach hier ändern}
        }).dann(res => {
           konsole.log(res);
           selbst.pagination.total = res.data.datas.data.total;
           self.tableData = res.data.datas.data.records;
        })
          .catch(Funktion (Fehler) {
            console.log(Fehler)
          })
        },
        handleSizeChange(Wert) {
                console.log(`${val} Elemente pro Seite`);
                this.pagination.pageSize = Wert;
                diese.pagination.pageIndex = 1;
                dies.init();
        },
        handleCurrentChange(Wert) {
                 console.log(`Aktuelle Seite: ${val}`);
                this.pagination.pageIndex = Wert;
                dies.init();
        },
        //Konvertierung des Berechtigungstyps formatPrivilegeType: function( row, column) {
                 wenn(Zeile.PrivilegeType === '1'){
                     returniere 'Verzeichnis'
                 } sonst wenn(row.privilegeType === '2') {
                     'Menü' zurückgeben
                 } sonst wenn (row.privilegeType === '3') {
                     Zurück-Schaltfläche
                 } anders {
                     zurückkehren ''
                 }
        }
    },
    montiert: Funktion () {
      dies.init()
  }
 
 
}
</Skript>