vue+elementuiは、共有箇条書きボックスの追加と変更の完全なコードを実装します。

<テンプレート>
  <div>
    <!-- パンくずナビゲーション -->
    <el-breadcrumb セパレータークラス="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/Welcome' }">ホーム</el-breadcrumb-item>
      <el-breadcrumb-item>権限管理</el-breadcrumb-item>
      <el-breadcrumb-item>ロールのリスト</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- カード -->
    <el-card クラス="ボックスカード">
      <!-- 追加ボタン-->
      <el-row :gutter="20">
        <el-col :span="6">
          <div class="grid-content bg-purple"></div>
          <el-button type="primary" @click="onhandAdd">役割を追加</el-button>
        </el-col>
      </el-row>
      <!-- 表 -->
      <el-table :data="テーブルデータ" border="" style="幅: 100%">
        <el-table-column type="expand">
          <テンプレート スロット スコープ="スコープ">
            <el-row
              :class="['bdbottom',i1 === 0? 'bdtop' : '', 'vcenter'] "
              :ガター="20"
              :span="6"
              v-for="(item_ong,i1) スコープ内の行の子"
              :key="item_ong.id"
            >
              <!-- レベル 1 -->
              <el-col :span="5">
                <el-tag>{{item_ong.authName}}</el-tag>
                <i class="el-icon-caret-right"></i>
              </el-col>
              <!-- 中等教育および高等教育レベル -->
              <el-col :span="19">
                <!-- 第 2 レベルの権限 -->
                <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タグ
                      タイプ="警告"
                      v-for="(item_three,i3) in item_two.children"
                      :key="i3"
                    >{{item_three.authName}}</el-tag>
                    <i class="el-icon-caret-right"></i>
                  </el-col>
                </el-row>
              </el-col>
            </el-row>
          </テンプレート>
        </el-table-column>
        <el-table-column ラベル="#" タイプ="インデックス" 幅="80"></el-table-column>
        <el-table-column label="ロール名" prop="roleName"></el-table-column>
        <el-table-column label="役割の説明" prop="roleDesc"></el-table-column>
        <el-table-column label="操作" prop="id">
          <テンプレート スロット スコープ="スコープ">
            <el-ボタン
              タイプ="プライマリ"
              アイコン="el-icon-edit"
              サイズ="小"
              @click="handleEdit(scope.$index, scope.row)"
            >編集</el-button>
            <el-button type="warning" icon="el-icon-delete" size="small">削除</el-button>
            <el-button type="danger" icon="el-icon-edit" size="small">権限</el-button>
          </テンプレート>
        </el-table-column>
      </el-table>
    </el-card>
    <!-- 編集ポップアップ ボックスを追加しました -->
    <el-ダイアログ
      :title="タイトルを追加"
      :visible.sync="ダイアログを表示"
      幅="40%"
      :before-close="ハンドルを閉じる"
    >
      <el-フォーム
        :model="ルールフォーム"
        :rules="ルール"
        ref="refルールフォーム"
        ラベル幅="100px"
        クラス="デモルールフォーム"
      >
        <el-form-item label="ロール名" prop="roleName">
          <el-input v-model="ruleForm.roleName"></el-input>
        </el-form-item>
        <el-form-item label="役割の説明" prop="roleDesc">
          <el-input v-model="ruleForm.roleDesc"></el-input>
        </el-form-item>
      </el-form>
      <span slot="フッター" class="ダイアログフッター">
        <el-button @click="dialogVisible = false">キャンセル</el-button>
        <el-button type="primary" @click="dialogVisibleConfirm">確認</el-button>
      </span>
    </el-ダイアログ>
  </div>
</テンプレート>

<スクリプト>
エクスポートデフォルト{
  データ（） {
    戻る {
      テーブルデータ: [],
      ダイアログ表示: false、
      addtitle: "役割を追加",
      ルールフォーム: {
        ロール名: "",
        役割の説明: ""
      },
      すべて: "",
      // 検証ルール: {
        ロール名: [
          { 必須: true、メッセージ: "キャラクター名を入力してください"、トリガー: "blur" }、
          { 最小: 3、最大: 5、メッセージ: "長さは 3 文字から 5 文字の間です"、トリガー: "ぼかし" }
        ]、
        roleDesc: [{ 必須: true、メッセージ: "ロールの説明"、トリガー: "ぼかし" }]
      }
    };
  },
  作成された() {
    this.tabList();
  },
  メソッド: {
    // テーブルインターフェースリスト tabList() {
      this.$api.jurisdiction.rolelist().then(res => {
        console.log(res.data.data, "]]]]]]]");
        テーブルデータを返します。
      });
    },
    // 追加 onhandAdd() {
      this.dialogVisible = true;
    },
    ハンドルクローズ(完了) {
      this.dialogVisible = false;
    },
    // 編集 handleEdit(index, row) {
      console.log(インデックス、行ID);
      this.dialogVisible = true; //ポップアップボックスを表示します this.ruleForm = row; //現在の行データを行に書き込み、現在の行データをフォームに割り当てます this.allid = row.id; //IDをグローバルに保存します},
    // 確認ダイアログVisibleConfirm() {
      // 新しいインターフェース if (!this.allid) {
        this.$api.jurisdiction.addrole(this.ruleForm)
          .then(res => {
            // コンソール.log(res,"new")
            this.$message.success("正常に追加されました"); // 正常に追加されたことを示すメッセージプロンプト this.$refs.refRuleForm.resetFields(); // テーブルデータをクリア this.dialogVisible = false; // ポップアップボックスを閉じる this.tabList(); // リストを更新する })
          .catch(res => {
            this.$message.error("追加に失敗しました");
          });
      } それ以外 {
        // インターフェースを変更する let id = this.allid
        パラメータ = {
          ロール名:this.ruleForm.roleName、
          ロールの説明:this.ruleForm.roleDesc、
        }
        this.$api.jurisdiction.edtrole(id,params)
          .then(res => {
            console.log(res,"変更")
            this.$message.success("変更に成功しました");
            this.$refs.refRuleForm.resetFields();
            this.dialogVisible = false;
            this.tabList();
          })
          .catch(res => {
            this.$message.error("変更に失敗しました");
          });
      }
    }
  }
};
</スクリプト>

<スタイルスコープ>
.bdtop {
  上境界線: 1px 実線 #eee;
  パディング上部: 10px;
}
.bdボトム{
  下境界線: 1px 実線 #eee;
  パディング下部: 10px;
  パディング上部: 10px;
}
.elタグ{
  マージン: 10px 0px;
}
.vcenter {
  ディスプレイ: フレックス;
  アイテムの位置を中央揃えにします。
}
</スタイル>