Vue要素はテーブルの追加、削除、データの変更を実装します

<el-table :data="テーブルデータ" スタイル="幅: 100%">
  <el-table-column prop="date" label="日付" width="180"></el-table-column>
  <el-table-column prop="name" label="姓名" width="180"></el-table-column>
  <el-table-column prop="address" label="住所"></el-table-column>
  <el-table-column label="操作">
    <テンプレート スロット スコープ="スコープ">
      <!-- 編集をクリックすると、テーブルデータを編集するための編集ページに入ります -->
      <el-button size="small" @click="handleEdit(scope.$index, scope.row)">編集</el-button>
      <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">削除</el-button>
    </テンプレート>
  </el-table-column>
</el-table>

<!-- 以下は、追加ボタンをクリックしたときに表示されるポップアップ ボックスを設定するために使用されます。テーブルをネストして、ポップアップ テーブル情報を表示できます。次の :visible.sync を使用して、表示するかどうかを制御します -->
<!-- 設定した値は内部にバインドされます。入力後、新しい値をページ上のすべてのデータに挿入します-->
<el-dialog title="ユーザー情報" :visible.sync="dialogFormVisible">
  <!-- el-dialog 内に el-form をネストしてポップアップ テーブルの効果を実現 -->
  <el-form :model="フォーム">
    <el-form-item label="住所" :label-width="フォームラベルの幅">
      <el-input v-model="form.address" オートコンプリート="オフ"></el-input>
    </el-form-item>
    <el-form-item label="名前" :label-width="フォームラベルの幅">
      <el-input v-model="フォーム名" オートコンプリート="オフ"></el-input>
    </el-form-item>
    <el-form-item label="日付" :label-width="フォームラベルの幅">
      <el-日付ピッカー
        v-model="フォーム.date"
        タイプ="日付"
        placeholder="日付を選択"
        値の形式="yyyy-MM-dd"
      </el-date-picker>
    </el-form-item>

    <el-form-item label="性別" :label-width="フォームラベルの幅">
      <el-select v-model="form.region" placeholder="性別">
        <el-option label="男性" value="男性"></el-option>
        <el-option label="女" value="女"></el-option>
      </el-select>
    </el-form-item>
  </el-form>
  <div スロット="フッター" クラス="ダイアログ フッター">
    <el-button @click="cancel">キャンセル</el-button>
    <!-- 更新をトリガーする方法を設定します -->
    <el-button type="primary" @click="update">OK</el-button>
  </div>
</el-ダイアログ>

<テンプレート>
  <div class="basetable" v-loading="読み込み中" 要素-loading-text="読み込み中">
    <!-- v-loading 設定の読み込み中 -->
    <div class="selectMenu">
      <el-date-picker v-model="value6" type="daterange" placeholder="日付範囲を選択"></el-date-picker>
      <!-- クリックすると追加メソッドがトリガーされます-->
      <el-button type="primary" @click="add">追加</el-button>
    </div>
    <div class="tableMain">
      <el-table :data="テーブルデータ" スタイル="幅: 100%">
        <el-table-column prop="date" label="日付" width="180"></el-table-column>
        <el-table-column prop="name" label="姓名" width="180"></el-table-column>
        <el-table-column prop="address" label="住所"></el-table-column>
        <el-table-column label="操作">
          <テンプレート スロット スコープ="スコープ">
            <!-- 編集をクリックすると、テーブルデータを編集するための編集ページに入ります -->
            <el-button size="small" @click="handleEdit(scope.$index, scope.row)">編集</el-button>
            <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">削除</el-button>
          </テンプレート>
        </el-table-column>
      </el-table>
    </div>
    <div class="page">
      <el-ページネーション
        @size-change="ハンドルサイズ変更"
        @current-change="現在の変更を処理する"
        :current-page.sync="現在のページ3"
        :ページサイズ="100"
        レイアウト="前へ、ページャー、次へ、ジャンパー"
        :合計= "1000"
      </el-pagination> ...
    </div>
    <!-- 以下は、追加ボタンをクリックしたときに表示されるポップアップ ボックスを設定するために使用されます。テーブルをネストして、ポップアップ テーブル情報を表示できます。次の :visible.sync を使用して、表示するかどうかを制御します -->
    <!-- 設定した値は内部にバインドされます。入力後、新しい値をページ上のすべてのデータに挿入します-->
    <el-dialog title="ユーザー情報" :visible.sync="dialogFormVisible">
      <!-- el-dialog 内に el-form をネストしてポップアップ テーブルの効果を実現 -->
      <el-form :model="フォーム">
        <el-form-item label="住所" :label-width="フォームラベルの幅">
          <el-input v-model="form.address" オートコンプリート="オフ"></el-input>
        </el-form-item>
        <el-form-item label="名前" :label-width="フォームラベルの幅">
          <el-input v-model="フォーム名" オートコンプリート="オフ"></el-input>
        </el-form-item>
        <el-form-item label="日付" :label-width="フォームラベルの幅">
          <el-日付ピッカー
            v-model="フォーム.date"
            タイプ="日付"
            placeholder="日付を選択"
            値の形式="yyyy-MM-dd"
          </el-date-picker>
        </el-form-item>

        <el-form-item label="性別" :label-width="フォームラベルの幅">
          <el-select v-model="form.region" placeholder="性別">
            <el-option label="男性" value="男性"></el-option>
            <el-option label="女" value="女"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div スロット="フッター" クラス="ダイアログ フッター">
        <el-button @click="cancel">キャンセル</el-button>
        <!-- 更新をトリガーする方法を設定します -->
        <el-button type="primary" @click="update">OK</el-button>
      </div>
    </el-ダイアログ>
  </div>
</テンプレート>

<script type="text/ecmascript-6">
エクスポートデフォルト{
  データ（） {
    戻る {
      読み込み中: true、
      // テーブルデータ tableData: [
        {
          日付: "2017-05-01",
          名前:「兵士76」
          地域:「男性」、
          住所：「キングスアベニュー」
          市： ""
        },
        {
          日付: "2017-05-02",
          名前:「ゲンジ」
          地域:「男性」、
          住所:「ネパール」、
          市： ""
        },
        {
          日付: "2017-05-03",
          名前:「ブラックリリー」
          地域:「女性」、
          住所:「ヴォルスカヤ工業団地」
          市： ""
        },
        {
          日付: "2017-05-04",
          名前:「トレーサー」、
          地域:「女性」、
          住所：「キングスアベニュー」
          市： ""
        },
        {
          日付: "2017-05-03",
          名前:「ザリヤ」
          地域:「女性」、
          住所:「ヴォルスカヤ工業団地」
          市： ""
        },
        {
          日付: "2017-05-03",
          名前:「ゼニヤッタ」
          地域:「男性」、
          住所:「ネパール」、
          市： ""
        },
        {
          日付: "2017-05-03",
          名前: 「ハンゾー」
          地域:「女性」、
          住所: "Huamura",
          市： ""
        }
      ]、
      // 都市選択データ cityList: [
        { 名前: "キングス・ロウ" },
        { 名前: "ネパール" },
        { 名前: "ヴォルスカヤ工業地帯" },
        { 名前: "Huamura" },
        { 名前: "ネパール" },
        { 名前: "ムーンベース" }
      ]、
      ダイアログフォーム表示: false、
      フォームラベル幅: "80px",
      // フォームを追加するときに値をバインドするフォームを設定します: {},
      値6: "",
      現在のページ3: 1,
      現在のインデックス: ""
    };
  },
  作成された() {
    // 読み込みアニメーションを 1.5 秒間表示するためのコールバック関数を設定します setTimeout(() => {
      this.loading = false;
    }, 1500);
  },
  メソッド: {
    ショータイム（） {
      this.$alert(this.value6, "開始時間と終了時間", {
        confirmButtonText: "確認",
        コールバック: アクション => {
          this.$メッセージ({
            タイプ: "情報",
            メッセージ: 「表示されました」
          });
        }
      });
    },
    // データを追加する方法は、関数を追加するためにいくつかの値を個別に設定することです。これらの値はオブジェクトに設定され、新しく追加されたオブジェクトが合計データに挿入されますadd() {
      this.form = {
        日付： ""、
        名前： ""、
        地域： ""、
        住所： ""
      };
      // ボタンをクリックした後に表示されるダイアログ ボックスを設定します。this.dialogFormVisible = true;
    },
    アップデート（） {
      // this.form.date = 再フォーマット(this.form.date);
      // HTML で日付形式を設定できます// 合計データに追加した情報を送信します this.tableData.push(this.form);
      this.dialogFormVisible = false;
    },
    ハンドル編集(インデックス、行) {
      // データを実現するにはデータのインデックスを渡します echo this.form = this.tableData[index];
      this.currentIndex = インデックス;
      //ダイアログ ボックスの可視性を設定します。this.dialogFormVisible = true;
    },
    handleDelete(インデックス、行) {
      // コンソールに似た関数を設定します。type this.$confirm("ファイルを完全に削除します。続行しますか?", "Prompt", {
        confirmButtonText: "確認",
        cancelButtonText: 「キャンセル」、
        タイプ: 「警告」
      })
        .then(() => {
          // 対応するインデックス位置のデータを削除します。バックグラウンドにデータを削除するように要求する行を設定できます。this.tableData.splice(index, 1);
          this.$メッセージ({
            タイプ: "成功",
            メッセージ: 「正常に削除されました!」
          });
        })
        .catch(() => {
          this.$メッセージ({
            タイプ: "情報",
            メッセージ: 「削除されました」
          });
        });
    },
    キャンセル（） {
      // キャンセルする場合は、ダイアログ ボックスを非表示に設定します。this.dialogFormVisible = false;
    },
    ハンドルサイズ変更(val) {
      console.log(`ページあたり${val}項目`);
    },
    現在の変更を処理する(val) {
      console.log(`現在のページ: ${val}`);
    }
  }
};
</スクリプト>
<スタイル lang="scss">
.ベーステーブル{
  .tableMain{
    マージン: {
      上: 10px;
    }
  }
  .ページ {
    フロート: 左;
    マージン: {
      上: 10px;
    }
  }
}
</スタイル>