vue と Element-plus を使用してテーブルの編集機能と行選択を実装する方法-Vue.js-php.cn

vue と Element-plus を使用してテーブルの編集機能と行選択を実装する方法

PHPz

リリース： 2023-07-17 09:43:39

オリジナル

4410 人が閲覧しました

vue と Element-plus を使用してテーブルの編集機能と行選択を実装する方法

はじめに:
Web アプリケーションを開発する場合、テーブルは頻繁に使用されるコンポーネントの 1 つです。テーブルの編集機能と行選択機能は、非常に一般的で実用的な要件です。 Vue.js フレームワークでは、Element-plus コンポーネントライブラリを組み合わせることで、これら 2 つの機能を簡単に実現できます。この記事では、Vue と Element-plus を使用してテーブルの編集機能と行選択機能を実装する方法を紹介し、対応するコード例を示します。

1. プロジェクトの準備
まず、Vue.js と Element-plus がインストールされていることを確認し、Vue プロジェクトを作成します。次のコマンドを使用して、Vue CLI をインストールし、新しい Vue プロジェクトを作成できます。

npm install -g @vue/cli
vue create vue-table-demo
cd vue-table-demo
npm install element-plus

ログイン後にコピー

2. 編集可能なテーブルを作成します

Vue テンプレートで、el-table を使用します。 コンポーネントを使用してテーブルデータを表示し、edit 属性を true に設定して編集可能な機能を実現します。さらに、@edit イベントリスナーを追加して、編集状態のテーブルデータを操作することもできます。

<template>
  <el-table :data="tableData" :edit="true" @edit="handleEdit">
    <el-table-column prop="name" label="姓名" editable></el-table-column>
    <el-table-column prop="age" label="年龄" editable></el-table-column>
    <el-table-column prop="gender" label="性别" editable></el-table-column>
    <el-table-column prop="address" label="地址" editable></el-table-column>
  </el-table>
</template>

ログイン後にコピー

Vue スクリプトで、テーブルデータ tableData と編集イベントを処理するメソッド handleEdit を定義します。ここでは、変更されたテーブル行データと変更されたデータを取得し、データの更新や API リクエストの送信などの対応する処理を実行できます。

<script>
export default {
  data() {
    return {
      tableData: [
        { name: "张三", age: 20, gender: "男", address: "北京" },
        { name: "李四", age: 25, gender: "女", address: "上海" },
        { name: "王五", age: 30, gender: "男", address: "广州" },
      ],
    };
  },
  methods: {
    handleEdit(row, column, cell) {
      // 获取被修改的表格行数据和修改后的数据
      const { oldValue, value } = cell;
      console.log("原始值：", oldValue);
      console.log("修改后的值：", value);

      // 更新数据或发送API请求
      // ...
    },
  },
};
</script>

ログイン後にコピー

3. 行選択関数の実装

Vue テンプレートで、el-table コンポーネントを使用し、selection# を設定します。 ##プロパティは true で、行選択機能が有効になります。さらに、@selection-change イベントリスナーを追加して、選択された行データを取得することもできます。

<template>
  <el-table :data="tableData" :edit="true" :selection="true" @selection-change="handleSelectionChange">
    <el-table-column type="selection"></el-table-column>
    <el-table-column prop="name" label="姓名" editable></el-table-column>
    <el-table-column prop="age" label="年龄" editable></el-table-column>
    <el-table-column prop="gender" label="性别" editable></el-table-column>
    <el-table-column prop="address" label="地址" editable></el-table-column>
  </el-table>
</template>

ログイン後にコピー

handleSelectionChange を処理するメソッドを定義します。ここでは、選択した行データを取得し、ステータスの更新、データの削除、API リクエストの送信などの対応する処理を実行できます。

<script>
export default {
  data() {
    return {
      tableData: [
        { name: "张三", age: 20, gender: "男", address: "北京" },
        { name: "李四", age: 25, gender: "女", address: "上海" },
        { name: "王五", age: 30, gender: "男", address: "广州" },
      ],
      selectedRows: [],
    };
  },
  methods: {
    handleSelectionChange(selection) {
      // 获取选择的行数据
      this.selectedRows = selection;
      console.log("选择的行数据：", this.selectedRows);

      // 更新状态或发送API请求
      // ...
    },
  },
};
</script>

ログイン後にコピー

この記事では、Vue と Element-plus を使用してテーブル編集機能と行選択という 2 つの一般的な機能を実装する方法を紹介します。対応するプロパティとイベントリスナーを設定することで、これらの関数を簡単に実装し、テーブルデータを操作できます。この記事が、Vue と Element-plus を使用して編集機能と選択機能を備えたテーブルを作成するのに役立つことを願っています。

以上がvue と Element-plus を使用してテーブルの編集機能と行選択を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。