vue+elementui implementiert den vollständigen Code zum Hinzufügen und Ändern einer gemeinsamen Bullet-Box

<Vorlage>
  <div>
    <!-- Breadcrumb-Navigation -->
    <el-breadcrumb-Trennzeichen-Klasse="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/Willkommen' }">Startseite</el-breadcrumb-item>
      <el-breadcrumb-item>Berechtigungsverwaltung</el-breadcrumb-item>
      <el-breadcrumb-item>Liste der Rollen</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- Karten -->
    <el-card Klasse="Box-Karte">
      <!-- Schaltfläche „Hinzufügen“-->
      <el-row :gutter="20">
        <el-col :span="6">
          <div Klasse="grid-content bg-purple"></div>
          <el-button type="primary" @click="onhandAdd">Rolle hinzufügen</el-button>
        </el-col>
      </el-row>
      <!-- Tabelle -->
      <el-table :data="tableData" border="" style="width: 100%">
        <el-table-column Typ="erweitern">
          <template slot-scope="Umfang">
            <el-Zeile
              :Klasse="['bdbottom',i1 === 0? 'bdtop' : '', 'vcenter'] "
              :gutter="20"
              :span="6"
              v-for="(item_ong,i1) im Bereich.Zeile.Kinder"
              :Schlüssel="item_ong.id"
            >
              <!-- Ebene 1 -->
              <el-col :span="5">
                <el-tag>{{item_ong.authName}}</el-tag>
                <i class="el-icon-caret-right"></i>
              </el-col>
              <!-- Sekundar- und Tertiärstufe -->
              <el-col :span="19">
                <!-- Berechtigungen der zweiten Ebene-->
                <el-row v-for="(item_two,i2) in item_ong.children" :key="i2">
                  <el-col :span="6">
                    <el-tag type="success">{{item_two.authName}}</el-tag>
                    <i class="el-icon-caret-right"></i>
                  </el-col>
                  <el-col :span="18">
                    <el-tag
                      Typ="Warnung"
                      v-für="(Element_drei,i3) in Element_zwei.Kinder"
                      :Schlüssel="i3"
                    >{{item_three.authName}}</el-tag>
                    <i class="el-icon-caret-right"></i>
                  </el-col>
                </el-row>
              </el-col>
            </el-row>
          </Vorlage>
        </el-Tabellenspalte>
        <el-table-column label="#" type="index" width="80"></el-table-column>
        <el-table-column label="Rollenname" prop="Rollenname"></el-table-column>
        <el-table-column label="Rollenbeschreibung" prop="roleDesc"></el-table-column>
        <el-table-column label="Vorgang" prop="id">
          <template slot-scope="Umfang">
            <el-Schaltfläche
              Typ="primär"
              Symbol="el-icon-edit"
              Größe="klein"
              @click="HandleEdit(Umfang.$index, Umfang.Zeile)"
            >Bearbeiten</el-button>
            <el-button type="warning" icon="el-icon-delete" size="small">Löschen</el-button>
            <el-button type="danger" icon="el-icon-edit" size="small">Berechtigungen</el-button>
          </Vorlage>
        </el-Tabellenspalte>
      </el-Tabelle>
    </el-Karte>
    <!-- Popup-Fenster zum Bearbeiten hinzugefügt-->
    <el-dialog
      :title="Titel hinzufügen"
      :visible.sync="dialogSichtbar"
      Breite="40%"
      :before-close="HandleSchließen"
    >
      <el-form
        :Modell="Regelform"
        :Regeln="Regeln"
        ref="refRegelForm"
        Beschriftungsbreite = "100px"
        Klasse="Demo-Regelformular"
      >
        <el-form-item label="Rollenname" prop="Rollenname">
          <el-input v-model="ruleForm.roleName"></el-input>
        </el-form-item>
        <el-form-item label="Rollenbeschreibung" prop="roleDesc">
          <el-input v-model="ruleForm.roleDesc"></el-input>
        </el-form-item>
      </el-form>
      <span slot="Fußzeile" class="dialog-footer">
        <el-button @click="dialogVisible = false">Abbrechen</el-button>
        <el-button type="primary" @click="dialogVisibleConfirm">Bestätigen</el-button>
      </span>
    </el-dialog>
  </div>
</Vorlage>

<Skript>
Standard exportieren {
  Daten() {
    zurückkehren {
      Tabellendaten: [],
      dialogVisible: false,
      addtitle: "Rolle hinzufügen",
      RegelForm: {
        Rollenname: "",
        roleDesc: ""
      },
      allid: "",
      // Validierungsregeln: {
        Rollenname: [
          { erforderlich: true, Nachricht: "Bitte geben Sie einen Charakternamen ein", Auslöser: "unscharf" },
          { min: 3, max: 5, Nachricht: "Länge liegt zwischen 3 und 5 Zeichen", Auslöser: "unscharf" }
        ],
        roleDesc: [{ erforderlich: true, Nachricht: "Rollenbeschreibung", Auslöser: "unscharf" }]
      }
    };
  },
  erstellt() {
    diese.tabList();
  },
  Methoden: {
    // Tabellenschnittstellenliste tabList() {
      dies.$api.jurisdiction.rolelist().then(res => {
        Konsole.log(res.data.data, "]]]]]]]]");
        diese.tableData = res.data.data;
      });
    },
    // onhandAdd() hinzufügen {
      this.dialogVisible = true;
    },
    handleClose(erledigt) {
      this.dialogVisible = falsch;
    },
    // Handle bearbeitenEdit(index, row) {
      Konsole.log(Index, Zeile.ID);
      this.dialogVisible = true; //Popup-Fenster anzeigen this.ruleForm = row; //Aktuelle Zeilendaten, aktuelle Zeilendaten dem Formular zuweisen this.allid = row.id; //ID global speichern},
    // Bestätigen dialogVisibleConfirm() {
      // Neue Schnittstelle if (!this.allid) {
        dies.$api.jurisdiction.addrole(dieses.ruleForm)
          .then(res => {
            // konsole.log(res,"neu")
            this.$message.success("Erfolgreich hinzugefügt"); //Nachrichtenaufforderung „Erfolgreich hinzugefügt“ this.$refs.refRuleForm.resetFields(); //Tabellendaten löschen this.dialogVisible = false; //Popup-Fenster schließen this.tabList(); //Liste aktualisieren })
          .catch(res => {
            this.$message.error("Hinzufügen fehlgeschlagen");
          });
      } anders {
        //Ändern Sie die Schnittstelle let id = this.allid
        let Parameter = {
          Rollenname:dieses.Regelformular.Rollenname,
          roleDesc:diese.ruleForm.roleDesc,
        }
        dies.$api.jurisdiction.edtrole(id,params)
          .then(res => {
            console.log(res,"ändern")
            this.$message.success("Änderung erfolgreich");
            dies.$refs.refRuleForm.resetFields();
            this.dialogVisible = falsch;
            diese.tabList();
          })
          .catch(res => {
            this.$message.error("Änderung fehlgeschlagen");
          });
      }
    }
  }
};
</Skript>

<Stilbereich>
.bdtop {
  Rahmen oben: 1px durchgezogen #eee;
  Polsterung oben: 10px;
}
.bdbottom {
  Rahmen unten: 1px durchgezogen #eee;
  Polsterung unten: 10px;
  Polsterung oben: 10px;
}
.el-tag {
  Rand: 10px 0px;
}
.vcenter {
  Anzeige: Flex;
  Elemente ausrichten: zentrieren;
}
</Stil>